React Developer Roadmap!
My path to learning react when I started two years back.
The purpose of this roadmap is to give you an idea about how I did.
The road map will guide you if you are confused about what to learn next.
Disclaimer: There might be some more additional stuff based on your need.
Learn React or JavaScript first?
You should understand at least the basics of JavaScript, often referred to as JavaScript ES5, and have decent knowledge about HTML and CSS.
React also utilizes JavaScript syntax, most often referred to as JavaScript ES6 and beyond.
Basic knowledge of HTML, CSS, and JavaScript:
- HTML 👉 Learn the basics of HTML
- Learn the basics of CSS
- Style pages from the previous step
- Build a page with grid and flexbox
- 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+
- Functions are first-class citizens in JavaScript
- bind(), apply(), & call()
- Object Methods
- Array Methods
- Prototypical Inheritance -> ES6 Class
- Callbacks and Promises
- Event Loop
- Event Bubbling
- Regular Expressions
- Error Handling
- Hoisting, Memoization
- Declarative vs imperative programming
- Functional vs object-oriented programming
Must have development skills:
- Learn GIT, create a few repositories on GitHub
- Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
- Get familiar with the terminal, configure your shell (bash, zsh, fish)
- Read books about design patterns
Get familiar with tools that you will be using on daily basis:
💻 Package Managers -npm -yarn
💻Task Runners -npm scripts -gulp
💻Webpack
💻 Styling
💻 CSS Preprocessor -Sass/CSS
- Less
- Stylus
💻 CSS Frameworks
- Bootstrap
- Materialize, Material UI, Material Design Lite
- Semantic UI
💻 CSS in JS
- Styled Components
- Emotion
- JSS
State Management:
- Component State/Context API
Redux
Learn about React's JSX syntax
- Learn about React Components
- Learn about React Component Composition
- Learn about React Props
- Learn about React State
-Form Helpers
- Redux Form
- Formik
- Formsy
- Final Form
-Routing
- React-Router
- Router5
- Redux-First Router
- Reach Router
GraphQL -Apollo
- Relay
Libraries Lodash Moment classnames Numeral RxJS
Testing
Unit Testing
- Jest - Mocha - ChaiEnd to End Testing
- Selenium, Webdriver
- Cypress
- Puppeteer
- Cucumber.js
- Nightwatch.js
Server-Side Rendering
- Next.js
- After.js
- Rogue
Mobile
- React Native
NodeJS Fundamentals & Code Editors
Understanding of NodeJS fundamentals is important to work on ReactJS.
How to setup react on windows or Mac:
Freecode roadmap for reference: 👇
How to Learn React — A roadmap from beginner to advanced
A roadmap from beginner to advanced
Learn to React for free:
Once you will have a basic understanding of React, you can start building some basic projects such as…
- Simple todo-app
- Simple calculator app
- Build a shopping cart
- Display GitHub’s user stats using GitHub API
There are plenty of free React learning resources online that have a high quality and are accessible to everyone. If anyone asks me about becoming a React developer, I often just send them straight away to FreeCodeCamp.
You can participate in the 100 Days of Code challenge, write about it on Twitter.
Make it a daily habit.
Only when sticking to it for a while, by having the persistence and by coding every day, you will eventually become a React developer.
It's a marathon and not a sprint.
If you're a beginner to React, here's a great course by ZTM (zero to mastery)
💻 Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)
Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)
If you like this article chances are you will like my other article as well 👇
how-to-land-your-first-job-as-a-web-developer
top-interview-soft-skills-questions-and-answers
list-of-my-favorite-javascript-resources
Hope you like this one 💙