部品の組み合わせ

ここまでで、部品を作る(チャプター6)、正しく書く(チャプター7)、値を流し込む(チャプター8)ができるようになりました。最後のピースは、部品の中で部品を使うことです。これができると、「画面まるごと」がReactで作れるようになります。

部品は部品を呼べる

チャプター6で、<Greeting /> を3回並べました。実はあのとき、すでに本質はやっています。Appという部品の中で、Greetingという部品を使う——コンポーネントの入れ子です。もう少し実戦的な形で見てみましょう。

const Header = () => {
  return (
    <header>
      <h1>Prod Camp</h1>
    </header>
  );
};

const Footer = () => {
  return (
    <footer>
      <p>© 2026 Prod Camp</p>
    </footer>
  );
};

const App = () => {
  return (
    <div>
      <Header />
      <main>
        <p>ようこそ</p>
      </main>
      <Footer />
    </div>
  );
};