[React] Basics of React.

Hello, this time I've put together a quick summary of the basics of React!

The Philosophy of React

• Don't touch the DOM. I'll do it.
• Build websites like lego blocks.
• Unidirectional data flow.
• UI, The rest is up to you.

What is JSX?

This is code that can be written in a format similar to HTML by extending JavaScript. Although it is in HTML format, it is still JS code in HTML format, so it needs to be distinguished. In JSX, what is called class in HTML is written in a format like className. Generally, properties are written in camel case, like the className mentioned above.

React Scripts

• react-script start → It will run on the local environment.
• react-script build → Creates files that can be published online using Babel and Webpack.
• react-script eject →

Babel and Webpack

To use React, you need Babel and Webpack.

Babel is a tool that compiles code such as JSX into JS that can be loaded in a browser. When using React, files are often loaded using imports, but webpack follows all such imports in a chain-like manner, organizes them, and outputs JS files.

About React Development

Things to keep in mind when developing with React.

When was it rendered?

When will re-rendering occur?

It is said that keeping this in mind is extremely useful when developing.

Components

The concept of components is very important for React. When developing React, development is basically carried out on a component-by-component basis.

Components include

• Functional components
• Class component

There are two types:

Function components are basically written like functions, so they are structured to return elements to be displayed, etc. This is a good way to write components that do not have state in a simple way.

When it comes to class components, they are often written using a class and structured to display the elements in a form similar to render.

States

State management is essential when developing with React. States are basically in JSON format. The advantage of having state is that components can store information.

Updates and changes to state are done with setState. When state is updated by setState, the component is re-rendered. (setState not only updates state, but also re-renders.) The merge method used by setState is shallow merge.

Since setState is performed asynchronously, the code written after setState is not necessarily executed after the state is changed. If there is a process you want to execute after changing the state with setState,

this.setState(
() => {
return {
①State change process }
},
() => {
②Process to be executed after changing state }
)

If you write it like this, ② will be executed after ①.

State is private to the component in which it is defined; for example, the state of a parent component cannot be directly changed by a child component.

Properties

Props are used to pass values ​​from a parent component to a child component. Because React is designed based on components, there are often cases where you want to use a value used in a parent component in a child component. Props are also used to store attributes.

This Props is basically read-only and is used for reference, and has unidirectional characteristics such as being able to extract values ​​but not being able to rewrite them.

Props are generally passed within curly braces { } .

Props that represent events are often named like on[Event], and methods that handle the events are named like handle[Event]. For example, for a click event,

onClick = { () => this.handleClick(i) }

Give it a name like this.

Using State and Props

It is a best practice to have the state in the parent component. It is also preferable to pass the updated state information to child components as props.

However, as mentioned above, state is private to the component and cannot be modified directly by child components.

Therefore, if you want to change the state of a parent component from a child component, you need to prepare a function for making the changes in the parent component and call that function from the child component.

(Parent component) → Prepare state and a function to update the state & pass the state update function to the child component

(Child component) → When you change the state, run the state update function to update the parent component's state.

Lifting up the State

As mentioned above, state is a private entity that can only be changed directly within a component.

"A child component wants to access the parent component's state"

There are situations where the state is in a child component.

"Parent component wants to access child component's state"

You will also come across situations like this.

In conclusion, although it is possible for a parent component to reference the state of a child component, this is not desirable as it can complicate the code.

So, in that case, the state in the child component is lifted up to the next higher component. Since this is a fairly common task, I'll write it down here.

The Recommendation of Immutability

There are two possible methods for modifying data: modifying the original data directly (mutability) or copying the original data, modifying the copy, and replacing it with the original data (immutability).

React generally encourages immutable changes.

The reason for this is that the official React documentation states:

• Complex functions can be easily implemented
• Changes are easier to detect
• Deciding to re-render

https://ja.reactjs.org/tutorial/tutorial.html#why-immutability-is-important

The advantages are listed as follows.