Let's dive deep into the class component.

Before React 16.8, class components were the only way to track the state and lifecycle of a React component. Function components were considered "stateless”.

With the addition of hooks, function components are now almost equivalent to class components. The differences are so minor that you will never need to use a Class component in React.

Even though Function components are preferred, there are no current plans on removing Class components from React.

Let’s take an example of a function-based component:

const User = () => {
  return (
    <div classname="user-card">
      <h2>Name: Baisali Pradhan</h2>
      <h3>Location: Bhubaneswar</h3>
    </div>
  );
};
export default User;

Let’s convert the above component to a class-based component.

import React from "react";
class UserClass extends React.Component {
  //extends React.Components means this is the way to tell that this is a class based component
  render() {   //This will return piece of JSX
    return (
      <div classname="user-card">
        <h2>Name: Baisali Pradhan</h2>
        <h3>Location: Bhubaneswar</h3>
      </div>
    );
  }
}
export default UserClass;

React.Component : It is a class given us by React and UserClass is inheriting some property of it.

How to Pass Props in a Class-Based Component:

import React from "react";
import UserClass from "./UserClass";
class AboutClass extends React.Component {
  constructor(props){
    super(props);
  }
  render() {  
    return (
      <>
      <h1>About Me</h1>
      <UserClass name={"Baisali Pradhan"}/>
      </>
    );
  }
}
export default AboutClass;

import React from "react";
class UserClass extends React.Component {
  constructor(props){
    super(props);
  }
  render() {   
    return (
      <div classname="user-card">
        <h2>Name:{this.props.name}</h2>
        <h3>Location: Bhubaneswar</h3>
      </div>
    );
  }
}
export default UserClass;

Let’s Destructor it:

import React from "react";
class UserClass extends React.Component {
  constructor(props){
    super(props);
  }
  render() {   
const {name,location} = this.props   //De-structuring it
    return (
      <div classname="user-card">
        <h2>Name:{name}</h2>
        <h3>Location:{location}</h3>
      </div>
    );
  }
}
export default UserClass;

Create a state in a Class-Based Component:

Loading a class-based component into a web page means we are creating an instance of this class.

import React from "react";
class UserClass extends React.Component {
  constructor(props) {
    super(props);
this.state = {
      count: 0,  //Initialize count here
    };
  }
  render() {
    const { name, location } = this.props; //De-structuring it
    return (
      <div classname="user-card">
        <h1>Count : {this.state.count}</h1> //Call the count here
        <h2>Name:{name}</h2>
        <h3>Location:{location}</h3>
      </div>
    );
  }
}
export default UserClass;

Let’s update the variable:

import React from "react";
class UserClass extends React.Component {
  constructor(props) {
    super(props);
this.state = {
      count: 0,  //Initialize count here
    };
  }
  render() {
    const { name, location } = this.props; //De-structuring it
    return (
      <div classname="user-card">
        <h1>Count : {this.state.count}</h1> 
        <button onClick={() => {
    //-------------Update here the count variable----------//
            this.setState({count: this.state.count + 1})
        }}>Count Increase</button>
        <h2>Name:{name}</h2>
        <h3>Location:{location}</h3>
      </div>
    );
  }
}
export default UserClass;

How Class-Based Components Are Mounted on the Web Page:

import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
// Initializing the state
    this.state = { name: "Baisali Pradhan" };
  }
  componentDidMount() {
    // This will update the name after 2 second
    setTimeout(() => {
      this.setState({ name: "John Joe" });
    }, 2000);
  }
  render() {
    return (
      <div>
        <p>{this.state.name}</p>
      </div>
    );
  }
}
export default App;

N:B:. Although functional components are what we prefer these days, in the past all in-class components were coded by our senior developer, and I believe that their commitment to excellence and diligence should be honored.