Serenova React Developer Roadmap

Roadmap to becoming a React developer in 2018

Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn in order to become a React developer. This chart was made for as a tip for everyone who asks "What should I learn next as a React developer?"

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.

Roadmap

Resources

1. Basics
   1. HTML
      • Learn the basics of HTML
      • Course
   2. CSS
      • Learn the basics of CSS
      • Course
      • Build a page with grid and flexbox
   3. JS Basics
      • Get familiar with the basics
      • Course
      • Learn new features (ECMA Script 6+)
2. General Development Skills
   1. GIT
      • Course
      • Fork a few repositories on GitHub, share your code with other people
   2. Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
   3. Don't be afraid of using Google, Power Searching with Google
   4. Get familiar with terminal, configure your shell (bash)
3. Learn React on official website or complete some courses
4. Get familiar with tools that you will be using
   1. Package Managers
      • npm
      • yarn
   2. Task Runners
      • npm scripts
      • gulp
   • Webpack
   • Rollup
   • Parcel
5. Styling
   1. CSS in JS
      • Styled Components
      • Radium
   2. CSS Preprocessor
      • Sass/CSS
6. State Management
   1. Component State/Context API
   2. Redux
      1. Async actions (Side Effects)
         • Redux Saga
         • Redux Observable
         • Redux Thunk
      2. Helpers
         • Reselect
      3. Data persistence
         • Redux Persist
      4. Redux Form
7. Developer tools
   1. React Developer Tools
   2. Redux DevTools Extension
8. Type Checkers
   • PropTypes
   • TypeScript
   • Flow
9. Form Helpers
   • Redux Form
10. Routing
    • React-Router
11. API Clients
    1. REST
       • Fetch
       • axios
    2. GraphQL
       • Apollo
       • Relay
12. Utility Libraries
    • RxJS
    • Moment
    • Lodash
13. Testing
    1. Unit Testing
       • Jest
       • Enzyme
    2. End to End Testing
       • Selenium, Webdriver
       • Cypress
       • Puppeteer
14. Internationalization
    • React Intl
    • React i18next
15. Code generators
    • Hygen
    • Plop

Contribution

The roadmap is built using Draw.io. Project file can be found at /src directory. To modify it, open draw.io, click Open Existing Diagram and choose xml file with project. It will open the roadmap for you, update it, upload and update the images in readme and create a PR (export as png).

• Open pull request with improvements
• Discuss ideas in issues

License