React Component
Components are used in react app to maintain the user interface easily. The component is called the main building block of any react app. It can be a function or a class. It is used to take input and generate output for the user interface by returning react elements. Each component of the react app can do any task separately and the output of all components are merged together in the parent component to generate the final output. The tutorial shows the uses of different component in reactjs.
Types of components:
Four types of components exist in reactjs. These are:
- Functional/Stateless component
- Class/Stateful component
- Pure Component
- Higher Order Component
Functional Component:
The react component that can take property values as input, contains only render method and doesn’t have any state value is called functional component. It is also called stateless component. It is mainly used to display information.
Example-1: Simple Functional Component
The following example shows the use of simple functional component that displays a simple heading text.
import React from 'react';
import './App.css';
const Func_cmp = () => {
return (
<div>
<br/><br/>
<h2 className="App">Using Functional Component </h2>
</div>
)
}
export default Func_cmp;
Example-2: Using Multiple components
The following example shows the uses of multiple components. Four components are used with App component that generates output by combining the outputs of other components.
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
class App extends Component {
render() {
return (
<div>
<Top/>
<div className="row">
<div className="col-md-4" style={{height:"400px",background:"AQUA"}}>
<Leftside/>
</div>
<div className="col-md-8" style={{height:"400px",background:"SILVER"}}>
<Rightside/>
</div>
</div>
<Bottom/>
</div>
);
}
}
class Top extends Component {
render() {
return (
<div className="App">
<h1>Header Section</h1>
<br/><br/>
</div>
);
}
}
class Leftside extends Component {
render() {
return (
<div>
<p>The left content of the page</p>
</div>
);
}
}
class Rightside extends Component {
render() {
return (
<div>
<p>The right content of the page</p>
</div>
);
}
}
class Bottom extends Component {
render() {
return (
<div className="App">
<br/><br/>
<h4>Footer Section</h4>
</div>
);
}
}
export default App;
Example-3: Functional components with property
The following example shows the use of property in functional component.
import React from 'react';
import './App.css';
function App() {
const msg = 'Learning ReactJS'
return (
<div className="App">
<Heading val={msg} />
</div>
);
}
function Heading(props) {
return <h1>{props.val}</h1>
}
export default App;
Class component
It is also called stateful component. It has more functionality than functional component and able to contain state value. The following example show the use of class component.
Example-4: Class component with state value
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor() {
super();
this.employees = {
data:
[
{
"id":1,
"name":"Nusrat",
"email":"nur@gmail.com"
},
{
"id":2,
"name":"Helal",
"email":"hl@gmail.com"
},
{
"id":3,
"name":"kabir",
"email":"kb@gmail.com"
},
{
"id":4,
"name":"Habib",
"email":"hb@gmail.com"
}
]
}
}
render() {
return (
<div className="App">
<TableHeader/>
<table align="center" >
<tr>
<th>ID</th><th>Name</th><th>Email</th>
</tr>
<tbody>
{this.employees.data.map((person, i) => <TableRow key = {i}
data = {person} />)}
</tbody>
</table>
</div>
);
}
}
class TableHeader extends Component {
render() {
return (
<div >
<h1>Employee List</h1>
</div>
);
}
}
class TableRow extends Component {
render() {
return (
<tr>
<td width="100px">{this.props.data.id}</td>
<td width="100px">{this.props.data.name}</td>
<td width="100px">{this.props.data.email}</td>
</tr>
);
}
}
export default App;
Pure Component
shouldComponentUpdate, life cycle method is used to decide when react will update or re-render the component. State or props are used in statefule and stateless component to update the life cycle. But if you use pure component then you don’t require to use shouldComponentUpdate method. When you need to compare every state and prop then it is better to use pure component that helps to improve the performance of the react application. It makes the multiple rendering task easier by omitting unnecessary redering. Pure component can be applied on class based stateful component.
Example-5: Pure component with state and prop
The following script will check the state value in every half seconds.
import React, { Component } from 'react';
import './App.css';
class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
books: [
{ name: 'PHP'},
{ name: 'HTML'},
{ name: 'CSS'},
{ name: 'JQuery'},
]
};
}
componentDidMount() {
setInterval(() => {
this.setState((oldState) => {
return { books: [...oldState.books] }
});
}, 500);
}
render() {
console.log("Books state is rendering...");
return (<div>
{this.state.books.map((book, i) => {
return (<Book
key={i}
name={book.name}
/>);
})}
</div>);
}
}
class Book extends React.Component {
render() {
console.log("Book name added");
return (<div className="App">
{this.props.name}
</div>);
}
}
export default App;
Higher Order Component (HOC)
This is the advance feature of react. If you want to use multiple components defined in multiple files in a react app then you can use this feature.
Example-6: Using multiple component
Create a file named TableRow.js with the following script that will create a react component to display property values.
import React, { Component } from 'react';
class TableRow extends Component {
render() {
return (
<tr>
<td>
{this.props.obj.id}
</td>
<td>
{this.props.obj.name}
</td>
<td>
{this.props.obj.price}
</td>
</tr>
);
}
}
export default TableRow;
Create another file named ProductList.js with the following script that will create another react component and uses the previous component.
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import TableRow from './TableRow';
class ProductList extends Component {
constructor(props) {
super(props);
this.state = {
products: [
{
id: 1,
name: 'Pen',
price: 10
},
{
id: 2,
name: 'Pencil',
price: 12
}
]
};
}
tabRow(){
if(this.state.products instanceof Array){
return this.state.products.map(function(object, i){
return <TableRow obj={object} key={i} />;
})
}
}
render() {
return (
<div className="container">
<h2> The Product List </h2>
<table className="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
);
}
}
export default ProductList;
Now, modify App.js (that is linked with index,js) with the following script to display the output of multiple components.
import React, { Component } from 'react';
import PList from './ProductList';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<PList></PList>
</div>
)
}
}
export default App;
The uses of different types of react components are explained in this tutorial by easy examples.