Components

📘What it really is

• A component is a function that returns JSX:

function Header() {
  return (
    <header className="header">
      <h1>Enquiries</h1>
    </header>
  );
}

• Use it like an HTML tag: <Header />.
• Component names start with a capital letter; lower case means a normal HTML tag.

• Components contain other components, forming a tree: App contains Header, EnquiryList and Footer; EnquiryList contains many EnquiryCards.

• Each component goes in its own file, exported and imported (Module 29):

// src/components/Header.tsx
export function Header() { ... }

// src/App.tsx
import { Header } from "./components/Header";

• Keep components small: one clear job each, like functions (Module 23).