In this session, we will learn how to react to JS components with details with examples.
Stateless Example
The first component in the following example is called App. This component is the owner of the Header and content and helps to creating Header and Content separately and just adding it inside the JSX tree in our App component needs to be exported.
//App.JSX
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}
export default App;
We need to import it in the main.js file and call reactDOM.render(), to be able to render this on the page. We already did this while setting the environment.
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 result will show the following display.
Stateful Example
In the following example, we are creating table and body, elements, where we will get dynamically insert TableRow for every object from the data array. We will set the state for the owner component (App). The Header component is just added like in the last example since it does not need any state.
By using EcmaScript 2015 arrow syntax (=>) which looks much cleaner than the old JavaScript syntax. This will also help us create our elements with fewer lines of code. It is very useful when we need to create a lot of items list.
//App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,
"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}
render() {
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 – You will notice that we are using key = {i} inside map () function. This will help to React update only the necessary elements. It is a huge performance boost for a larger number of dynamically created elements.
Components in Files
It will be smart to insert some of your components in a separate file. React is all about re-using code.
Put the code inside it to do that, create a new file with a .js file extension:
Note: export default Car; that the file must start by importing React (as before).
//Example
//This is the new file and we called it "App.js":
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;
