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

  • 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!