DEV Community

Cover image for How to Become a React JS Developer? Complete Roadmap
rafikadir
rafikadir

Posted on

How to Become a React JS Developer? Complete Roadmap

Introduction to React.js:
React.js is a front-end JavaScript library for building user interfaces. It was developed by Facebook and is maintained by Facebook and the open-source community.

Prerequisites to learn React:
There’s only one prerequisite and that is:

  1. JavaScript

NOTE :

  • Do not jump straight into React.js without understanding JavaScript because otherwise, you will be stuck in tutorial hell.

Step 1:
Before learning React, you should have a good understanding of these JavaScript topics :

  • Basic Syntax
  • ES6+ features
  • Arrow functions
  • Template literals

JavaScript prerequisites:
These concepts are important before dive into React

  • Array Methods
  • Object property shorthand
  • Destructuring
  • Rest operator
  • Spread operator
  • Promises
  • Async/Await syntax
  • Import and export syntax

React.js Roadmap

Step 2 :

Basic things to learn in React.js

  • File & Folder structure
  • Components
  • JSX
  • Props
  • State
  • Events
  • Styling
  • Conditional Rendering

Step 3 :

Learn about React.js Hooks - the essential hooks to learn :

  • useState
  • useEffect
  • useRef
  • useContext
  • useReducer
  • useMemo
  • useCallback

Step 4 :

Then learn some of the React.js UI Frameworks :

  • Material UI
  • Ant Design
  • Chakra UI
  • React Bootstrap
  • Rebass
  • Blueprint
  • Semantic UI React

Step 5 :
Learn to use some of the most popular React.js packages

  • React Router
  • React Query
  • Axios
  • React Hook Form
  • Styled Components
  • Storybook
  • Framer Motion

Step 6 :
Learn how to manage state with state management tools

  • Redux
  • MobX
  • Hookstate
  • Recoil
  • Akita

Step 7 :
More things to learn after learning React.js fundamentals

  • Next JS ( Recommended )
  • Gatsby
  • TypeScript
  • React Native
  • Electron

Step 8 :
Learn to test your React.js applications with some of these libraries/frameworks:

  • Jest
  • Mocha
  • Testing Library
  • Enzyme

Follow me on Instagram: rafikadir

Top comments (0)