React And Redux Essentials - Part Three

This series will allow you to learn ReactJS and Redux thoroughly in a steady manner. This is part three of the series.

Introduction

 
This series will allow you to learn ReactJS and Redux thoroughly in a steady manner.

Also, to understand from the beginning, please go through the Part-One and Part-Two.

This third part will cover the following.
  • Implementation – React Complete LifeCycle
  • Implementation – Usage of setState() method
  • Implementation – Setting state using props
  • Implementation – Operate two text boxes using the same function
  • Implementation – Update and clear the state along with usage of the ref attribute
  • Implementation – What is plain Redux and how does redux work? (Without React)

Implementation – React Complete LifeCycle

  • Here, we are talking about the whole lifecycle of ReactJS where we will talk about all the methods included in this life cycle.
  • In the below example we have two React components – one would be taking care of the state and a method which is incrementing state’s data based on button-click and then it passes that state as prop into another component ‘Content’ which is having all the method to understand the full lifecycle.
  • Here, we would be covering all the methods covered in this complete life cycle.

    • componentWillMount()
    • componentDidMount()
    • componentWillReceiveProps(props)
    • shouldComponentUpdate(newProps, newState)
    • componentWillUpdate(nextProps, nextState)
    • componentDidUpdate(prevProps, prevState)
    • componentWillUnmount()
React And Redux Essentials 

Example

  1. class App extends React.Component {  
  2.     constructor(props) {  
  3.         super(props);  
  4.         this.state = {  
  5.             data: 0  
  6.         };  
  7.         this.incrementNumber = this.incrementNumber.bind(this);  
  8.     }  
  9.     incrementNumber() {  
  10.         this.setState({  
  11.             data: this.state.data + 1  
  12.         })  
  13.     }  
  14.     render() {  
  15.         return ( < div > < button onClick = {  
  16.             this.incrementNumber  
  17.         } > Increment < /button> < Content myNumber = {  
  18.             this.state.data  
  19.         } > < /Content> < /div>);  
  20.     }  
  21. }  
  22. class Content extends React.Component {  
  23.     componentWillMount() {  
  24.         console.log("componentWillMount");  
  25.     }  
  26.     componentDidMount() {  
  27.         console.log("componentDidMount");  
  28.     }  
  29.     componentWillReceiveProps(props) {  
  30.         console.log("componentWillReceiveProps - props" + props);  
  31.         console.log(props);  
  32.     }  
  33.     shouldComponentUpdate(newProps, newState) {  
  34.         console.log("shouldComponentUpdate - new props -" + newProps + " = new state - " + newState);  
  35.         console.log(newProps);  
  36.         console.log(newState);  
  37.         return true;  
  38.     }  
  39.     componentWillUpdate(nextProps, nextState) {  
  40.         console.log("componentWillUpdate - next props -" + nextProps + " = next state - " + nextState);  
  41.         console.log(nextProps);  
  42.         console.log(nextState);  
  43.     }  
  44.     componentDidUpdate(prevProps, prevState) {  
  45.         console.log("componentWillUpdate - prev props -" + prevProps + " = prev state - " + prevState);  
  46.         console.log(prevProps);  
  47.         console.log(prevState);  
  48.     }  
  49.     componentWillUnmount() {  
  50.         console.log("componentWillUnmount");  
  51.     }  
  52.     render() {  
  53.         return ( < div > < h2 > {  
  54.             this.props.myNumber  
  55.         } < /h2> < /div>)  
  56.     }  
  57. }  

Output (After Load)

 React And Redux Essentials
Output (After clicking on the button once)
 
React And Redux Essentials 

Implementation – Usage of setState() method

  • Here, we would see the usage of the setState() method – it is used to set the state and then play with states.
  • When setState() is called, render() get called again.
  • Here, we would an input box which changes the state and show as soon I change in the text box
  • Here, I use setState() in case of change in text box on its onChange() event.

Example

  1. class App extends React.Component {  
  2.         constructor() {  
  3.             super();  
  4.             this.state = {  
  5.                 data: '...'  
  6.             }  
  7.             this.updateState = this.updateState.bind(this);  
  8.         }  
  9.         updateState(e) {  
  10.             this.setState({  
  11.                 data: e.target.value  
  12.             });  
  13.         }  
  14.         render() {  
  15.             return ( < div > < input type = "text"  
  16.                 value = {  
  17.                     this.state.data  
  18.                 }  
  19.                 onChange = {  
  20.                     this.updateState  
  21.                 } > < /input> < h2 > {  
  22.                     this.state.data  
  23.                 } < /h2> < /div>)  
  24.             }  
  25.         }  

Output (After typing anything in the textbox, it would be shown below in heading label)

React And Redux Essentials

Implementation – Setting state using props

  • Here, we would set the state using props
  • And, we are doing the same thing; i.e., as soon as Input box changes, it changes the state and shows us the updated text, but here, we are using the props, which internally calls setState which was getting called directly previously.

