❮ Previous

Class Components

  • This lesson introduces class components in React and explains their structure, lifecycle methods, and role in React development.

  • Before Hooks, React used class components for managing state and lifecycle methods.

    Introduction to Class Components

    A class component is a JavaScript class that:

    • Extends React.Component
      Has a render() method

    • Returns JSX

     Class Component Syntax

import React from "react";

class Welcome extends React.Component {
  render() {
    return <h1>Welcome to React</h1>;
  }
}

export default Welcome;

  • Why Modern React Focuses on Functional Components

    Modern React prefers functional components because:

    • Less code

    • Easier to read

    • Hooks replace lifecycle methods

    • Better performance

    • Easier testing

    Comparison:

    Feature

    Functional

    Class

    Syntax

    Simple

    Complex

    Hooks

    Yes

    No

    Performance

    Better

    Good

    Future Support

    Recommended

    Legacy

    Class components are still valid, but functional components are the future.

    Final Summary

    • Components are building blocks of React

    • Functional components are preferred

    • Components are reusable

    • Class components are older but important to understand

    • Modern React uses Hooks with functional components

❮ Previous