ページの構成

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

一般的なページはコンポジション（合成）です：`App` は名前付きのブロックを配置するだけです：

export default function App() {
    return (
        <div>
            <Title />
            <Content />
            <Footer />
        </div>
    );
}

その return 文を声に出して読んでみてください。文字通りページの上から下までを説明しています。各ブロックは自身のマークアップを隠しているため、Footer を変更しても Title を壊してしまうリスクはありません。この構造こそが、これから先、すべての実際の App を構築していく方法です。

チャレンジ

簡単

2つのコンポーネントからページを組み立てます。

Title を定義します：id="page-title" を持ち、テキストが Coddy Cooking の <h1>。
Footer を定義します：id="page-footer" を持ち、テキストが Made with React の <p>。
App は最初に <Title /> をレンダリングし、次に <Footer /> をレンダリングします。

自分で試してみよう

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