コンポーネントを分ける

導入

App の中身が大きくなってきたら、意味のまとまりごとに別のコンポーネントに切り出します。切り出した部品は、JSX の中でタグのように置いて使えます。

説明

Greeting という部品を作り、App から呼び出しています。

function Greeting() {
  return <h2>ようこそ！</h2>;
}

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <p>上に部品を2回置きました。</p>
    </div>
  );
}

• コンポーネント名は必ず大文字始まり（Greeting）。小文字だとただのHTMLタグ扱いになります。
• <Greeting /> のように、自分で作った部品をタグとして何度でも置けます。
• 同じ部品を再利用できるのがコンポーネントの利点です。

やってみよう

Footer という新しいコンポーネントを作り（例: <p>© 2026</p> を返す）、App の一番下に置いてみましょう。