部品ツリーで考える

React入門 / 全 6 枚

全部書くか、分けるか

全部を App に直接書くか、意味のまとまりごとに部品を呼ぶかで、見た目は同じでも構造が変わります。

べた書きする

export default function App() {
  return (
    <div>
      {/* 見出しも自己紹介も作品も
         全部ここに書く */}
    </div>
  );
}

まとまりで呼ぶ

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

1 / 6

← → キーでも送れます