React Components: Functional vs Class Components Architecture

Components are the fundamental building blocks of any React application. In React's philosophy, you never build a page as an monolithic structure; instead, you build a tree of small, modular components that each handle one specific job (the Single Responsibility Principle).

Types of React Components

React supports two primary component formats:

1. Functional Components: Plain JavaScript functions that accept props and return JSX. Powered by React Hooks. (100% Recommended Standard).
2. Class Components: ES6 classes that extend React.Component and implement a render() method. (Legacy codebases and Error Boundaries).

1. Functional Components (Modern Industry Standard)

A functional component is simply a JavaScript function. It can be declared using standard function syntax or ES6 arrow syntax:

// Method A: Standard Function Declaration
function GreetingCard(props) {
  return (
    <div className="card">
      <h3>Hello, {props.name}!</h3>
      <p>Role: {props.role}</p>
    </div>
  );
}

// Method B: Arrow Function with Object Destructuring (Cleanest)
const GreetingCardClean = ({ name, role = "Student" }) => (
  <div className="card">
    <h3>Hello, {name}!</h3>
    <p>Role: {role}</p>
  </div>
);

export default GreetingCardClean;

2. Class Components (Legacy / Exam Curriculum)

For university semester exams (BCA, MCA, B.Tech IT), questions frequently ask to compare functional vs class components. Here is how a class component looks:

// Legacy Class Component Syntax
import React, { Component } from 'react';

class CounterClass extends Component {
  constructor(props) {
    super(props);
    // 1. Initial State defined in constructor
    this.state = {
      count: 0
    };
    // 2. Manual 'this' binding
    this.handleIncrement = this.handleIncrement.bind(this);
  }

  handleIncrement() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div className="counter-box">
        <h2>Class Count: {this.state.count}</h2>
        <button onClick={this.handleIncrement}>
          Increment
        </button>
      </div>
    );
  }
}

export default CounterClass;

Functional vs Class Components: Academic Exam Comparison

Component Composition & Reusability

Great React applications compose complex layouts by nesting smaller components together. Notice how a full page emerges naturally:

// Composing App from sub-components
function NavigationBar() {
  return <nav><a href="/">Home</a> | <a href="/about">About</a></nav>;
}

function Sidebar() {
  return <aside><h4>Categories</h4></aside>;
}

function MainContent() {
  return <main><h2>Main Article Content</h2></main>;
}

function App() {
  return (
    <div className="layout-grid">
      <NavigationBar />
      <div className="body-section">
        <Sidebar />
        <MainContent />
      </div>
    </div>
  );
}