コンポーネントを作る

React入門 / 全 6 枚

関数がJSXを返す部品になる

名前を付けた関数がJSXを返せば、それがそのまま画面の部品になります。<Profile /> と書いた場所に、Profile が返したJSXが差し込まれます。

App の中に直接書く

export default function App() {
  return (
    <div>
      <h1>あおいのプロフィール</h1>
      <p>あおい / Web エンジニア</p>
    </div>
  );
}

関数に切り出して呼び出す

function Profile() {
  return <p>あおい / Web エンジニア</p>;
}

export default function App() {
  return (
    <div>
      <h1>あおいのプロフィール</h1>
      <Profile />
    </div>
  );
}

1 / 6

← → キーでも送れます

このスライドが付いているレッスンを開く