How to become a React developer in 2022? Here is the complete Roadmap.

React is the leading technology for building outstanding, fast, scalable, and most importantly reusable frontends. As per the 2021 Developer Survey conducted by StackOverFlow, React is the most used web framework. More companies are looking for React developers in 2022 than ever.

What is React.js?
React.js is a JavaScript UI library, created by Facebook, for building scalable UI components. It can be used for building single-page applications, mobile apps, PWAs. The most important factor behind its popularity is the lower learning slope.

In this article, we will learn step by step that how can one become a React developer.

Most of the non-reactive code written in React is JavaScript.

## Pre-requisites
a. JavaScript
As React is a JavaScript library, it is important to have a background in JS and an understanding of some important concepts. React nowadays comprise React Hooks and functional components, learning ES6 is recommended.

JavaScript concepts, you should know:

Variables in JS
Arrow Functions
Data Types and their methods
Dom Manipulation and events
Higher-Order and Callback Functions
Promises
Asynchronous JS

b. HTML / CSS
The representational components in React are developed using HTML and styled via CSS or a third-party tool. Suppose you are creating a button component. That component will have a label, styling, and some attributes. More than often, the HTML button element will be used for creating that component and that will be styled using CSS or any other styling library.

Core React Concepts to master

1. Virtual Dom and Diffing algorithm

Virtual Dom and Diffing algorithm are behind the scene of React.js. Manipulating real dom is slow, so React utilized the concept of virtual dom. Virtual dom is an abstraction of real dom. Every time a component or element is rendered, the virtual dom object gets updated. It then compares the recently updated virtual dom with a copy of the pre-updated virtual dom and figures out which dom object to update. The process to compare two virtual doms is called diffing. In the next step real dom is updated with the virtual dom and the updated virtual dom becomes pre-updated virtual dom for the next dom change.

2. JSX: React Template Language

JSX can be called the syntax of React. It stands for JavaScript XML and helps to write HTML code in JavaScript and render your custom component on UI.

const blog = 'programinja'
You can add variable "blog" in "p" element by using power of JSX.
<p>Blog: {blog}</p>

3. Components: building blocks of React apps
The React app comprises React components. From a simple button to a complex dashboard chart, each and everything in React apps is a component. The below code snippet is a simple React component and will render a link on UI.

import React from 'react'
const SimpleComponent = () => {
  return (
        <a href='https://www.google.com'>Google!</a>
  )
}
export default SimpleComponent

The component is not reusable as its label and URL are fixed. To make a component re-usable props come in.

4. Props
Props are property objects, used to pass read-only data between React components. Props can be passed as a variable or object and in a uni-directional flow.

/// simpleComponent.js
import React from 'react'
const SimpleComponent = ({ label, url }) => {
  return (
        <a href={label}>{url}</a>
  )
}
export default SimpleComponent

The Link component is now reusable and can be rendered with different labels and URLs as shown in the below snippet.

/// index.js
import SimpleComponent from './simpleComponent'
const App = () => {
  return (
      <SimpleComponent label='Google!' url='https://www.google.com' />
    )
}

5. State Management

In layman’s language, a state is a Javascript object, which stores mutable data that can be used and updated by the component. Any change in state re-renders the component. Historically state is associated with class-based components, however, with the useState / useReducer hook, it can be managed in functional components.

The state can be managed at the component level by calling useState hook and at the global level through state management solutions such as Redux, Context API, Recoil, etc.

6. React Hooks

React 16.8 introduced hooks in 2018. React hooks help manage state and lifecycle methods in functional components and have made class-based components redundant. Hooks can only be used in functional components and at the top level.

Basic Hooks

useState
useEffect
useContext

Advanced Hooks

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

import React, { useState } from 'react'
const App = () => {
const [sum, setSum] = useState(1) /// The initial value of sum is 1.
return (
  <>
    <button onClick={() => setSum(sum + 1)} >+</button
    <span>{sum}</span>
    <button disabled={sum === 1} onClick={() => setSum(sum - 1)}>-    </button>
  </>
  )
}
export default App

In the above component, the state is managed via useState Hooks at the local level.

7. Creating your own custom hooks

Custom hooks can be created to share reusable functional logic across multiple components. For example, a custom hook to detect the browser window width or fetch data from APIs can be created and used across the app. A custom hook starts with use.

In the below example, a custom hook is created, which returns the width and height of the browser window. It can be used for mobile responsiveness, etc.

import { useLayoutEffect, useState } from 'react'
const useWindowSize = () => {
const [size, setSize] = useState([0, 0])
useLayoutEffect(() => {
const updateSize = () => {
setSize([window.innerWidth, window.innerHeight])
}
window.addEventListener('resize', updateSize)
updateSize()
return () => window.removeEventListener('resize', updateSize)
}, [])
return size
}
export default useWindowSize

You can use useWindowSize hook to detect widows width and render desktop or mobile components against respective screen sizes.

const NavBar = () => {
  const [width] = useWindowSize()
  return (
    width > 786 ? <Desktop /> : <Mobile />
  )
}

If you have mastered these concepts, you can call yourself a beginner React developer. But, there are some higher-level concepts to be learned to beat the crowd.

Advanced React Topics

Higher-Order Components
Code-splitting
Refs
Context API
Server-side Rendering
React Suspense
React Server Components

After picking up these concepts you can call yourself a React developer.

So now you have learnt basic and advanced level React.

But, as React is itself a library, so we need to use other libraries and node packages, such as React Router for routing, Redux for state management, etc, to leverage more functionalities.

React Ecosystem

1. React Router / React Router Dom
React Router is a routing library for navigating between React components by modifying URLs. When a user lands on a URL, React Router will detect if a component is set to render against that router and render on UI.

2. State Management via third-party libraries
Although React provides state management at component and global level via useState hook and Context API. However, if an app is much complex and you want more control, a third-party tool like Redux, Recoil, Mobx can be used. Personally, I suggest using Context API with useReducer.

3. Forms
Creating dynamic and complex forms with validations and other stuff requires using a library. Formic and React Hooks Forms are widely used for creating forms. These libraries handle all aspects of a form seamlessly. Yup is widely used for adding validations.

4. React Testing
React testing is a concept to test your components if a component behaves as expected. For example, you have created an input field and expect it to behave in a certain way. The test will be written to cater to those use-cases. Automated testing help stabilize the components and reduce manual testing and captures bugs immediately. It is important for a developer to write test cases for your components. Jest, Cypress and React Testing Library are widely used for testing React apps.

5. Styling / UI libraries
Instead of creating UI components, such as Modals, Buttons, Menu, Dropdowns, etc, any UI library can be used. Common examples are Material-UI, Antd, Bootstrap. Besides, there are also multiple styling libraries to create your own styling such as Styled-components, Tailwind CSS.

6. Handling APIs
Multiple promises-based libraries are providing awesome solutions to work with Rest and GraphQL APIs. Axios, Superagent and are the popular ones for Rest APIs. Apollo and Relay dominate GraphQL.