React Tutorials - Day Three

This is the third article of the React Tutorials series. Following are the links of my previous articles of this series.

Today, we will learn about components. Components are the heart of React, that let you split the UI into independent and reusable sections. In React, to create a component, we need to extend the “React.Component” class.

Example

import React from 'react';
class Main extends React.Component {
render() {
return (
<h2>
Hello React!!!
</h2>
);
}
}
export default Main;

Output

A component can have only one render function. The render function actually returns only one “html” element. If we try to return multiple HTML elements, we will get an error. Let's see with an example. Replace the “Mian.jsx” file code with the following code.

Main.jsx

import React from 'react';
class Main extends React.Component {
render() {
return (
<h2>
Hello React!!!
</h2>
<h2>
Hello React 2!!!
</h2>
);
}
}
export default Main;

Output

So, we need to wrap both the HTML elements into one parent element.

Main.jsx

import React from 'react';
class Main extends React.Component {
render() {
return (
<div>
<h2>
Hello React!!!
</h2>
<h2>
Hello React 2!!!
</h2>
</div>
);
}
}
export default Main;

Output

Let’s take another example of React.

Main.jsx

import React from 'react';
class Main extends React.Component {
constructor(){
super();
this.comment="This is new comment";
}
render() {
var name="Pankaj Choudhary";
return (
<div>
<h2>{name}</h2>
<h2>{(function(){
return "React";
})()}</h2>
<h3>
{this.comment}
</h3>
</div>
);
}
}
export default Main;

Output

In React, everything written into “{}” (curly braces) is treated as normal JavaScript code. So, we can use {} to write the JavaScript code in html.

Multiple Components

Let’s create another two components. First, create a “header.jsx” file into “header” folder and paste the following code into this file.

Header.jsx

import React from 'react';
class Header extends React.Component {
render() {
return (
<div>
<h2>This is header</h2>
</div>
);
}
}
export default Header;

Now, create “footer.jsx” file into “footer” folder and paste the following code into this file.

Footer.jsx

import React from 'react';
class Footer extends React.Component {
render() {
return (
<div>
<h2>This is footer</h2>
</div>
);
}
}
export default Footer;

After creating all these files, the following will be the structure of our project.

Now, we will use both components into our “main” component. Below is the code for “main.jsx” file.

Main.jsx

import React from 'react';
import Footer from '../footer/footer';
import Header from '../header/header';
class Main extends React.Component {
render() {
return (
<div>
<Header/>
<h2>
Hello React!!!
</h2>
<Footer/>
</div>
);
}
}
export default Main;

In the above code, we imported the “Footer” and “Header” components, and used these in the template of “Main” component. After making all the changes, the following will be our output.

Output

We can render the component in whatever manner we want, for example - we can create unordered list(ul) of components. Let’s take an example. Now, replace the code of “main.jsx” file with the following.

Main.jsx

import React from 'react';
import Footer from '../footer/footer';
import Header from '../header/header';
class Main extends React.Component {
render() {
var array=[
<Header/>,
<Footer/>,
<Header/>,
<Footer/> ,
<Header/>,
<Footer/>
];
return (
<div>
<h2>React Example</h2>
<ul>
{array}
</ul>
</div>
);
}
}
export default Main;

Output

In the above example, we have created an array of “header” and “footer” components and printed this array into a “ul”.

Component Life Cycle

In React, each component has a lifecycle with several hooks in this lifecycle. We can use these hooks to perform some task at specific time of the component. Following are the methods called during the lifecycle of a component.

Constructor

This method is called before any other methods of the lifecycle, and creates an instance of component. You can use the constructor to initialize the state and properties for the component.

componentWillMount

This method is called before mounting and also runs before the render method. This is the only lifecycle hook that is called on the server rendering. You can use this method for server rendering tasks or configuration.

componentDidMount

This method is called after the first render only. If we need to load the data from remote server, then it is a good point to initialize the network request. We can use this method for any function that needs delayed execution using like setTimeout or setInterval.

componentWillReceiveProps

This method is called when a mounted component gets its properties. If we need to change the state in response of the props, then we can implement the logic of state change here. We can compare the this.props and nextProps; and on behalf of the comparison result, we can implement the state updates.

shouldComponentUpdate

This method is called before the render method and checks if it should re-render the component or not. React lifecycle has a simple fundamental that whenever state or props of the component is changed, it re-renders the component. So, if you want the component to not to re-render, then return false in this method. By default, it returns true.

componentWillUpdate

This method is called before the new state and props are rendered in component.

componentDidUpdate

This method is invoked after the updates are reflected.

componentWillUnmount

This method is called when component unmounts and is destroyed from the DOM. During the unmounting process, it performs some tasks related to cleanup also.

Let’s take an example of different hooks of a component lifecycle. Replace the code of “header.jsx” with the following code.

Header.jsx

import React from 'react';
class Header extends React.Component {
constructor(){
super();
console.log('constructor executed')
}
componentWillMount() {
console.log('componentWillMount executed')
}
componentDidMount() {
console.log('componentDidMount executed')
}
componentWillReceiveProps(newProps) {
console.log('componentWillReceiveProps executed')
}
shouldComponentUpdate(newProps, newState) {
console.log('shouldComponentUpdate executed')
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('componentWillUpdate executed');
}
componentDidUpdate(prevProps, prevState) {
console.log('componentDidUpdate executed')
}
componentWillUnmount() {
console.log('componentWillUnmount executed')
}
render() {
return (
<div>
<h2>This is header</h2>
<h3>{this.props.random}</h3>
</div>
);
}
}
export default Header;

Now, replace the code of “main.jsx” with the following code.

Main.jsx

import React from 'react';
import Footer from '../footer/footer';
import Header from '../header/header';
class Main extends React.Component {
constructor(){
super();
this.state = {
random: (Math.random())*1000
}
this.random = this.random.bind(this)
}
random() {
this.setState({random: new Date()})
}
render() {
return (
<div>
<h2>React Example</h2>
<button onClick = {this.random}>Change random</button>
<Header time = {this.state.random}></Header>
</div>
);
}
}
export default Main;

After making all the changes, we get the following output.

When we click on the “Change random” button, the props of the header component gets changed and we get the following result.

You can see that after making the changes in props of header.jsx, all the updated methods are executed in a sequence.

Conclusion

In this article, we learned about React components and component lifecycle. In our next article, we will learn about states and props. If you have any queries or doubts, please mention them in the comments section. You can download the latest source code of this project from GitHub. Given below is the link of repository.

Project Source Code