React Components

React Components: Functional Architecture & Composability

Components are the fundamental building blocks of React applications. They allow you to split the UI into independent, reusable, and isolated pieces that manage their own rendering and behavior.

Types of Components

Modern React development strictly favors Functional Components (JavaScript functions returning JSX) over legacy Class Components.

flowchart TD
    App["App Root Component"] --> Header["Header Component"]
    App --> Main["Main Content Area"]
    App --> Footer["Footer Component"]
    Main --> Sidebar["Sidebar Nav"]
    Main --> Feed["Post Feed Grid"]
    Feed --> Card1["PostCard Component"]
    Feed --> Card2["PostCard Component"]

Building Composable Components

import React from 'react';

// Reusable Button Component
function Button({ variant = 'primary', children, onClick }) {
  return (
    <button className={`btn btn-${variant}`} onClick={onClick}>
      {children}
    </button>
  );
}

// Reusable Card Component
function Card({ title, description, onConfirm }) {
  return (
    <div className="card">
      <h3 className="card-title">{title}</h3>
      <p className="card-desc">{description}</p>
      <div className="card-actions">
        <Button variant="secondary">Cancel</Button>
        <Button variant="primary" onClick={onConfirm}>Confirm</Button>
      </div>
    </div>
  );
}

// Main Parent Component
export default function Dashboard() {
  const handleAction = () => alert('Action confirmed!');

  return (
    <section className="dashboard">
      <h2>User Settings</h2>
      <Card 
        title="Delete Account" 
        description="This action cannot be undone. Are you sure?" 
        onConfirm={handleAction} 
      />
    </section>
  );
}

Best Practices & Gotchas

• Component Names Must Start with a Capital Letter: React treats elements starting with lowercase letters (<card />) as standard HTML DOM tags. Component names must be capitalized (<Card />).
• Keep Components Small & Focused: Adhere to the Single Responsibility Principle. If a component exceeds ~150 lines of code, consider splitting it into smaller sub-components.

Self-Check Challenge

Create a reusable Badge({ label, color }) component and compose it inside a NotificationItem parent component.