Creating React Components

Creating a Basic Component

The core of using React is components. You create components to display things, then combine them to build the screen that is shown.

Creating a JavaScript File

Components are basically written in JavaScript. The previous article explained the structure of the App component that is created by default. If you reuse that basic code as-is, you can create your own component relatively easily.

First, create a script file named MyComponent.js in the application’s src folder. Then write the source code below. This is the sample component we will create this time.

import React, { Component } from 'react';
 
class MyComponent extends Component {
   
  constructor() {
    super();
    this.msg = "THIS IS MY COMPONENT!";
  }
   
  render() {
    return (
      <h1>{this.msg}</h1>
    );
  }
   
}
 
export default MyComponent;

A component is created by extending the Component class. The class must provide a render method and return the display content created with JSX. This becomes the component display.

In this example, we also provide a constructor method and initialize the message to display there. Once you understand the basic structure of a component class, this is not very difficult.

Outputting Values

Here, a value prepared in advance is included in the component and displayed. The value displayed by the component is prepared as follows.

this.msg = "THIS IS MY COMPONENT!";

In a component, preparing values as properties of this is the basic approach. This value is then included in a JSX tag as follows.

<h1>{this.msg}</h1>

Use {} braces to output the value there. With this method, you can insert values where needed in a component and build the display.

Integrating the Component

Now let us integrate and display the MyComponent we created on the screen.

Open the sample index.js and modify its source code as shown below.

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import './index.css';
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

This integrates MyComponent. If you check the display in a web browser, the text “THIS IS MY COMPONENT!” appears. This is the display of MyComponent.

Preparing import

Components must be brought in by importing several classes. The React basics, react and react-dom, are required. In addition, import the components you use. Here, we import MyComponent.

Component Tags

A component is written as a JSX tag in the first argument of the render method. Here, that is <MyComponent />. Once you define the MyComponent class, you can use your own tag like this.

That is all that is needed to use a component. React components are very simple.

Passing Values to a Component

In MyComponent, we prepared a property named msg and included it in the display. Preparing values in a component was very simple.

How Do You Pass Values to a Component?

Now, how do you pass values to a component when using it and display them? In other words, when displaying MyComponent with ReactDOM.render in index.js, you can pass the required values to MyComponent and place the display.

This can also be done relatively easily. First, modify the component. The revised source code for MyComponent.js is shown below. Rewrite the contents with this as a reference.

import React, { Component } from 'react';
 
class MyComponent extends Component {
   
  constructor() {
    super();
  }
   
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
   
}
 
export default MyComponent;

Here, the display is prepared as follows.

<h1>{this.props.title}</h1>
<p>{this.props.content}</p>

The values title and content are extracted from the props property of this. This props property is used to receive values when the component is called. Here, it gets the values named title and content and displays them.

It is also important that the content returned from render is grouped inside a <div> tag. Only one tag can be returned. If there are multiple tags, you must wrap all of them in a single tag. For example:

 return (
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
    );

If you write it this way, it becomes an error and does not work correctly. What you return must always be a single tag.

Passing Values to MyComponent

Now let us use the modified MyComponent. Modify index.js as follows.

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import './index.css';
 
ReactDOM.render(
  <MyComponent 
    title="My COMPONENT"
    content="This is a sample original component." />,
  document.getElementById('root')
);

The web browser can now display a title and message.

Here, <MyComponent /> is specified as the first argument of render, but attributes have been added inside that tag as follows.

<MyComponent title="OO" content="OO"/>

The title and content attributes were added as title and content properties inside this.props in MyComponent.js. When using this kind of component tag, the values can be passed by providing the properties prepared in this.props as attributes of the component tag.