React is a leading technology for developing outstanding user interfaces. It makes it possible to create scalable, and, most importantly, repeatedly used solutions.

According to StackOverFlow’s 2021 survey, React is one of the most demanded web frameworks. Thus, it is believed that even more companies will be looking for React developers in 2022.

In this article, we discover the path of becoming a React developer.

What is React.js?

React.js is a JavaScript library that was created by Facebook. It was aimed to create scalable components of user interfaces.

However, it can be used for developing a single-page or mobile application, and PWAs (progressive web applications). The most important thing about its popularity is its low learning slope.

Required skills

JavaScript

Since React is a JS library, it is crucial to be experienced in this programming language and understand its main concepts.

The must-have JavaScript components are:

1. JS variables;
2. promises;
3. arrow functions;
4. asynchronous JS;
5. higher-order and callback functions;
6. DOM manipulation and events;
7. data types and their methods.

HTML and CSS

React representational components React are developed using HTML and are stylized using CSS or side tools. Imagine you create a button component, which is to have stylization, certain attributes, and a label. In most cases, such a component will require an HTML component and CSS (or any other styles library) stylization.

Main React concepts to master

Virtual DOM model and Diffing algorithm

These two are what is in React.js’s behind the scenes. Since DOM manipulations are rather time-consuming, React uses the virtual DOM model concept.

The virtual DOM model is an abstraction of the real DOM model. Its workflow looks like this: the virtual DOM is updated every time a component or an element is rendered, and, after that, the updated virtual dom and its pre-updated copy are compared to detect the objects that are to be updated. This process is called diffing.

Next, the real DOM gets updated, and the newly updated virtual DOM becomes pre-updated virtual DOM for the following changes.

JSX: React Template Language

JSX stands for eXtensible Markup Language and may be called React’s syntax. This is what helps write HTML code in JavaScript and display a component on UI.

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

Components: building blocks of React applications

Any React application consists of components. For example, a button, a dashboard, or any other element is a component. The following 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

Since the component is not reusable and its label and URL are fixed.

Using props helps make such components reusable.

Props

These are property objects that are used to transfer data between React components, and the data must be read-only. Props can be also passed like variables or objects in a uni-directional flow.

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

This is how the Link component becomes reusable; thus, it can be rendered with different labels and URLs, f.e.:

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

Managing state

In simple terms, a state is a JavaScript object that stores mutuable data, which can be used and updated by a component. Any state changes lead to component re-rendering.

The state is traditionally associated with components that are based on classes; however, the state can be managed in functional components by means of the useState/useReducer hook.

Managing states is also possible at the component level via calling the useState hook; and at the global level via various state management solutions (such as Context API, Recoil, Reduxl, and so on).

React hooks

Hooks were introduced in React 16.8 in 2018. As we have mentioned above, React hooks help manage states and lifecycle methods making class-based components redundant.

Hooks are usable at the top level and in functional components only.

Basic Hooks list

1. useState
2. useEffect
3. useContext

Advanced Hooks list

1. useReducer
2. useCallback
3. useMemo
4. useRef
5. useImperativeHandle
6. useLayoutEffect
7. useDebugValue

For example, a state can be managed using the useState hook at the local level in the following way:

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

Custom hooks creation

Custom hooks can be created to share reusable functional logic across multiple components. For example, one can create a custom hook for retrieving data from API.

A custom hook’s name must start with use.

Let’s revise the practical example below. The custom hook is created here. It is aimed at returning a browser window’s width and height, and it is can be used for mobile responsiveness.

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

The useWindowSize hook can be also used for detecting a window’s width and rendering desktop or mobile components against respective screen sizes.

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

Mastering the components that are listed in this article gives you the basis to becoming a React developer. However, there are several advanced React concepts that are must-haves for those who want to grow as a professional faster.

Advanced React concepts

1. Higher-Order Components
2. Code-splitting
3. Refs
4. Context API
5. Server-side Rendering
6. React Suspense

React Server Components

However, since React itself is a library, you’ll have to use other libraries and packages (f.e., React Router for routing, Redux for state managing, and so on), that offer more functional possibilities.

React Ecosystem

React Router / React Router Dom

React Router is a routing library that is used for switching between React’s components via changing URLs. When a user follows a URL, React Router decides whether a component is set to render against that router and render on UI.

Managing states using third-party libraries

React provides state management at both component and global levels via useState hook and Context API. However, you can use a third-party tool (such as Redux, Recoil, Mobx) if you need more control or the application you work on is more complex.

Forms

It is required to use a library if you want to develop dynamic and complex forms with validations or other features. Formic and React Hooks Forms are widely used for creating forms since the libraries handle all aspects of a form at ease.

Yup is another form that is widely used for adding validations.

Testing React

Testing React is a concept aimed at checking if the components fit the requirements. For example, you create an input field and expect it to behave in a certain way; in such a case, the test for the component must be written considering the use scenario.

In contrast to manual testing, automated one ensures stable functioning of the components, as well as saving time and detecting errors quickly. It is important for a developer to be skilled in writing test scenarios of the components they develop. Jest, Cypress and React Testing Library are widely used for testing React applications.

Styling and UI libraries

Any UI library can be used instead of creating new UI components (f.e., buttons, modals, etc). The commonly used UI libraries are Material-UI, Antd, and Bootstrap. There also are many libraries that can help you create your styling, f.e., Styled-components, Tailwind CSS.

Working with APIs

Various promise-based libraries provide great solutions for working with Rest and GraphQL APIs. Axios, Superagent are used for Rest APIs, while Apollo and Relay are popular ones for GraphQL.

Tools to master

1. NPM
2. Git
3. Webpack
4. Heroku / Netlif

Firebase / AWS Amplify

Projects to build and learn from

1. E-commerce stores
2. To-do apps
3. Basic SAAS apps