001 在 Windows 上搭建 React 开发环境

React 是一个功能强大的 JavaScript 库,用于构建快速、可扩展的前端应用程序。它由 Facebook 开发,采用组件化的开发方式,特别适合创建单页应用(SPA)。借助虚拟 DOM(Virtual DOM)机制,React 能够高效地更新用户界面,从而带来更加流畅的用户体验。

在开始安装 React 之前,请确保满足以下条件:

  • 需要管理员权限:安装 Node.js 和 npm 时会修改系统文件以及环境变量,因此建议使用具有管理员权限的账户进行操作。
  • 保持稳定的网络连接:安装过程中需要下载 Node.js,并获取 React 项目所需的依赖包,因此请确保网络连接正常。
  • 确认账户权限设置正确:使用管理员账户可以避免因权限不足而导致的安装失败或其他相关问题。

按照以下步骤,即可在 Windows 10 或 Windows 11 系统上安装 React,并创建你的第一个 React 应用程序。

安装 Node.js

React 依赖 Node.js 及其包管理工具 npm 来管理项目所需的各种依赖。因此,在安装 React 之前,需要先安装 Node.js。Node.js 的安装包中已经包含了 npm,无需单独安装。

  1. 打开 Node.js 官方网站
  2. 下载适用于 Windows 的 LTS(长期支持版)。该版本经过长期测试,稳定性较高,适合绝大多数开发者和生产环境使用。

提示: Node.js 是一个免费、开源且支持跨平台运行的 JavaScript 运行环境。它使开发者能够在浏览器之外运行 JavaScript,并使用 JavaScript 构建服务器端程序、Web 应用、命令行工具以及各种自动化脚本。如果你是第一次接触 React,建议优先选择 LTS 版本,而不是 Current(当前最新版),因为 LTS 版本通常拥有更好的兼容性和更完善的生态支持。

运行安装程序

  1. 找到已下载的 .msi 安装文件,双击运行安装程序。
  2. 按照安装向导的提示依次完成安装操作,阅读并接受许可协议(License Agreement)。安装过程中建议保留默认配置,直接点击 “Next(下一步)” 继续,直至完成安装。

验证 Node.js 是否安装成功

安装完成后,可以通过 命令提示符或 PowerShell 检查 Node.js 和 npm 是否已正确安装。

  1. 输入node -v回车键检查node.js的版本
  2. 输入npm -v按回车键检查npm的版本:

创建你的第一个 React 应用(使用 Vite)

Vite 是一款现代化的前端构建工具,为 React 以及其他前端框架提供了极快的启动速度和高效的开发体验。与传统的构建工具相比,Vite 在开发阶段能够实现更快速的热更新和更短的启动时间,因此已成为创建 React 项目的主流选择之一。

1. 使用 Vite 创建 React 应用

打开 命令提示符(CMD)PowerShell 或终端,并运行以下命令:

npm create vite@latest my-react-app -- --template react

你可以将my-react-app替换为自己喜欢的项目名称(建议使用小写字母)。

2. 安装项目依赖

项目创建完成后,需要进入项目目录并安装运行 React 应用所需的依赖包。

在终端中依次执行以下命令:

cd my-react-app
npm install

3. 启动开发服务器

依赖安装完成后,可以启动开发服务器,运行并预览 React 应用。

在终端中执行以下命令:

npm run dev

启动开发服务器后,打开浏览器,在地址栏中输入 http://localhost:5173,即可查看刚刚创建的 React 应用。

如果页面成功显示 Vite 默认提供的 React 欢迎界面,则说明 React 开发环境已经配置完成,你的第一个 React 项目已经成功运行。

使用 CRA 命令创建 React 应用(已不推荐)

如果你选择使用 Create React App(CRA) 来创建项目,可以在终端中运行以下命令快速生成一个 React 应用:

npx create-react-app my-app

其中 my-app 可以替换为你自己喜欢的项目名称(建议使用小写字母)。

  • 根据 npm 的命名规则,应用名称必须全部使用小写字母。
  • 执行该命令后,系统会自动安装创建项目所需的全部依赖,并完成应用的基础搭建。

在执行CRA命令后,系统会自动下载 React 模板项目,安装项目所有依赖,创建项目目录结构。

项目搭建过程中,系统会下载并安装所需的依赖包,这可能需要几分钟时间,需要耐心等待几分钟。

根据 npm 的命名规则,项目名称不能使用大写字母,因此请全部使用小写字母输写应用名称。

由于现在CRA命令存在启动速度慢,开发过程中的热更新速度没有不如 Vite 快,并且快构建效率较低,官方维护重心逐渐减弱。因此,在新项目中,更推荐使用 Vite 创建 React 应用。

创建 React 项目目录

1. 创建新文件夹

在要存放 React 应用的位置使用以下命令创建一个新的文件夹:

mkdir newfolder

上述命令中的 newfolder 是文件夹名称,你可以根据需要将其替换为你的应用项目名称。

在 React 项目中创建项目目录

2. 进入项目文件夹

使用以下命令进入刚刚创建的文件夹:

cd newfolder (你的项目文件夹名)

在代码编辑器中打开项目

打开你选择的 IDE(例如 Visual Studio Code),然后打开存放 React 应用的文件夹 newfolder(以上述示例为例)。在该文件夹中,你会看到名为 reactapp(本示例中的应用名称)的项目文件夹。

接着,在代码编辑器终端中使用以下命令进入应用目录。

cd reactapp (your app name)

运行 React 应用

在代码编辑器终端中运行以下命令启动使用Vite构建的开发服务器:

npm run dev

如果你的项目是使用CRA(Create React App)构建的,请运行以下命令启动开发服务器:

npm start

运行上述命令后,浏览器将自动打开一个新标签页,并显示带有 React 标志的默认页面。

恭喜你!你已经成功安装了首个React 应用,现在可以开始构建出色的网站和应用了。无论你使用的是 CRA、Vite 还是其他工具,你都已经准备好开始开发动态 Web 应用了。接下来可以探索 React 的组件、状态(state)和属性(props)等特性,来创建更强大的项目。