コンポーネントの再利用

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 13/42。

ここからコンポーネントの価値が発揮されます。コンポーネントは何度でも好きなだけ使い回すことができます。以下の各 <Star /> は新しいコピーです：

function Star() {
    return <span>★</span>;
}

export default function App() {
    return (
        <div>
            <Star />
            <Star />
            <Star />
        </div>
    );
}

画面上に3つの星があり、コード内には1つの定義があります。その定義を一度変更するだけで、すべてのコピーが更新されます。これこそが、HTMLには決してなかった再利用というスーパーパワーです。

チャレンジ

簡単

3つ星のレーティングを作成します。

<span>★</span> を返す Star コンポーネントを定義します。
既存の <div id="stars"> の内部で、このコンポーネントを3回使用して星を3つレンダリングします。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>