#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:
- Create Class Base Component
- Basic Life Cycle of React Class Base Component
- render()
- componentDidMount()
- State
- State Update - this.setState()
- String Update
- 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 -