Class components :

Modularity: Modularity means that you break down your code into different different small modules so that your code becomes more reusable, maintainable, readable and more testable. Single responsibility principle.

Constructor:

When you Load a class component onto the webpage that means you create an instance of a class. Whenever you create an instance of a class then the constructor will be called. The constructor is the best place to receive props and create state variables. State variables creation: create a state variable inside the constructor only.

Constructor(props){
	this.state={
		count:0
	}
	
}

Accessing state : Syntax: this.state.property. Note: you can destructure the props and state variables inside the render() method. It is good practice and it looks clean and concise.

const {name, info} = this.props.
const {count} = this.state.

Multiple state Variables: this.state is an object with all your state variables, no need to create another this.state object.

this.state={
	count:0,
	count1:1
};

Update state variables : Never Update state variables directly. React gives a special method to update the state variables.

this.setState()

setState() method Accept an object that contains the Update value of your state variables.

this.setState({
	count: this.state.count +1
})

Execution flow for the class component :

• The first constructor method will be executed.
• render method will be executed.