组合页面

本课属于 Coddy React 学习旅程的“基础知识”单元。第 14 课，共 42 课。

典型的页面由多个部分组合而成：App 只负责排列这些命名模块：

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

大声读出这条 return 语句：它确实是在从上到下描述页面。每个区块都隐藏着自己的标记，因此更改页脚绝不会有弄坏标题的风险。从现在起，你构建的每个实际应用都会采用这种结构。

挑战

简单

用两个组件组装一个页面。

定义 Title：一个 <h1>，其 id="page-title"，文本为 Coddy Cooking。
定义 Footer：一个 <p>，其 id="page-footer"，文本为 Made with React。
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>