What are React class components and how do they work?

What are React class components and how do they work?

React class components are ES6 classes that extend from React.Component. They allow you to manage state and lifecycle methods.

Can you give me an example of a simple class component?

Sure! Here's a basic example:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

This component renders a simple 'Hello, World!' message.

How do I manage state in a class component?

You can manage state in a class component by initializing it in the constructor and using this.setState() to update it. For example:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

  render() {
    return <button onClick={this.increment}>Count: {this.state.count}</button>;
  }
}

What are lifecycle methods in class components?

Lifecycle methods are special methods in class components that allow you to run code at specific points in a component's life, such as when it mounts, updates, or unmounts. Common lifecycle methods include componentDidMount, componentDidUpdate, and componentWillUnmount.