[React]初心者でも分かるコンポーネントとは？解説記事

This section summarizes the concept of "components" often used in React. We use the term "component" a lot, but it is difficult to explain it properly, so I have systematically summarized the concept of components.

I've tried to summarize the concept of components in a systematic way, so that even beginners can easily understand the concept.

How to use React

To understand the components, let's first review a little about React.

React is a UI library developed by Facebook and is used to create screens on the web by combining components (parts) to create a UI.

What is a component?

Simply put, a component is

Appearance + Function

are the components that make up the UI.

Multiple of these components are combined to build a screen on the web.

For example, a component may be used at each article information box of the article list like this.

(The following page is not actually using React, so this is just an image.)

In many cases, components are used in parts of the page that are intended to be reused and used multiple times.

Normally, when using jQuery or other tools, the element information is rewritten in the DOM, but in the case of React, it is redrawn.

The conditions for redrawing, which will be explained in detail later, are basically as follows.

When props are changed

When the state is changed

Why use components?

So why use components?

The main reasons are as follows

For reuse	No need to describe the same parts and functions over and over again.
To improve code visibility	Basically, "one component = one file, " especially when there are many elements.
Easy to change	Since it is reused, all the usage locations can be changed by changing one file (component).

Types of Components

There are also two types of components.

However, nowadays, there are very few opportunities to use class components, so it would be better to focus on learning function components at first. (Since 2020, Hooks can be used, so what can only be done with Class Components can now be done with Function Components.)

Class Component

class Welcome extends React . 
 render() { 
   return < h1>Hello, {this. props . name}</h1>; 
 } 
 }

Functional Component

const Welcome = (props) => { 
 return < h1>Hello, {props. name}</h1>; 
 }

or

 
function Welcome(props) { return

<h1>Hello, {props.name}</h1>

 
; }

Component usage and props

Component Structure

Basically

Parent component

Child Components

and then create

Parent component → import child components

Child component → export to parent component

The child component will be used within the parent component by

Passing props between components

Components are designed to be reusable.

Therefore, instead of using components that are completely constant, it is necessary to use values received through variables.

This is where props comes in.

We mentioned earlier the use of child components with parent components, but simply put, it may be safe to view props as values passed from the parent to the child components.

Therefore, we will use

Define props in the parent component

Child component receives the props and outputs them

The basic flow of use is as follows.

Basically, if the child components do not use static data, but use props to display dynamic data, the component will be easy to reuse.

Actual React Code

Based on the above, let's create parent and child components using actual code.

App.jsx (parent component)

 
import Message from ". /components/Message"

 function App() { 
return ( 
<div> 
<Message 
title={'Welcome to EC Penguin site'} 
subtitle={'React component description'} 
/> 
</div> 
); 


}export default App:










 

components/Message.jsx (child component)

 
const Message = (props) => { 
return ( 
<div>
         <h1>{props.title}</h1> 
<p>{props.subtitle}</p> 
</div> 
); 
}; 

export default Message;

























 

and it will look something like this. What it is doing is specifying props in the parent component, passing it to the child component, and then displaying the child component.

Component state

Next, let's look at the state of the component (state).

Unlike props, state can be changed later. The useState, which can change the state of a component, is very useful for maintaining and updating variable values within a component, and is one of the most widely used features of React Hook.

Declaration of state

 
const [state, setState] = useState(initialState)

Declare state as follows

• state → Current state
• setState → Update function
• initialState → Initial value

refers to.

Updating state

 
setState(newState)

You can also update state as follows

• setState → Update function
• newState → New value

refers to.

Concrete Use

Now that we know how to declare and update state, let's look at how it is actually used.

In this case, let's create a component that will change the status of an article to published when the "publish" button is pressed.

 
import {useState} from "react";

 const Article = (props) => { 
const [isPublished, setIsPublished] = useState(false) 
return ( 
<button onclick={() => setIsPublished(true)}& gt;publish</button> 
); 
};




 

The first step is to define isPublished as follows. Then define an initial value of false there, setIsPublished for the update function. Then, using onclick of the button, the update function of setPublished is executed.

What are React components [Summary]?

That's all I have to say about React components!

Since there has not been a systematic summary of components for quite some time, I decided to leave this as an explanatory article, just as a note. I have only just started writing React, so please understand that there may be some parts that I have not written well.

I hope to be able to write React in a very powerful way soon.

Thank you for reading to the end. Have a great day!

Reference

Official React Documentation
Trahac's Engineering Learning Course ( Youtube)