React has by far the largest market share among JavaScript frameworks!

However, it is a framework with a high failure rate, so I would like to introduce a roadmap for learning React from my knowledge as an active front-end engineer!

Understanding React overview

First of all, what can React do? And what features does it have to make it work? Let’s learn about the following!

The best framework for building SPA

One of the biggest advantages of JavaScript frameworks such as React is the ability to efficiently build single page application (SPA)!

Simply put, SPA is a technology that ‘allows screen transitions to be carried out without waiting for a server response’. This feature allows for quick screen transitions.

The mechanism that makes this SPA possible is actually achieved by “making it look like a screen transition is taking place by replacing the part below the body tag in the HTML”!

With React, each time the screen URL changes, only the display part of the HTML is replaced.

So how does it change parts of the HTML?

To find out, you first need to understand something called ‘components’.

The concept of ‘components’

React allows HTML to be described in JavaScript, and parts can be created in units of screen components, such as buttons, headers and footers.

These component parts are called ‘components’, and screens are built by combining components.

Screen transitions in SPA are achieved by replacing these components.

This method of describing HTML in JavaScript is called ‘jsx’, and React uses this method to create component files.

In this case, the side to be introduced is called the parent component and the side to be introduced is called the child component.

Furthermore, components are created as JavaScript files, so they are introduced by importing the child component’s js file into the parent component’s js file.

At this point, the JavaScript function “ECMA module” is used, so make sure you have a good review of it!

Change only the parts of the data that have been updated (about the virtual DOM)

One of the advantages of using React is that “only the parts affected by the updated data are changed”.

In the case of web services that do not use React, even if only a part of the data is changed, synchronous communication is used and the entire screen has to be redrawn, which is not easy to operate. (Asynchronous communication is also possible using ajax, but this tends to result in complex and poorly maintainable code.)

With React, it is possible to “redraw only the parts of the screen related to the updated data”.

Therefore, this can be achieved with simple code and without redrawing via synchronous communication.

This can be achieved by differential rendering using the Virtual DOM.

The concept of the virtual DOM is a little difficult to grasp, so we would like you to have an image of it as “having screen data before and after changes, and having a function that detects the differences and updates only the changed parts”.

Components have states (State and Props)

We have seen that changes to the screen UI are efficiently implemented by the virtual DOM.

So how can we determine the sign that the UI has changed?

Actually, each component can have its own data (state), and the change in state is used to determine that the UI has changed. (In React, a state is called a ‘State’.)

You can define states for components using functions such as ‘useState’ in React Hooks.

Components can also be nested, so you can pass states defined in a parent component to a child component.

This functionality is called ‘Props’, and in React, States and Props are the foundation of state management, so it is necessary to have a good understanding of them.

State management is fundamental in React!

React provides a comfortable UI through state management using States and Props.

In addition to Props, there is also a function called ‘Context API’ for passing state within components.

There is also a function called “Redux” that enables this, as there are situations where you may want to use a common state for components that are not in a parent-child relationship. (Functions that manage state outside of components, such as Redux, are sometimes referred to as ‘global state’ or ‘store’.)

Thus, state management is very important in React!

Since React does things in invisible areas such as the virtual DOM, it is difficult to get an image of how the state changes and the UI is actually changed behind the scenes.

Therefore, it is important to first implement an application that changes the UI by state management using only JavaScript, and understand how the UI changes based on the flow of data.

If you have never created a todo list in JavaScript, please try implementing it before learning React!

Conclusion

There are four key aspects to learning React.

The best framework for building SPA
Components
Virtual DOM
State Management