在适用于 Linux 的 Windows 子系统上安装 React

  • 项目

本指南介绍如何使用 vite 前端工具链在适用于 Linux 的 Windows 子系统 (WSL) 上运行的 Linux 分发版（如 Ubuntu）上安装 React。

如果你要创建一个单页应用 (SPA)，且希望在该应用中使用 Bash 命令或工具，并/或计划将其部署到 Linux 服务器或使其使用 Docker 容器，则建议遵循以下说明进行操作。 如果你是初次接触 React，并且正好有兴趣进行学习，则可以考虑在 Windows 上直接通过 vite 进行安装。

若要详细了解 React 的常规信息，从而在 React（Web 应用）、React Native（移动应用）和适用于 Windows 的 React Native（桌面应用）之间做出决定，请参阅 React 概述。

必备条件

  • 安装 Windows 10 的最新版本（版本 1903+，内部版本 18362+）或 Windows 11
  • 安装适用于 Linux 的 Windows 子系统 (WSL)，其中包括一个 Linux 分发版（如 Ubuntu），并确保其在 WSL 2 模式下运行。 可通过打开 PowerShell 并输入以下内容进行检查：wsl -l -v
  • 在 WSL 2 上安装 Node.js：这些说明使用 Node 版本管理器 (nvm) 进行安装，你需要运行 vite 的最新版本的 NodeJS 以及最新版本的 Node 包管理器 (npm)。

重要

使用 WSL 安装 Linux 分发版将创建一个存储文件的目录：\\wsl\Ubuntu-20.04（将 Ubuntu 20.04 替换为你要使用的任何 Linux 分发版）。 要在 Windows 文件资源管理器中打开此目录，请打开 WSL 命令行，使用 cd ~ 选择主目录，然后输入命令 explorer.exe . 注意不要在装载的 C 驱动器 (/mnt/c/Users/yourname$) 上安装 NodeJS 或存储要处理的文件。 这样会显著延长安装和生成的时间。

安装 React

要在 WSL 上安装完整的 React 工具链，建议使用 vite：

  1. 打开 WSL 命令行（如 Ubuntu）。

  2. 创建新项目文件夹 mkdir ReactProjects 并输入以下目录：cd ReactProjects。

  3. 使用 vite 安装 React：

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

  4. 安装后，将目录更改为新应用（“my-react-app”或你选择的任何名称）：cd my-react-app，安装依赖项：npm install，然后启动本地开发服务器：npm run dev

    此命令将启动 Node.js 服务器和一个显示应用的新浏览器窗口。 可使用 Ctrl + c 停止在命令行中运行 React 应用。

注意

Vite 包括一个使用 Babel、esbuild 和 Rollup 的前端生成管道，但不处理后端逻辑或数据库。 如果打算通过 React 生成一个使用 Node.js 后端的服务器呈现网站，建议安装 Next.js，而不是安装更适用于单页应用 (SPA) 的 Vite。 如果要生成面向内容的静态网站，还可能需要考虑安装 Gatsby。

  1. 准备好将 Web 应用部署到生产后，运行 npm run build 以在“dist”文件夹中创建一个应用的版本。 有关详细信息，请参阅部署静态站点。

其他资源