首页 / 文章 / React + Vite 配置指南（2026版）：带你打造第一个可运行的应用，详细解析

React Vite Node.js npm JavaScript Frontend Development

React + Vite 配置指南（2026版）：带你打造第一个可运行的应用，详细解析

逐步学习如何安装 Node.js、npm、VS Code 和 Vite 以搭建 React 应用，同时了解这些工具背后的实际功能。

1601 词

“编写第一个React组件的最佳时机并非在狂看教程之后，而是在你搭建好了合适的环境并真正理解每个组件的作用之后。”

在上一篇文章中，我们了解了React是什么、为何会在Facebook诞生，以及它如何改变了开发者构建Web应用的方式。

现在我们将从概念转向实际操作。

在编写任何组件之前，你需要一个能够运行React、即时刷新更改，并能随着应用发展而提供支持的开发环境。

读完本文后，你将在自己的机器上拥有一个可运行的React应用，并明白配置中的每个工具具体承担什么功能。

为什么不能直接在HTML文件中编写React代码？

初学者几乎总是首先提出这个问题。

React不就是“JavaScript而已”，那一个普通的HTML文件不是就够了吗？

从技术上讲，在非常有限的范围内确实如此。

但现实中的React项目依赖于以下这些要素：

JSX
ES Modules
热模块替换
包管理
构建优化

浏览器无法原生理解这些技术。

正因如此，开发人员需要借助工具在代码到达浏览器之前对其进行转换和准备。

这就好比做饭一样。

原材料不会直接从冰箱里拿出来食用——它们需要先经过处理。

搭建React项目也遵循同样的逻辑。

我们将要安装的工具

几乎所有React开发人员都会用到一小套工具，本指南中将介绍如何安装它们全部。

每个工具都用于解决工作流中的某个特定问题。

一旦所有配置就绪，你几乎察觉不到它们在后台运行。

了解 Node.js

一个常见的误解是认为 React 本身运行在 Node.js 之上。

事实并非如此。

React 在浏览器中执行，而非在 Node 中。

Node.js 的作用是在你构建应用时提供支持，而非在应用为最终用户运行时。

它能够让你：

安装库
启动开发服务器
生成优化后的生产版本包
管理项目依赖关系

没有 Node.js，安装和运行 React 会困难得多。

npm 到底是什么？

安装 Node.js 时会自动包含 npm，即 Node Package Manager 的缩写。

想象一下从零开始搭建新网站时需要同时使用多个库的场景，例如：

React
React Router
Axios
Tailwind CSS
Redux Toolkit

无需手动下载每一个库，npm可以通过一条命令完成安装。

例如：

npm install axios

运行这条命令即可——npm会获取相应包，将其集成到项目中，并记录当前使用的版本。

为何现代React使用Vite

早期的教程通常会展示类似这样的命令来搭建项目框架：

npx create-react-app my-app

很长一段时间里，这都是最常用的方法。

不过如今，React社区已大多转向使用Vite。

是什么推动了这一转变？

主要是为了获得更高效的日常开发体验。

Vite的优势包括：

即时项目启动
极快的热模块替换功能（HMR）
更小的生产环境构建体积
整体配置更为简单
更强的整体性能

对于现在正在学习 React 的人来说，从 Vite 开始是明智的选择。

步骤 1：安装 Node.js

从官方网站下载当前版本的 LTS（长期支持版）Node.js。

安装完成后，打开终端以确认安装成功。

node -v

输出结果应类似如下：

v24.x.x

接着再检查 npm 的情况：

npm -v

如果这两个命令都能显示版本号，说明你的机器配置正确。

步骤 2：安装 Visual Studio Code

从技术上讲，任何编辑器都可以用来编写 React 代码，但由于其快速度、丰富的扩展生态以及强大的 JavaScript 工具支持，VS Code 已成为默认选择。

每位 React 开发者都应安装的 VS Code 扩展

尽早安装少量插件会对日常开发体验带来显著提升。值得加入您工具集的包括：

