2つ目のコンポーネント

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

コンポーネントを抽出してみましょう。1つのファイル内に好きなだけコンポーネントを定義できます。小さめのコンポーネントを上に、App を一番下に配置します。

function Welcome() {
    return <p>Glad you're here!</p>;
}

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

App のみが export default を持ちます。これは main.jsx がレンダリングするエントリーコンポーネントです。その他は内部ヘルパーです。

チャレンジ

初心者

最初のスタンドアロンコンポーネントを作成します。

App の上に Header（大文字の H！）という名前のコンポーネントを定義します。これは id="page-title" とテキスト My Blog を持った <h1> を返します。
App の <div> 内で <Header /> を使用してそれをレンダリングします。

自分で試してみよう

<!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>