3、用 React 组件构建页面

有能力的建议优先看官方文档，有非常详细的学习路径

React：https://nextjs.org/learn/react-foundations

Nexjs：https://nextjs.org/learn/dashboard-app，https://nextjs.org/docs/app/getting-started

上一课，我们搭建了“个人名片”项目的“毛坯房”。但现在，里面还是官方的默认内容。如果我们想把个人头像、姓名、简介、链接列表全都写在 page.tsx 这一个文件里，那代码很快就会乱成一锅粥，无法维护。

所以，今天我们就来学习现代 Web 开发最核心、最强大的思想——组件化 (Componentization)。

1. 什么是“组件”？

回到我们“盖大楼”的比喻。在现代建筑中，我们不一块砖一块砖地砌墙，而是直接使用工厂里预制好的、功能独立的“模块”或“预制件”，比如一整块包含窗户的墙体。

在现代 Web 开发中，“组件” 就是这样的“预制件”。一个组件，就是一个独立的、可复用的、包含自身结构、样式和逻辑的用户界面 (UI) 单元。

2. 实战：用“预制件”搭建名片骨架

我们的任务是：把默认的首页，改造成由我们自己的“头像(Avatar)”、“用户信息(UserInfo)”和“链接列表(LinkList)”这几个核心组件构成的结构。

第 1 步：清空主页，准备画布

打开 src/app/page.tsx 文件，清空文件。

第 2 步：创建 **components** 文件夹

这是一个最佳实践。在 src 目录下，右键创建一个新的文件夹，命名为 components。以后我们所有可复用的组件，都会放在这里。

然后放一图片到这个 public 里面来

第 3 步：创建核心组件

现在，我们来指挥 AI 创建我们需要的三个核心“预制件”。打开 Cursor，直接把下面的指令粘贴进去：

请帮我创建三个新的 React 组件，用于构建一个个人名片页面：