React Class Components

Introduction

In this chapter, we will explore React class components, which are another fundamental part of building React applications. We will understand what class components are, how to create them, and their key features.

Table of Contents

1. What are Class Components?
2. Creating Class Components
3. Understanding State
4. Key Features of Class Components
5. Conclusion

What are Class Components?

Class components are more complex than functional components. They are ES6 classes that extend from React.Component and can have their own state and lifecycle methods. Class components are also known as stateful components because they can manage their own state.

• Class components are ES6 classes that return JSX.
• Class components (ES6 class) extend the Component class in React.
• Naming convention: Class Components always start with a capital letter.
• Class Component takes Props (in the constructor) if needed.
• Class component must have a render( ) method for returning JSX.

Creating Class Components

To create a class component, you need to define a class that extends React.Component and includes a render method that returns React elements.

Example:

1. Create a New File for the Component: In the src directory, create a new file named Counter.js.
2. Define the Component: Add the following code to Counter.js to create a class component:

   // Counter.js
   import React, { Component } from 'react';
   
   class Counter extends Component {
     constructor(props) {
       super(props);
       this.state = {
         count: 0
       };
     }
   
     increment = () => {
       this.setState({ count: this.state.count + 1 });
     };
   
     render() {
       return (
         <div>
           <h1>Count: {this.state.count}</h1>
           <button onClick={this.increment}>Increment</button>
         </div>
       );
     }
   }
   
   export default Counter;
   

3. Use the Component in App.js: Open src/App.js and modify the App component to use the Counter component:

   // App.js
   import React from 'react';
   import Counter from './Counter';
   
   function App() {
     return (
       <div>
         <Counter />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see a counter that increments when the button is clicked.

Understanding State

State is a built-in object in class components that allows components to create and manage their own data. State is managed within the component and can be updated using the setState method.

Example:

In the Counter component, we have a state object with a count property:

this.state = {
  count: 0
};

We update the state using the setState method:

increment = () => {
  this.setState({ count: this.state.count + 1 });
};

When the state changes, the component re-renders to reflect the new state.

Key Features of Class Components

1. State Management: Class components can manage their own state, making them suitable for more complex interactions.
2. Lifecycle Methods: Class components can use lifecycle methods to perform actions at different stages of a component’s life.
3. Context Binding: Class components automatically bind the context (this) for event handlers, making it easier to manage component state.

Conclusion

In this chapter, you learned what React class components are, how to create them, and their key features. Class components are used for building stateful and interactive UIs. They provide more functionality compared to functional components, such as state management and lifecycle methods. In the next chapter, we will learn about JSX in React.