5、打造可复用布局与数据查询指南

打造可复用布局与数据查询指南

一、创建可复用布局

在开始构建一个完整样式的网站时，创建可复用的布局是非常重要的。大多数网站的所有页面都有通用的页眉和页脚，如果在每个页面组件中单独导入页眉组件，当需要传递新的属性时会很麻烦。因此，创建一个包含页眉和页脚的布局组件，将页面包裹在其中是更好的选择。

为了保持组件文件夹结构清晰，可以创建子文件夹来存放网站的不同部分。在 components 文件夹中创建一个 layout 文件夹，用于存放与布局相关的组件。

以下是创建网站页眉、页脚和布局组件的具体步骤和代码示例：

1. 网站页眉（Header）
   在 components 文件夹中创建 Header.js 组件：

import React from "react"
const Header = () => (
    <header>
        <p>Site Header</p>
    </header>
)
export default Header

这里使用了 HTML 的 header 标签，正确使用标签有助于网络爬虫和辅助工具理解网站内容。

2. 网站页脚（Footer）