构建模块

到目前为止，所有事情都由 App 完成。真正的 React 应用会把页面拆分成许多小组件，使用组件的方式和使用 HTML 标签完全一样：

function Header() {
    return <h1>My Blog</h1>;
}

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

React 遇到 <Header /> 时，会调用你的函数并渲染它返回的内容。请遵守两条规则：

• 组件名称以大写字母开头：React 通过这一点区分 <Header />（你的组件）和 <header>（HTML 标签）。
• 像自闭合标签一样使用它：<Header />

为什么要这样做？因为由命名区块（<Header />、<Menu />、<Footer />）组成的页面读起来就像目录，而且每个区块都可以在任何地方重复使用。