React 组件入门

介绍

在本实验中，你将学习 React 中组件 (components) 的基本概念。组件是独立且可复用的代码片段。它们的作用与 JavaScript 函数类似，但能独立工作并返回 HTML（通过 JSX）以在屏幕上渲染。我们将专注于创建一个简单的“函数式组件” (functional component)。

你将在自己的文件中创建一个新组件，导出它，然后在主 App 组件中导入并渲染它。

在新文件 Hello.jsx 中创建函数式组件

在本步骤中，你将创建你的第一个 React 组件。将每个组件放在自己的文件中是保持代码组织性和可复用的常见做法。我们将为名为 Hello 的组件创建一个新文件。

首先，让我们准备好开发环境。项目文件已在 my-app 目录中为你创建。你需要进入该目录，安装必要的依赖项，并启动开发服务器。

在 WebIDE 中打开一个终端（你可以使用菜单：Terminal > New Terminal），然后逐个运行以下命令：

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

运行最后一个命令后，开发服务器将启动。你可以通过点击 LabEx 界面中的 Web 8080 标签页来查看正在运行的应用程序。在整个实验过程中，你可以切换到此标签页来查看你的更改。

在左侧的 WebIDE 文件浏览器中，导航到 my-app/src 目录。右键单击 src 文件夹，然后选择“New File”。将新文件命名为 Hello.jsx。

现在，将以下代码添加到你新创建的 my-app/src/Hello.jsx 文件中。这段代码定义了一个简单的函数式组件。

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

让我们来分析一下这段代码：

• function Hello(): 这是一个标准的 JavaScript 函数。在 React 中，函数式组件就是 JavaScript 函数。按照惯例，组件名称始终以大写字母开头。
• return <h1>...</h1>;: 该函数返回 JSX。JSX (JavaScript XML) 是 JavaScript 的一种语法扩展，它看起来非常像 HTML。我们使用它来描述 UI 应该是什么样子。

为组件函数设置默认导出 (export default)

在本步骤中，你将使 Hello 组件能够在应用程序的其他部分使用。为此，你需要从 Hello.jsx 文件中导出它。

JavaScript 模块主要有两种导出方式：命名导出 (named exports) 和默认导出 (default exports)。在本实验中，我们将使用默认导出，当一个文件只导出一个内容时，这对于组件来说是很常见的。

在你的 my-app/src/Hello.jsx 文件末尾添加以下行：

export default Hello;

你完整的 my-app/src/Hello.jsx 文件现在应该如下所示：

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

export default Hello;

这个 export default 语句使 Hello 函数成为该文件的主要导出项，允许其他文件导入它。

使用 import 语句将组件导入到 App.jsx 中

在本步骤中，你将把 Hello 组件导入到主应用程序组件 App.jsx 中，以便使用它。

在 WebIDE 文件浏览器中，找到并打开 my-app/src/App.jsx 文件。

要使用 Hello 组件，你必须先导入它。在 my-app/src/App.jsx 文件的顶部，App 函数定义之前，添加以下 import 语句：

import Hello from "./Hello.jsx";

这行代码告诉 JavaScript 从 Hello.jsx 文件（位于同一目录，因此使用 ./）导入默认导出，并将其赋值给一个名为 Hello 的变量。

添加导入后，你的 my-app/src/App.jsx 文件顶部将如下所示（其他导入可能略有不同）：

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Hello from './Hello.jsx';

function App() {
// ... rest of the file

在 App 的 return 中渲染导入的组件

在本步骤中，你将在 App 组件内渲染 Hello 组件。一旦组件被导入，你就可以在 JSX 中像使用普通的 HTML 标签一样使用它。

在 my-app/src/App.jsx 文件中，找到 App 函数内的 return 语句。现有代码是 Vite 的默认内容。你可以用你的新组件替换所有这些内容。

修改 App 函数，移除默认内容，转而渲染 <Hello /> 组件。

你的 App 函数应该如下所示：

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

这里，<Hello /> 就是渲染 Hello 组件的方式。<> 和 </> 被称为 Fragment；它们允许你将一组子元素分组，而无需向 DOM 添加额外的节点。

你完整的 my-app/src/App.jsx 文件现在应该如下所示：

import Hello from "./Hello.jsx";
import "./App.css";

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

export default App;

注意：为了清晰起见，我们已移除未使用的导入和状态逻辑。

保存文件并在浏览器中查看更新后的渲染结果

在本步骤中，你将看到你的工作成果。

请确保你已保存 my-app/src/Hello.jsx 和 my-app/src/App.jsx 这两个文件中的所有更改。你可以通过按 Ctrl+S 或 Cmd+S 来保存文件。

你在介绍中启动的 Vite 开发服务器使用了热模块替换 (Hot Module Replacement, HMR)，这意味着它会自动检测文件更改并在浏览器中更新应用程序，而无需完全重新加载页面。

切换到 LabEx 界面的 Web 8080 标签页。现在你应该能在页面上看到 "Hello from the Hello component!" 的文本。此内容正从你的新 Hello 组件渲染。

如果你没有看到更改，请尝试点击浏览器标签页地址栏中的刷新按钮。

恭喜你，你已成功创建、导出并渲染了你的第一个 React 组件！

总结

在本实验中，你学习了在 React 应用中创建和使用组件的基本工作流程。这种模块化方法是 React 开发的核心原则。

你已成功：

• 在一个专用文件 (Hello.jsx) 中创建了一个新的函数式组件。
• 使用 export default 使组件可供应用程序的其他部分使用。
• 使用 import 将组件引入到主 App.jsx 文件中。
• 使用 JSX 标签语法 (<Hello />) 渲染了导入的组件。

这种创建、导出和导入组件的模式是构建大型且可维护的 React 应用程序的基础。