React JS Components

React JS Components:

Components (Component) are designed to better maintain our applications and can update or change components without affecting other components.

State: Is the source of the tagged data, we make the state simple and single, if we have a corresponding state, we should do the appropriate encapsulation, we should create a container component to hold all the values.

As in the following code:

Import React from ' React '
Class App extends react.component{

A value with a status of
Constructor () {
Super ();

This.state = {
data:[
{"id": "1", "name": "Rtony", "Age": "20"},
{"id": "2", "Name": "Xuanyi", "Age": "20"},
{"id": "3", "Name": "Tony", "Age": "20"},
{"id": "4", "Name": "Jimeth", "Age": "20"},
]
}
}

Render () {
Return (
<div>
<Content/>
<table>
<tbody>
{/**** Note here is the use of key={i} in the map method, which will help to update the necessary elements instead of redrawing the entire list when there is a change, which is a huge performance boost for lots of dynamically created elements ****/}
{This.state.data.map ((person,i) = <tablerow key={i} Data={person}/>)}
</tbody>
</table>
</div>
);
}
}
Class Header extends react.component{
Render () {
Return
<div>
</div>
);
}
}

Class Content extends react.component{
Render () {
Return (
<div>
<p>this is a content!</p>
</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;
In the example above, there are three components, these three components divide the app's interface into three parts, one is the app main component, and the rest of the sub-component header and content, which makes the interface easier to maintain and update, to join we need to modify the header or content, You just need to change the corresponding components.

React JS Components