React Js Tutorial – React Component Lifecycle, State, Props

1819
views

Do you know what is meant by component lifecycle, state, props in React Js? If your answer is ‘No’ this tutorial is for you.

Before reading this tutorial I strongly recommend you to read this two articles if you are a beginner to React Js.

React Js Tutorial For Beginners – Introduction

React Js tutorial – Environment SetUp Using Webpack

Hope you know how to setup your react Js and you know what are components in react Js.

In this tutorial, you will learn about,

  1. What is component lifecycle?
  2. What is a state?
  3. What are props?

1. Component Lifecycle:

The render method is the only required spec for the components. Lifecycle methods are helpful when a component is rendered or updated. So what are lifecycle methods?

Lifecycle methods:

1. componentWillMount: This method will be invoked once, on both server and client sides before rendering occurs.
2. componentDidMount: This will be invoked once, only on the client side, after rendering occurs.
3. shouldComponentUpdate: This method will return true or false and this will determine whether the component should update or not. The default value is true. If the component doesn’t need to render after state or props change then we can set it to false.
4. componentWillUnmount: This method will be invoked prior to unmounting component.

And a detailed explanation of each method will be explained in the subsequent tutorials.

2. State:

Every component has a state object and props object. A state is a place where data comes from. A state is considered as a private data. Let me explain with an example.

App.jsx

import React from 'react';

class App extends React.Component {  
constructor(props) {
  super(props);
  this.state = {
  header: "Header from state...",
  "content": "Content from state..."
  }  
}
render() {
 return (    
   <div>
    <h1>{this.state.header}</h1>
    <h2>{this.state.content}</h2>
   </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'));

In the above example, we have created two states called “header” & “content”.

If we want to set an initial state before any interaction occurs we can use getInitialState. For better understanding please check for the below example.

import React from 'react';

class App extends React.Component { 
 getInitialState: function() {
 return {
   count: 5
  }
 }
 render(){
 return(<h1>{this.state.count}</h1>
 }
}

export default App;

In the above example, we have set the default state as count.

3. Props:

Props are nothing but properties and are mainly used to pass data from parent to child. Props are like a communication channel between the components and always move from parent to child.

Let’s take an example for better understanding:

App.jsx

import React from 'react';

class App extends React.Component {
 render() {
 return (
 <div>
 <h1>{this.props.headerProp}</h1>
 <h2>{this.props.contentProp}</h2>
 </div>
 );
 }
}

export default App;

 

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content from props..."/>, document.getElementById('app'));

export default App;

In the above example, we are passing props(headerProp, contentProp) from parent to child.

We can also set default property value instead of using it in ReactDOM.render() and let see below example how it can be done.

App.jsx

import React from 'react';

class App extends React.Component {
 render() {
 return (
 <div>
 <h1>{this.props.headerProp}</h1>
 <h2>{this.props.contentProp}</h2>
 </div>
 );
 }
}

App.defaultProps = {
 headerProp: "Header from props...",
 contentProp:"Content from props..."
}

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'));

 

Now the main difference between state and props is that props are immutable which means we can’t change the value and state is mutable for which we can change the value. Let’s see the example of state and props below.

App.jsx

import React from 'react';

class App extends React.Component {
 constructor(props) {
 super(props);
 
 this.state = {
 header: "Header from props...",
 "content": "Content from props..."
 }
 }

 render() {
 return (
 <div>
 <Header headerProp = {this.state.header}/>
 <Content contentProp = {this.state.content}/>
 </div>
 );
 }
}

class Header extends React.Component {
 render() {
 return (
 <div>
 <h1>{this.props.headerProp}</h1>
 </div>
 );
 }
}

class Content extends React.Component {
 render() {
 return (
 <div>
 <h2>{this.props.contentProp}</h2>
 </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'));

 

Hope you understood what is component lifecycle? What is State? & What are props?

Any more queries please feel free to contact. Happy to help you.

LEAVE A REPLY

Please enter your comment!
Please enter your name here