Example

  1. class App extends React.Component {  
  2.         constructor() {  
  3.             super();  
  4.             this.state = {  
  5.                 data: '...'  
  6.             }  
  7.             this.updateState = this.updateState.bind(this);  
  8.         }  
  9.         updateState(e) {  
  10.             this.setState({  
  11.                 data: e.target.value  
  12.             });  
  13.         }  
  14.         render() {  
  15.             return ( < div > < ChildComponent dataProp = {  
  16.                     this.state.data  
  17.                 }  
  18.                 stateProp = {  
  19.                     this.updateState  
  20.                 } > < /ChildComponent> < /div>)  
  21.             }  
  22.         }  
  23.         class ChildComponent extends React.Component {  
  24.                 render() {  
  25.                     return ( < div > < input type = "text"  
  26.                         value = {  
  27.                             this.props.dataProp  
  28.                         }  
  29.                         onChange = {  
  30.                             this.props.stateProp  
  31.                         } > < /input> < h2 > {  
  32.                             this.props.dataProp  
  33.                         } < /h2> < /div>)  
  34.                     }  
  35.                 }  

Output (After typing anything in the textbox, it would be shown below in heading label)

React And Redux Essentials 

Implementation – Operate two text boxes using the same function

  • Here, we would see that we have two text boxes and whatever I change in any of them, state gets updated and gets shown on the heading label.
  • We are using the same function to handle both of the text boxes; i.e. if any of the textbox values change, it would reflect in another textbox as well as on the label.

Example

  1. class App extends React.Component {  
  2.         constructor() {  
  3.             super();  
  4.             this.state = {  
  5.                 data: '...'  
  6.             }  
  7.             this.updateState = this.updateState.bind(this);  
  8.         }  
  9.         updateState(e) {  
  10.             this.setState({  
  11.                 data: e.target.value  
  12.             });  
  13.         }  
  14.         render() {  
  15.             return ( < div > < ChildComponent dataProp = {  
  16.                     this.state.data  
  17.                 }  
  18.                 stateProp = {  
  19.                     this.updateState  
  20.                 } > < /ChildComponent> < /div>)  
  21.             }  
  22.         }  
  23.         class ChildComponent extends React.Component {  
  24.                 render() {  
  25.                     return ( < div > < input type = "text"  
  26.                         value = {  
  27.                             this.props.dataProp  
  28.                         }  
  29.                         onChange = {  
  30.                             this.props.stateProp  
  31.                         } > < /input> < input type = "text"  
  32.                         value = {  
  33.                             this.props.dataProp  
  34.                         }  
  35.                         onChange = {  
  36.                             this.props.stateProp  
  37.                         } > < /input> < h2 > {  
  38.                             this.props.dataProp  
  39.                         } < /h2> < /div>)  
  40.                     }  
  41.                 }   
Output (After typing anything in any of the textboxes, it would be shown below in heading label as well as on the other textbox)

React And Redux Essentials 

Implementation – Update and clear the state along with usage of ref attribute

  • Here, we would create two methods – updateState() – which would update the state as soon as we enter anything in the textbox and show it to the heading label and clearState() – which would clear the state and make it nothing and gets the focus back to the textbox.
  • To catch the element so that we can focus on it, we are using ‘ref’ attribute which makes it easy to use ReactDOM.findDomNode() to find the element or node.

Example

  1. class App extends React.Component {  
  2.         constructor() {  
  3.             super();  
  4.             this.state = {  
  5.                 data: ''  
  6.             }  
  7.             this.updateState = this.updateState.bind(this);  
  8.             this.clearState = this.clearState.bind(this);  
  9.         }  
  10.         updateState(e) {  
  11.             this.setState({  
  12.                 data: e.target.value  
  13.             });  
  14.         }  
  15.         clearState() {  
  16.             this.setState({  
  17.                 data: ''  
  18.             });  
  19.             console.log('clear state')  
  20.             ReactDOM.findDOMNode(this.refs.name).focus();  
  21.         }  
  22.         render() {  
  23.             return ( < div > < input type = "text"  
  24.                 value = {  
  25.                     this.state.data  
  26.                 }  
  27.                 onChange = {  
  28.                     this.updateState  
  29.                 }  
  30.                 ref = "name" > < /input> < button onClick = {  
  31.                     this.clearState  
  32.                 } > CLEAR < /button> < h2 > {  
  33.                     this.state.data  
  34.                 } < /h2> < /div>)  
  35.             }  
  36.         }  

Output (After typing anything in the textbox, it would be shown below in heading label

React And Redux Essentials
Output (After clicking on the Clear button, it clears everything, and focus comes back to textbox)
 
React And Redux Essentials 

Implementation – What is Redux and how does redux work? (Without React)

  • It's a predictable state container for JavaScript apps.
  • It makes it easy to manage the state of your application.
  • Also, it helps you manage the data you display and how you respond to user actions.
  • It can be used with React or Angular or VueJS
  • See below the structure through which redux works.

  1. {  
  2.     {  
  3.         type: 'UPDATE_TYPE'  
  4.     }  
  5.     and apart from that, we can have id or text  
  6.     for the value {  
  7.         id: 0  
  8.         type: 'UPDATE_TYPE'  
  9.     }  
  10. }  

 

Stay tuned for the next article which will have more concepts of ReactJS.

Happy learning!