你的第二个组件

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

我们来提取一个组件。你可以在一个文件中定义任意多个组件：较小的组件放在上面，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" 的 <h1>，文本为 My Blog。
在 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>