The Mind map for the React learning route comes from
Adam Go ł ą b 的
react-developer-roadmap. By the time of publishing this article, the original warehouse is already available in Chinese, which you can browse by yourself. Since it is the aggregation list of roadmap, there will not be much difference in translation.

Learning roadmap


The related resources

  1. basis
    1. HTML
      1. Learn HTML basics
      2. Learn HTML basics
    2. CSS
      1. Learn the basics of CSS
      2. Add styles to the page based on the previous exercise
      3. Use Grid and Flexbox for page layout
    3. JS based
      1. Be familiar with the grammar
      2. Learn the basics of DOM
      3. Learn classic mechanics in JS (promotion, event bubbling, prototyping)
      4. Make some AJAX (XHR) requests
      5. Learn new features (ES 6+)
      6. Also, familiarize yourself with the jQuery library
  2. Develop general skills
    1. Learn about GIT, create some repositories on GitHub, and share your code with others
    2. Understand HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
    3. Don’t be afraid to use Google’s powerful search
    4. Familiar with terminal, configure shell (bash, ZSH, fish)
    5. Read books on data structures and algorithms
    6. Read books on design patterns
  3. inThe official websiteLearn React, or watch someThe tutorial
  4. Familiarize yourself with some of the tools you’ll be using
    1. Package management tool
      1. npm
      2. yarn
      3. pnpm
    2. Task execution tool
      1. npm scripts
      2. gulp
    3. Build tools
      1. Webpack
      2. Rollup
      3. Parcel
  5. style
    1. CSS pretreatment
      1. Sass/SCSS
      2. PostCSS
      3. Less
      4. Stylus
    2. CSS framework
      1. Bootstrap
      2. Materialize, Material UI, Material Design Lite
      3. Bulma
      4. Semantic UI
    3. CSS architecture
      1. BEM
      2. CSS Modules
      3. Atomic
      4. OOCSS
      5. SMACSS
      6. SUITCSS
    4. CSS in JS
      1. Styled Components
      2. Radium
      3. Emotion
      4. JSS
      5. Aphrodite
  6. State management
    1. Component State/Context API
    2. Redux
      1. Asynchronous Actions (Side effects)
        1. Redux Thunk
        2. Redux Better Promise
        3. Redux Saga
        4. Redux Observable
      2. Data persistence
        1. Redux Persist
        2. Redux Phoenix
      3. Redux Form
    3. MobX
  7. Type checking
    1. PropTypes
    2. TypeScript
    3. Flow
  8. The form
    1. Redux Form
    2. Formik
    3. Formsy
    4. Final Form
  9. routing
    1. React-Router
    2. Router5
    3. Redux-First Router
    4. Reach Router
  10. The API client
    1. REST
      1. Fetch
      2. SuperAgent
      3. axios
    2. GraphQL
      1. Apollo
      2. Relay
      3. urql
  11. Tool library
    1. Lodash
    2. Moment
    3. classnames
    4. Numeral
    5. RxJS
    6. Ramda
  12. test
    1. Unit testing
      1. Jest
      2. Enzyme
      3. Sinon
      4. Mocha
      5. Chai
      6. AVA
      7. Tape
    2. End to end testing
      1. Selenium, Webdriver
      2. Cypress
      3. Puppeteer
      4. Cucumber.js
    3. Integration testing
      1. Karma
  13. internationalization
    1. React Intl
    2. React i18next
  14. Server side rendering
    1. Next.js
    2. After.js
  15. Static Web site Generator
    1. Gatsby
  16. Backend integration framework
    1. React on Rails
  17. The mobile terminal
    1. React Native
    2. Cordova/Phonegap
  18. The desktop
    1. Proton Native
    2. Electron
    3. React Native Windows
  19. Virtual reality
    1. React 360

Warehouse Address:

SangKa/react-roadmap