React 组件基础

在上一节课中，我们已经成功运行了 Next.js 的开发环境 (npx run dev) 并了解了如何编辑 app/page.js 来修改页面内容。现在，我们将深入了解构建用户界面（UI）的核心概念——组件（Components）。组件是 React 和 Next.js 应用的基本构建块。

本节你将学习：

什么是 React 组件？
为什么要使用组件？
如何创建和使用简单的函数式组件。
JSX 的基本概念。

什么是组件？

想象一下乐高积木。你可以用各种不同形状和颜色的积木来拼搭复杂的模型。在 React 中，组件就像这些积木：它们是独立、可复用的代码片段，用于描述 UI 的一部分。

一个组件可以是一个按钮、一个表单、一个对话框，甚至是一整个页面。它们可以将 UI 拆分成更小、更易于管理的部分。每个组件都有自己的逻辑和外观。

为什么要使用组件？

使用组件化开发方式有几个主要好处：

可复用性 (Reusability)：同一个组件可以在应用的不同地方多次使用，无需重复编写代码。例如，一个用户头像组件可以在用户列表、评论区、个人资料页等处复用。
可维护性 (Maintainability)：当 UI 的某一部分需要修改时，你只需要找到并更新对应的组件即可。这比在庞大的代码库中查找和修改要容易得多。
代码组织 (Organization)：组件使得代码结构更清晰，更容易理解。复杂的界面被分解成一个个小的、功能单一的组件，提高了代码的可读性。

函数式组件 (Function Components)

目前，在 React 中最常用的是函数式组件。顾名思义，它就是一个普通的 JavaScript 函数，该函数返回一部分 UI 结构。

基本的函数式组件结构如下：

function MyComponentName() {
  // 这里可以包含一些组件的逻辑 (暂时为空)

  // 函数必须返回 UI 结构，通常使用 JSX 编写
  return (
    <div>
      <h1>Hello from My Component!</h1>
      <p>This is a simple function component.</p>
    </div>
  );
}

// 使用 export default 将组件导出，以便其他文件可以导入和使用它
export default MyComponentName;

函数名：通常使用帕斯卡命名法（PascalCase），即每个单词首字母大写。
返回值：必须返回描述 UI 的内容。通常我们使用 JSX 来编写。
export default：这是 JavaScript ES6 模块语法，用于将组件作为模块的默认导出项，方便其他文件导入。

JSX 简介

你可能注意到上面代码 return 语句里的内容看起来很像 HTML，但它实际上是在 JavaScript 文件中。这种语法叫做 JSX (JavaScript XML)。

JSX 是 React 的一个语法扩展，它允许我们在 JavaScript 代码中编写类似 HTML 的标记。它使得描述 UI 结构更加直观。虽然看起来像 HTML，但最终它会被编译成普通的 JavaScript 对象。我们将在后续课程中更深入地学习 JSX。现在，你只需要知道 return (...) 里面是用来定义组件的视觉结构的。

创建你的第一个组件

现在，我们来动手创建一个简单的卡片组件，为后续制作“每周练习”卡片做准备。

创建 components 目录

按照约定，我们通常将可复用的组件放在项目根目录下的 components 文件夹中 [1]。如果你的项目还没有这个文件夹，请在项目根目录创建它：
Terminal window
```
mkdir components
```
创建组件文件

在 components 目录下创建一个新文件，命名为 PracticeCard.js。注意使用帕斯卡命名法（PascalCase）。
Terminal window
```
touch components/PracticeCard.js
```

编写组件代码

打开 components/PracticeCard.js 文件，并写入以下代码：

export default function PracticeCard() {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px', borderRadius: '5px' }}>
      <h2>一个练习卡片</h2>
      <p>这是我的第一个React组件！</p>
    </div>
  );
}

我们添加了一些简单的内联样式 (style={{...}}) 让它看起来更像一个卡片。

在页面中使用组件

组件创建好了，但它还不会自动显示出来。我们需要在页面（或其他组件）中导入并使用它。

打开页面文件

回到我们之前编辑过的 app/page.js 文件（或者你想要展示这个卡片的任何页面文件）。
导入组件

在文件的顶部，使用 import 语句导入我们刚刚创建的 PracticeCard 组件。
```
// app/page.js (或其他页面文件)
import PracticeCard from '@/components/PracticeCard'; // '@/' 通常指向项目的根目录或 src 目录，这是 Next.js 的常用别名配置

// ... (可能存在的其他 import 语句)
```
- 这里的 @/components/PracticeCard 是导入路径。@ 通常是 Next.js 项目中配置的路径别名，指向项目的根目录或 src 目录，使得导入更方便。如果你的项目没有配置 @ 别名，你可能需要使用相对路径，例如 import PracticeCard from '../components/PracticeCard'; （假设 page.js 在 app/ 下）。

渲染组件

在页面组件的 JSX 返回值中，像使用 HTML 标签一样使用导入的组件。

// app/page.js (或其他页面文件)
import PracticeCard from '@/components/PracticeCard';

export default function HomePage() {
  return (
    <div>
      <h1>我的主页</h1>
      <p>欢迎来到我的Next.js应用。</p>

      {/* 在这里使用 PracticeCard 组件 */}
      <PracticeCard />

      {/* 组件是可复用的，可以多次使用 */}
      <PracticeCard />
      <PracticeCard />
    </div>
  );
}

现在运行 npx run dev，你应该能在主页上看到三个相同的练习卡片了！

小结

恭喜你！你已经学习了 React 组件的基础知识：

组件是构建 UI 的独立、可复用的单元。
函数式组件是现代 React 开发的主要方式。
我们通常在 components 目录下创建组件文件，并使用 PascalCase 命名 [1]。
使用 import 导入组件，并在 JSX 中像 <ComponentName /> 一样使用它。

理解组件是学习 React/Next.js 的关键一步。在接下来的课程中，我们将学习如何通过 props 让组件接收数据，变得更加动态和强大。