ReactJS Components (Components)

In this chapter, we will learn how to compose components to make the application easier to maintain. This method allows us to update and change components without affecting the rest of the page.

instance of a stateless component

In the following example, the first component is App. This component is the owner of Header and Content. We are creating Header and Content separately and adding them to the JSX tree of our App component. Only the application component needs to be exported.

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<Content/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Content extends React.Component {
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>Content</h2>
　　　　　　　　　　　　<p>The content text!!!</p>/p>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App　/,　document.getElementById('app'));

The above code will produce the following result.

instance of a stateful component

in this instance, we will set the state of the owner component (App). Header Components are added in the same way as the previous example because they do not require any state. We will create table and tbody elements instead of content tags we use, we will dynamically insert TableRow for each object in the data array.

It can be seen that the EcmaScript 2015Arrow syntax (=>) looks much cleaner than the old JavaScript syntax. This will help us create elements with fewer lines of code. It is especially useful when we need to create a list containing many items.

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　　　　this.state = {
　　　　　　　　　data:　
　　　　　　　　　[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":1,
　　　　　　　　　　　　　　　"name":"Foo",
　　　　　　　　　　　　　　　"age":""}20"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":2,
　　　　　　　　　　　　　　　"name":"Bar",
　　　　　　　　　　　　　　　"age":""}30"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":3,
　　　　　　　　　　　　　　　"name":"Baz",
　　　　　　　　　　　　　　　"age":""}40"
　　　　　　　　　　　　}
　　　　　　　　　]
　　　　　　}
　　　}
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　<tbody>
　　　　　　　　　　　　　　　　　　{this.state.data.map((person,　i)　=>　<TableRow　key　=　{i}　
　　　　　　　　　　　　　　　　　　　　　data　=　{person}　/>)}
　　　　　　　　　　　　　　　</tbody>
　　　　　　　　　　　　</table>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　TableRow　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<tr>
　　　　　　　　　　　　<td>{this.props.data.id}</td>
　　　　　　　　　　　　<td>{this.props.data.name}</td>
　　　　　　　　　　　　<td>{this.props.data.age}</td>
　　　　　　　　　</tr>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,　document.getElementById('app'));

Note that we used key = { i } inside the map() function. This will help React to update only the necessary elements instead of re-rendering the entire list when changes occur. This is a huge performance boost for a large number of dynamically created elements.