React Developer Roadmap

Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer.

Disclaimer

The purpose of this roadmap is to give you an idea about the landscape. The road map will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy does not always mean best suited for the job

Roadmap

Resources

1. Basics
2. HTML
   • Learn the basics of HTML
   • Make a few pages as an exercise
3. CSS
   • Learn the basics of CSS
   • Style pages from previous step
   • Build a page with grid and flexbox
4. JS Basics
   • Get familiar with the syntax
   • Learn basic operations on DOM
   • Learn mechanisms typical for JS (Hoisting, Event Bubbling, Prototyping)
   • Make some AJAX (XHR) calls
   • Learn new features (ECMA Script 6+)
   • Additionally, get familiar with the jQuery library
5. General Development Skills
6. Learn GIT, create a few repositories on GitHub, share your code with other people
7. Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
8. Don't be afraid of using Google, Power Searching with Google
9. Get familiar with terminal, configure your shell (bash, zsh, fish)
10. Read a few books about algorithms and data structures
11. Read a few books about design patterns
12. Learn React on official website or complete some courses
13. Get familiar with tools that you will be using
14. Package Managers
    • npm
    • yarn
    • pnpm
15. Task Runners
    • npm scripts
    • gulp
16. Webpack
17. Rollup
18. Parcel
19. Styling
20. CSS Preprocessor
    • Sass/CSS
    • PostCSS
    • Less
    • Stylus
21. CSS Frameworks
    • Bootstrap
    • Materialize, Material UI, Material Design Lite
    • Bulma
    • Semantic UI
22. CSS Architecture
    • BEM
    • CSS Modules
    • Atomic
    • OOCSS
    • SMACSS
    • SUITCSS
23. CSS in JS
    • Styled Components
    • Radium
    • Emotion
    • JSS
    • Aphrodite
24. State Management
25. Component State/Context API
26. Redux
    1. Async actions (Side Effects)
       • Redux Thunk
       • Redux Better Promise
       • Redux Saga
       • Redux Observable
    2. Helpers
       • Rematch
       • Reselect
    3. Data persistence
       • Redux Persist
       • Redux Phoenix
    4. Redux Form
27. MobX
28. Type Checkers
29. PropTypes
30. TypeScript
31. Flow
32. Form Helpers
33. Redux Form
34. Formik
35. Formsy
36. Final Form
37. Routing
38. React-Router
39. Router5
40. Redux-First Router
41. Reach Router
42. API Clients
    1. REST
    2. Fetch
    3. SuperAgent
    4. axios
    5. GraphQL
    6. Apollo
    7. Relay
    8. urql
43. Utility Libraries
    • Lodash
    • Moment
    • classnames
    • Numeral
    • RxJS
    • ImmutableJS
    • Ramda
44. Testing
    1. Unit Testing
    2. Jest
    3. Enzyme
    4. Sinon
    5. Mocha
    6. Chai
    7. AVA
    8. Tape
    9. End to End Testing
    10. Selenium, Webdriver
    11. Cypress
    12. Puppeteer
    13. Cucumber.js
    14. Nightwatch.js
    15. Integration Testing
    16. Karma
45. Internationalization
    • React Intl
    • React i18next
46. Server Side Rendering
    • Next.js
    • After.js
    • Rogue
47. Static Site Generator
    • Gatsby
48. Backend Framework Integration
    • React on Rails
49. Mobile
    • React Native
    • Cordova/Phonegap
50. Desktop
    • Proton Native
    • Electron
    • React Native Windows
51. Virtual Reality
    • React 360

The original guide can be found here: https://github.com/adam-golab/react-developer-roadmap.