首页/组件化结构

用组件化思维搭建作品集骨架

15 分钟

项目跑起来了，但现在只有一个默认页面。这一关把它改造成一个有结构的多页面网站。

什么是"组件化"？

组件化的核心思想是：把重复的东西抽出来，写一次，到处用。

导航栏就是最典型的例子——第一章你在三个 HTML 文件里各写了一遍，改一处要改三遍。用 React 组件，导航栏只写一次，所有页面共享，改一次全改了。

一个 React 组件就是一个 .tsx 文件，里面包含这个 UI 块的结构、样式和逻辑。你可以把它想象成一个"积木块"：

Header 组件（导航栏）
Footer 组件（页脚）
WorkCard 组件（作品卡片）
Button 组件（按钮）

这些积木块可以在任何页面里使用，也可以嵌套组合。整个网站就是由这些积木搭起来的。

什么是"单页应用"（SPA）？

第一章的网站是"多页应用"：每次点击链接，浏览器都会重新加载整个页面，有明显的白屏闪烁。

React 做的是"单页应用"（SPA，Single Page Application）：整个网站只有一个 HTML 文件，页面切换时只更新内容区域，导航栏等公共部分不重新加载，没有白屏，体验更流畅。

微信小程序、抖音 Web 版、Gmail 用的都是这个技术。

第一步：搭建多页面骨架

对 AI 说：

帮我把这个 React 项目改造成一个多页面的个人作品集网站：

页面结构：
- 首页（/）：个人介绍 + 精选作品预览
- 作品页（/works）：所有作品的卡片列表
- 关于页（/about）：详细的个人介绍

组件拆分：
- Header 组件：顶部导航栏，所有页面共享
- Footer 组件：底部页脚，所有页面共享
- 三个页面各自是独立的组件

路由：
- 用 React Router 实现页面切换
- 导航栏高亮当前所在页面
- 切换页面时不要整页刷新（SPA 单页应用）

内容先用占位文字就行，后面再填真实内容。

第二步：体验 SPA 的感觉

AI 完成后，在浏览器里点击导航栏的链接，注意观察：

URL 变了（比如从 / 变成 /works）
但页面没有白屏/闪烁——只有内容区域更新了
顶部导航栏始终在，没有重新加载

这就是"单页应用"的体验。

第三步：确认骨架结构合理

检查以下几点：

三个页面都能正常访问
导航栏在每个页面都显示，且当前页面的链接高亮
切换页面时没有整页刷新

如果有问题，告诉 AI 具体是哪里不对，让它修复。

理解 React Router 的工作原理

React Router 是 React 生态里最常用的路由库。它的工作原理是：

你定义路由规则：/ 对应首页组件，/works 对应作品页组件
用户点击链接时，React Router 拦截跳转，不让浏览器真正跳转
根据新的 URL，React Router 决定渲染哪个组件
只有内容区域更新，导航栏等公共部分不变

这就是为什么 SPA 没有白屏——浏览器从来没有真正"跳转"，只是换了一个组件显示。

组件文件结构建议

AI 创建的项目里，组件通常放在 src/components/ 目录，页面放在 src/pages/ 目录：

src/
├── components/
│   ├── Header.tsx      ← 导航栏组件
│   ├── Footer.tsx      ← 页脚组件
│   └── WorkCard.tsx    ← 作品卡片组件
├── pages/
│   ├── Home.tsx        ← 首页
│   ├── Works.tsx       ← 作品页
│   └── About.tsx       ← 关于页
└── App.tsx             ← 路由配置

这个结构不是强制的，但是一个好的约定。AI 通常会按照这个结构来组织代码。