React 项目设置：使用 Vite 创建并运行你的第一个应用

介绍

欢迎来到你的第一个 React 实验！React 是一个强大的 JavaScript 库，用于构建动态且交互式的用户界面。要开始 React 开发，你首先需要设置一个合适的开发环境。

在本实验中，你将使用现代构建工具 Vite 来引导一个新项目。我们将引导你完成探索项目结构、安装依赖、启动开发服务器、修改现有组件以及创建新组件的过程。在本实验结束时，你将对 React 项目设置有一个基础的了解，并准备好构建自己的组件。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个高级级别的实验，完成率为 31%。获得了学习者 97% 的好评率。

探索项目并安装依赖

设置过程已经使用 Vite 在一个名为 my-app 的目录中为你创建了一个新的 React 项目。首先，让我们验证你的开发环境是否具备必要的工具：Node.js 和 npm。

打开终端并运行以下命令来检查它们的版本：

node -v

你应该会看到类似以下的 Node.js 版本输出：

v22.19.0

接下来，检查 npm 版本：

npm -v

你应该会看到类似的 npm 版本输出：

10.9.3

现在，导航到项目目录。所有后续命令都应在此目录内运行。

cd my-app

你的 React 应用程序需要几个包才能运行，这些包列在 package.json 文件中。你需要使用 npm 安装这些依赖。

运行以下命令：

重要提示： 出于安全原因，免费用户无法连接互联网，因此无法安装 npm 包。你可以继续阅读文档，体验其他 Web Development 实验，或者考虑升级为 Pro 用户。

npm install

此命令会读取 package.json 文件，并将所有必需的库下载到项目中的 node_modules 文件夹。在安装包的过程中，你将看到一个进度条和一些消息。

启动开发服务器

要查看你的 React 应用程序运行情况，你需要启动开发服务器。由于你已经在 my-app 目录中，你可以使用 Vite 提供的脚本。

运行以下命令在端口 8080 上启动服务器：

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

此命令将启动服务器并占用你的终端，显示应用程序运行的本地 URL。保持此终端运行。片刻之后，你将看到一条消息表明服务器已准备就绪。

要查看你的应用程序，请点击界面顶部的 Web 8080 标签页。你应该会看到默认的 Vite 和 React 欢迎页面。

注意： 如果你没有看到应用程序，请尝试点击 Web 8080 标签页中地址栏左侧的刷新按钮。

修改你的第一个组件

Vite 开发服务器支持模块热替换（Hot Module Replacement, HMR），当你保存文件更改时，它会立即在浏览器中更新应用程序。让我们来实际体验一下。

在左侧的文件浏览器中，导航到 my-app -> src，然后点击 App.jsx 文件在编辑器中打开它。此文件定义了主要的 App 组件。

在 return 语句内部，你会看到一段看起来像 HTML 的代码块。这就是 JSX，它是 JavaScript 的一种语法扩展，允许你以熟悉的方式编写 UI 结构。

将 return (...) 内的全部内容替换为一个简单的标题。你的 App.jsx 文件应该如下所示：

import "./App.css";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
    </>
  );
}

export default App;

通过按下 Ctrl+S（或 Mac 上的 Cmd+S）保存文件。现在，切换回 Web 8080 标签页。你会看到页面已立即更新，显示你新的 "Hello, LabEx!" 标题。

创建新组件

React 的核心原则之一是从小巧、可复用的组件构建 UI。让我们来创建一个新组件。

在左侧的文件浏览器中，右键点击 my-app 下的 src 目录。
选择 "New File"（新建文件）并将其命名为 Welcome.jsx。
打开新创建的 Welcome.jsx 文件并添加以下代码：

import React from "react";

function Welcome() {
  return <h2>Welcome to my first React App!</h2>;
}

export default Welcome;

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

import React from 'react';: 任何使用 JSX 的文件都需要这一行。
function Welcome() { ... }: 这定义了一个名为 Welcome 的简单函数组件。
return <h2>...</h2>;: 该组件返回一个 JSX 元素，该元素将被渲染到屏幕上。
export default Welcome;: 这使得 Welcome 组件可以在其他文件中使用。

保存文件（Ctrl+S）。此时浏览器中不会有任何变化，因为我们还没有使用这个新组件。

使用你的新组件

既然你已经创建了 Welcome 组件，让我们在主 App 组件中使用它。这被称为组件组合（component composition）。

再次打开 my-app/src/App.jsx 文件。
在文件顶部，添加一个 import 语句来引入你的新组件：

import Welcome from "./Welcome.jsx";

接下来，将你的新组件放置在 App 组件的 return 语句中。在 <h1> 标签下方添加 <Welcome /> 来渲染该组件。App.jsx 的最终代码应如下所示：

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

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
      <Welcome />
    </>
  );
}

export default App;

保存 App.jsx 文件（Ctrl+S）。

最后一次切换到 Web 8080 标签页。你现在会看到 "Welcome to my first React App!" 的消息渲染在你的主标题下方。你已成功创建并组合了 React 组件！

React app displaying welcome message below heading

总结

在本实验中，你使用现代的 Vite 工具链，迈出了 React 开发世界的第一步。

你学会了如何：

验证 Node.js 和 npm 开发环境。
使用 Vite 创建一个新的 React 项目。
使用 npm install 安装项目依赖。
使用 npm run dev 启动 React 开发服务器。
修改现有组件并通过热模块替换（Hot Module Replacement）查看实时更新。
在 .jsx 文件中从头开始创建一个新的函数组件。
导入和组合组件以构建更复杂的 UI。

你已成功设置了一个 React 项目，体验了现代开发工作流程，并练习了基于组件的架构基础。你现在已为应对更高级的 React 概念做好了充分准备。

React 设置与首个应用

介绍

探索项目并安装依赖

启动开发服务器

修改你的第一个组件

创建新组件

使用你的新组件

总结