1. What is a Class Component?

• A class component is a JavaScript class that extends React.Component.
• It must include a render() method that returns JSX.
• Unlike functional components, class components have their own state and lifecycle methods.

📌 Example of a Simple Class Component

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h2>Welcome to React Class Components!</h2>;
  }
}

export default Welcome;

2. Why Use Class Components?

Before React Hooks (useState, useEffect), class components were the only way to use state and lifecycle methods. They are still used in:

• Legacy React projects that don’t support Hooks.
• Complex applications that require advanced lifecycle methods.

3. Creating a Class Component (Step by Step)

Step 1: Import React and Component

All class components must extend React.Component.

📌 Example: Message.js Class Component

import React, { Component } from "react";

class Message extends Component {
  render() {
    return <h2>This is a Class Component!</h2>;
  }
}

export default Message;

Step 2: Import and Use in App.js

import Message from "./Message";

function App() {
  return (
    <div>
      <Message />  
    </div>
  );
}

export default App;

4. Class Component with Props

Props allow class components to receive dynamic data from parent components.

📌 Example: Class Component with Props

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h2>Hello, {this.props.name}!</h2>;
  }
}

export default Greeting;

Using Props in App.js

import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <Greeting name="Zia" />
    </div>
  );
}

export default App;

5. Class Component with State

State is internal data that a component can manage and update.

📌 Example: Counter Class Component with state

import React, { Component } from "react";

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

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

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

export default Counter;

Using the Counter Component in App.js

import Counter from "./Counter";

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

6. Lifecycle Methods in Class Components

Lifecycle methods allow you to control behavior at different stages of a component’s existence.

Common Lifecycle Methods:

• componentDidMount() → Runs after the component is first rendered.
• componentDidUpdate() → Runs when state or props change.
• componentWillUnmount() → Runs before the component is removed.

📌 Example: Using componentDidMount()

import React, { Component } from "react";

class DataFetcher extends Component {
  componentDidMount() {
    console.log("Component has mounted!");
  }

  render() {
    return <h2>Check the console for lifecycle logs!</h2>;
  }
}

export default DataFetcher;

7. Class Components vs. Functional Components