What are Class Components in React?

Class components in React are fundamental building blocks for creating reusable, stateful, and interactive user interfaces. Unlike functional components, class components can manage their own state and lifecycle methods, making them a preferred choice for more complex applications before the introduction of React Hooks.

• It manages its own state using this.state.
• Support lifecycle methods like componentDidMount for added control.
• Access props and state using this keyword.

Now Let's see some examples of class component

For creating a new React app, you can refer to the following article on GeeksforGeeks:

• Create a new React App – npm create-react-app

1. Basic Class Components of React

import React, { Component } from 'react';
class App extends Component {
    render() {
        return (
            <div>
                <h1>Welcome to React!</h1>
                <p>This is a simple class component.</p>
            </div>
        );
    }
}
export default App;

Output

In this Example

• Class Component: The App component is created as a class that extends React.Component, allowing it to use React's features like rendering UI.
• render Method: The render() method defines what the component displays, returning JSX (HTML-like syntax).
• Exporting the Component: The export default App; makes this component usable in other parts of the application.

2. Adding Styles in the class Components

//Driver Code Starts
import React, { Component } from 'react';

class App extends Component {
//Driver Code Ends

    render() {
        const headingStyle = {
            color: 'blue',
            textAlign: 'center',
        };

        const paragraphStyle = {
            color: 'green',
            fontSize: '18px',
        };
        return (
            <div>
                <h1 style={headingStyle}>Welcome to My React App</h1>
                <p style={paragraphStyle}>This paragraph has a little color styling.</p>
            </div>
        );

//Driver Code Starts
    }
}
export default App;
//Driver Code Ends

Output

In this Example

• Inline Styling: We create two style objects (headingStyle and paragraphStyle) and apply them using the style prop.
• Class Component: Extending Component allows us to use class-based features like render().
• JSX Output: The render() method returns the JSX that will be shown on the page.

Features of Class Components

• State Management: Class components manage the state using this.state, allowing for dynamic rendering based on state changes.
• Lifecycle Methods: They have access to lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount.
• this Keyword: Props and state are accessed using this keyword, differentiating them from functional components.

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.

Best Practices of Using Class Components in React

• Keep components focused on a single purpose and keep the code organized.
• Use constructor and super() only if you need to initialize state or bind methods.
• Name your components clearly so their purpose is easy to understand.