ビルディングブロック（基本要素）

これまでは App がすべての処理を行っていました。実際の React アプリではページを多くの小さなコンポーネントに分割し、コンポーネントの使用は HTML タグを使用するのと全く同じように見えます。

function Header() {
    return <h1>My Blog</h1>;
}

export default function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

Reactは <Header /> を見つけると、作成した関数を呼び出してその戻り値をレンダリングします。2つのルールがあります：

• コンポーネント名は大文字で始めます: これによりReactは <Header /> (自作のコンポーネント) と <header> (HTMLタグ) を区別します
• 自己閉じタグのように使用します: <Header />

なぜそうするのでしょうか？名前付きのブロック（<Header />、<Menu />、<Footer />）で構成されたページは目次のように読みやすく、各ブロックはどこでも再利用できるからです。