ESLint，用于检测代码中的问题
Prettier，用于保持一致的代码格式
Error Lens，用于在代码行内直接显示错误信息
Auto Rename Tag，用于同步匹配的标签
Path Intellisense，用于自动补全文件路径
GitLens，为编辑器提供更丰富的 Git 信息
ES7+ React Snippets，用于快速生成 React 基础代码

这些扩展共同提升了代码格式化、早期错误检测、自动补全以及整体工作效率。

第3步：创建你的第一个React项目

打开终端窗口并运行：

npm create vite@latest

系统会要求你回答几个设置问题：

Project Name:
react-beginners

Framework:
React

Variant:
JavaScript

框架生成完成后，进入新的项目文件夹：

cd react-beginners

然后安装项目的依赖项：

npm install

最后，启动开发服务器：

npm run dev

终端输出会类似如下所示：

Local: http://localhost:5173

在浏览器中打开该地址。

你的第一个React应用程序现已启动并运行。

了解项目结构

新生成的React项目乍看之下可能令人生畏，但实际上只有少数几个文件是需要你经常操作的。

react-beginners/
│
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── node_modules/

`src`

你日常编写的几乎所有代码都保存在这个文件夹中。

`App.jsx`

可将此文件视为您应用程序的根组件。

今后您开发的每一个功能都将从这里开始。

`main.jsx`

该文件负责将您的 React 应用程序与实际网页连接起来。

它决定了应用程序应在 DOM 的哪个位置进行渲染。

`package.json`

这里包含项目的元数据、依赖项以及用于运行或构建项目的脚本。

`node_modules`

该目录存放着项目所依赖的所有软件包。

请勿随意修改其中的任何内容——没有必要手动更改其中的数据。

进行首次修改

打开 App.jsx，用以下内容替换其中的模板代码：

function App() {
  return (
    <div>
      <h1>Hello React 👋</h1>
      <p>My first React application is running!</p>
    </div>
  );
}

export default App;

保存文件后，观察浏览器的变化。

你注意到了吗？页面会自动更新，无需手动刷新。

这种机制被称为热模块替换，即HMR。

像这样的小便利累积起来，能在整个项目周期中节省大量时间。

Angular开发者：有何不同

有Angular开发经验的人会发现整体工作流程很熟悉，只是流程更为简洁。

React更注重灵活性，允许你以自己的方式组合组件，而Angular从一开始就内置了更多结构。

两种方法并无绝对优劣——只是解决问题的方式不同而已。

初学者常犯的错误

在熟悉React的过程中，你可能会遇到一些反复出现的问题。

忘记运行npm install

在项目文件夹外的错误目录中运行命令

在node_modules目录内进行修改

使用过时的Node.js版本

在开发服务器仍在运行时关闭终端窗口

一旦识别出这些常见问题，就很容易避免它们了。

你学到了什么

通过学习本文，你已经掌握了：

为何React需要专用开发环境的理由
Node.js和npm的实际功能
Vite为何成为构建React项目的标准工具
搭建并运行第一个React应用程序的步骤
各个核心项目文件的作用
热模块替换如何改变代码迭代的方式

此时，您已经具备了开始构建真正的 React 应用程序所需的一切。

练习挑战

在进入下一部分之前，试着完成以下练习：

使用 Vite 创建一个全新的 React 项目。
修改 App.jsx 中的标题文本。
添加一段包含您自己姓名的简短介绍。
使用 CSS 调整文本颜色。
暂停并手动重新启动开发服务器。

亲自操作这些步骤是快速掌握该工具链的最佳途径。

接下来是什么？

既然环境已经准备就绪，下一步就是深入了解 React 的核心理念之一。

第三部分将介绍 JSX——这种能够将类似 HTML 的标记直接嵌入 JavaScript 代码中的语法。

您将学习：

JSX 的真正含义

React 使用 JSX 的原因

JSX 所遵循的规则

JSX 中表达式的运作方式

HTML 与 JSX 的区别

新手常犯的错误

保持 JSX 清晰易读的技巧

读完那篇文章后，你就能自信地编写自己的 React 组件了。