#9 - Class Base Component in React

Welcome to React Class Base Component Lecture.

Class Base Component in React: Class Base component are simple Javascript component that extends React's Component class.

Class Base Component has the state and all life cycle methods of React.

Discussed topcis:

1.  Create Class Base Component
2.  Basic Life Cycle of React Class Base Component
   1.  render()
   2.  componentDidMount()
3.  State
4.  State Update - this.setState()
   1.  String Update
   2.  Object Update

Simple Class Based Component Example - 

import React from "react";

class App extends React.Component {

  render() {
    return <>...</>
  }

}

export default App;

Basic Life-cycle of Class Based Component - 

import React from "react";

class App extends React.Component {

  // Enter Second in componentDidMount()
  componentDidMount(){
    // Component change logics
  }

  // Enter First in render()
  render() {
    return <>...</>
  }

}

export default App;

Assign Data in State in Class Based Component - 

import React from "react";

class App extends React.Component {

  // Add any types of Data in state
  state = {
     name: "Akash",  // String
     level: "Intemediate", // String
     age: 26, // Number
     address: {  // Object
      house: "87/ka",
      city: "Dhaka"
    },
     prorgammings: ["Java", "JavaScript", "PHP"] // Array
  }

  componentDidMount(){
    // Component change logics
  }

  render() {
    return <>...</>
  }

}

export default App;

Access Data From Class Based Component in componentDidMount()- 

import React from "react";

class App extends React.Component {

  // Add any types of Data in state
  state = {
     name: "Akash",  // String
     level: "Intemediate", // String
     age: 26, // Number
     address: {  // Object
      house: "87/ka",
      city: "Dhaka"
    },
     prorgammings: ["Java", "JavaScript", "PHP"] // Array
  }

  // Access Data from componentDidMount()
  componentDidMount(){
    console.log("enter componentDidMount() :>> ");

    console.log("name", this.state.name); //Access Name
    console.log("age", this.state.age);  //Access Age
    console.log("Address - City", this.state.address.city);  //Access Object Data
    console.log("Address - House", this.state.address.house);  //Access House No

    console.log("programming 1", this.state.prorgammings); // Access Array
  }

  render() {
    return <>...</>
  }

}

export default App;

Download Day 9 - Source Code of Class Base Component - https://github.com/ManiruzzamanAkash/ReactBasic2Pro/tree/Day9

Tutorial Demo Source Code - 

Video -