What are Class Components in React?

React class components are the bread and butter of most modern web apps built in ReactJS. These components are simple classes (made up of multiple functions that add functionality to the application) and are based on the traditional class-based approach. All class components are child classes for the Class Component of ReactJS.

Class Components Features:

• The older approach in React.
• Manages state using this.state and lifecycle methods.
• Tends to be more verbose and requires more code.
• Accesses props and state using this keyword.

Advantages of class components:

• State Access: Class components have access to a state that determines the current behavior and appearance of the component.
• setState() Function: The state in class components can be modified using the setState() function.
• Multiple Modifications: One or more variables, arrays, or objects defined in the state can be modified simultaneously using the setState() function.

Steps to Create Class Components in React And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: Install the necessary package in your application using the following command.

npm install bootstrap

Project Structure:

Example 1: Below is an example of class components in React.

Javascript

//App.js
import React from "react";

class GeeksforGeeks extends React.Component {
    render() {
        return (
            <div>
                <h2>What are Class Components in React?</h2>
                <p>GeeksforGeeks is a computer science portal for geeks.</p>
            </div>
        );
    }
}
export default function App() {
    return (
        <div className="App">
            <h2 style={{ color: "green" }}>GeeksforGeeks</h2>
            <GeeksforGeeks />
        </div>
    );
}

Step to run the app:

npm start

Output:

Output

Example 2: In this example, we will see multiple class components, You need to install bootstrap to see the button color.

Javascript

import React from "react";

class GeeksforGeeks extends React.Component {
    render() {
        return (
            <div>
                <h2>How to create a Class component in React?</h2>
                <p>GeeksforGeeks is a computer science portal for geeks.</p>
            </div>
        );
    }
}

class GeeksforGeeks2 extends React.Component {
    render() {
        return (
            <center>
                <div style={{ backgroundColor: "yellow" }}>
                    <button className="btn btn-primary">
                        {" "}
                        I am coming from another class component
                    </button>
                </div>
            </center>
        );
    }
}
export default function App() {
    return (
        <div className="App">
            <h2 style={{ color: "green" }}>GeeksforGeeks</h2>
            <GeeksforGeeks />
            <GeeksforGeeks2 />
        </div>
    );
}

Output: