#9 - Class Base Component in React
Categories - React Js Tags - React Js JavaScript   Maniruzzaman Akash   2 months ago   261   0

#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 - 

Previous
#4 - let vs const vs var - Clear the ES6 concepts and makes simpler path to learn React