コンポーネント：ウェブの組み立てキット

最初のカスタムコンポーネントを作り、LEGO みたいにページを組み立てよう。

見てみよう：最初のカスタムコンポーネント

コンポーネントは先頭大文字の関数で JSX を返す。慣習で各コンポーネントは別ファイル。src/Header.jsx を作成：

function Header() {
  return (
    <header>
      <h1>FC Riverside</h1>
      <nav>
        <a href="#team">Team</a>
        <a href="#results">Results</a>
      </nav>
    </header>
  );
}

export default Header;

src/App.jsx で使う：

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to our club's website!</p>
      </main>
    </div>
  );
}

export default App;

import ... from ... – 「別ファイルからコンポーネントを借りる。」export default とペア。
<Header /> – カスタムタグ！大文字が React に「これは HTML じゃなく自分のコンポーネント」と伝える。

レベル1の痛み——全ページにコピーしたメニュー？消えた。ヘッダーは 1回、1ファイルに存在。

見てみよう：入れ替え可能なデータ付きコンポーネント（props）

文字入れ替えゴム印——データは props（properties）でコンポーネントに渡す。src/PlayerCard.jsx：

function PlayerCard({ name, position, number }) {
  return (
    <div className="card">
      <h3>{name} · #{number}</h3>
      <p>{position}</p>
    </div>
  );
}

export default PlayerCard;

App.jsx で使用：

import PlayerCard from './PlayerCard.jsx';

<PlayerCard name="Jake" position="goalkeeper" number={1} />
<PlayerCard name="Alex" position="midfield" number={8} />
<PlayerCard name="Tom" position="forward" number={9} />

props は HTML 属性みたい。テキストは引用符、数字と JavaScript は {}。コンポーネントは ({ name, position, number }) で受け取って使う。

見てみよう：配列からリスト

3枚手作り——OK。でも20人？データを配列に入れて .map()：

const players = [
  { name: "Jake", position: "goalkeeper", number: 1 },
  { name: "Matt", position: "defense", number: 4 },
  { name: "Alex", position: "midfield", number: 8 },
  { name: "Tom", position: "forward", number: 9 },
];

function App() {
  return (
    <div className="cards">
      {players.map((player) => (
        <PlayerCard
          key={player.number}
          name={player.name}
          position={player.position}
          number={player.number}
        />
      ))}
    </div>
  );
}

.map() で配列を走査し、各項目にカードを作る。選手追加 = 配列に1行追加。HTML をコピーしない。（key は React がカードを区別するヘルパー——ユニークなものを入れる。）

やってみよう 💪

React プロジェクトに自分のプロジェクト用コンポーネントキットを作る：

サイト名とメニュー付き Header コンポーネント。
プロジェクトに合うカードコンポーネントと props：🏫 TeacherCard（名前、科目）· 🙋 HobbyCard（名前、説明）· 🌍 TripCard（場所、説明）· ⚽ PlayerCard（名前、ポジション、番号）。
データを配列に入れ .map() で描画——少なくとも4項目。
古いサイトのカードスタイルを src/App.css にコピー——CSS の知識はそのまま使える！

✅

確認： ページが自分のタグ（<Header />、<PlayerCard />…）で組み立てられ、カードはデータ配列から生まれる。配列に項目を足すとページにカードが増える。本物のアプリがこう作られる。

このレッスンのまとめ

コンポーネント = ファイル + 先頭大文字の関数 + export default；import と <Tag /> で使用。
props = コンポーネントの入れ替えデータ：<Card name="Jake" number={1} />。
リストは array.map() で描画——データが画面を動かす。