在本节中，我们将使用到目前为止你所学的 React 知识来设计并搭建一个基础但功能齐全的响应式企业官网。

搭建文件结构和项目层次是首要步骤。对于一个企业官网，常见的页面结构可能为：

头部导航（Navbar）: 包含企业 logo、导航菜单、注册登录等。
主体（Content）: 包含网站的主要内容，例如产品信息、服务说明等。通常会按照不同的内容板块分为不同的子组件。
底部（Footer）：包含快捷地址、联系信息、版权声明等。

下面我们根据上面的设计来创建一个基础的页面框架。

Navbar 组件

首先，我们需要在项目的 src 目录下创建一个新的子目录，命名为 components。这个目录将用于存放我们所有的 React 组件。

然后，在 components 文件夹里，我们创建一个名为 Navbar.tsx 的文件，来实现顶部导航栏（Navbar）组件。代码如下：

// src/components/Navbar.tsx

export function Navbar() {
  return (
    <nav className="w-full bg-amber-50">
      <div className="max-w-screen-xl mx-auto px-8">
        <div className="h-16 flex items-center justify-between gap-4">
          <div className="flex items-center gap-8">
            <div>logo</div>
            <div>菜单</div>
          </div>
          <div className="flex items-center gap-4">
            <button>登录</button>
            <button>注册</button>
          </div>
        </div>
      </div>
    </nav>
  );
}

以上代码定义了一个名为 Navbar 的函数组件。组件内返回一个 JSX 元素，其中定义了页面的顶部导航栏。最外层 <nav> 标签包含整个导航栏，有一系列元素：左侧的 logo 和导航菜单，右侧的登陆和注册按钮。

可以发现我们用了很多 CSS 类名，我们来简单解释下它们的含义。

w-full: 设置元素宽度为100%。
bg-amber-50: 设定背景颜色为淡黄色 (颜色具体数值会根据 Tailwind 的设定而有所不同)。
max-w-screen-xl: 元素宽度最大值等于指定屏幕宽度（在 Tailwind 中 xl 表示特定的断点），但不会超过该值。
mx-auto: 左右外边距自动，实现元素在水平方向上居中对齐。
px-8: 左右内边距设置为 8 等级单位的空间 (数值根据 Tailwind 的设定而有所不同)。
h-16: 元素的高度设置为 16 等级单位（Tailwind的尺寸单位）。
flex: 应用 flexbox 布局模型来布局元素的子项。
items-center: 设定 flex 子项在交叉轴上居中对其。
justify-between: 在主轴上均匀地分配项目之间的空间。第一个项目紧贴行头，最后一项目紧贴行尾。
gap-4或gap-8: 设定了 Grid 或 Flex 网格中各项之间的间隙大小。

Content 组件

现在我们来创建另一个组件 Content。

先在 components 目录下建立一个新的文件，命名为 Content.tsx。此处使用 .tsx 扩展名，表示我们在该文件中将编写 TypeScript 和 JSX 代码。

输入以下代码：

// src/components/Content.tsx

export function Content() {
  return (
    <div className="w-full bg-indigo-50 h-[640px]">
      <div className="max-w-screen-xl mx-auto px-8">内容部分</div>
    </div>
  );
}

上述代码定义了一个名为 Content 的函数组件。组件返回一个用于显示页面主体内容的 JSX 元素。

它的最外层 <div> 标签用于包裹内容，内部的 <div> 用于放置具体的页面内容，在这里我们只是简单地放置了 "内容部分" 作为暂时的占位符。

我们发现这里用到了一个名为 h-[640px] 的类名，这个仅仅是临时使用以达到演示效果，不过它的含义值得探讨。

h-[640px] 是 Tailwind CSS 中的一种定制类名，表示设置元素的高度为 640px。在它内部使用了方括号 []，这是 TailwindCSS 的 JIT(Just-In-Time) 模式下的新特性，允许你直接在类名中写入自定义值。

分解后即：

.h-640px {
  height: 640px;
}

Footer 组件

现在我们将创建一个名为 "Footer" 的组件来代表页面底部。在该部分，通常会显示版权信息、网址链接等内容。

首先，在 components 目录下创建一个新文件，命名为 Footer.tsx。然后，写入以下代码：

// src/components/Footer.tsx

export function Footer() {
  return (
    <footer className="w-full bg-teal-50">
      <div className="max-w-screen-xl mx-auto px-8">
        <div className="h-[200px]">底部链接信息</div>
        <div className="flex justify-center border-t border-gray-200 py-4">© Copyright 2023 logeast.cc</div>
      </div>
    </footer>
  );
}

className 参数则包含许多 Tailwind CSS 类名，用于设置元素的样式如布局、颜色和边框等。

注意到我们使用了两个类名 border-t, border-gray-200 来添加颜色为灰色的上边框。分解这两个类名为单独的 CSS 类，我们得到：

.border-gray-200 {
    border-color: rgb(229 231 235);
}

.border-t {
    border-top-width: 1px;
}

Tailwind CSS 默认在全局设置了 border-style: solid 。除此之外，还有如下全局的样式规则。

*, ::before, ::after {
		box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

, ::before, ::after: 这是一个选择器列表，逗号分隔，会将三个选择器对应的元素的样式设置为后面描述的属性值。`` 是通配符，选择所有元素。::before 和 ::after 是伪元素选择器，选择所有元素的前置和后置节点。
box-sizing: border-box;: 这条规则改变了浏览器如何计算元素的总宽度和高度。border-box 表示元素的 padding 和 border 在元素的设定宽高内，而不是外加。这可以简化布局的计算。

在 App.tsx 中渲染组件

创建好 3 个组件之后，我们就可以在页面上渲染它们了。打开 App.tsx 文件，首先导入需要的组件。

// src/App.tsx

import { Content } from "./components/Content";
import { Footer } from "./components/Footer";
import { Navbar } from "./components/Navbar";

接下来在 App 中渲染它们，删除掉之前的代码，加上如下代码。

// App.tsx

function App() {
  return (
    <div className="min-h-screen text-gray-900">
      <Navbar />
      <Content />
      <Footer />
    </div>
  );
}

这时候我们的页面布局部分就已经初步完成了。完整的代码如下图所示。

打开终端运行 pnpm dev ，运行成功后在浏览器中访问 http://127.0.0.1:5173/ 。恭喜你！我们的布局页面已经渲染成功了。

Untitled 1.png 非常棒！让我们及时提交代码，以方便存档和回溯，还记得怎么提交吗？新开一个终端，输入如下命令。

# 查看代码更新状态
git status

git add .
	git commit -m 'feat: 搭建基础的布局环境'

Untitled 2.png

04 设计并构建页面布局：使用 React 和 Tailwind CSS 创建响应式公司网站

Navbar 组件

Content 组件

Footer 组件

在 App.tsx 中渲染组件