岸边的风:个人主页
个人专栏 :《 VUE 》 《 javaScript 》
⛺️ 生活的理想,就是为了理想的生活 !
目录
必备条件
安装 React
将 React 添加到现有的 Web 应用
本指南介绍如何使用 create-react-app 工具链在适用于 Linux 的 Windows 子系统 (WSL) 上运行的 Linux 分发版(如 Ubuntu)上安装 React。
如果你要创建一个单页应用 (SPA),且希望在该应用中使用 Bash 命令或工具,并/或计划将其部署到 Linux 服务器或使其使用 Docker 容器,则建议遵循以下说明进行操作。 如果你是初次接触 React 并且正好有兴趣进行学习,则可以考虑在 Windows 上直接通过 create-react-app 进行安装。
若要详细了解 React 的常规信息,从而在 React(Web 应用)、React Native(移动应用)和适用于 Windows 的 React Native(桌面应用)之间做出决定,请参阅 React 概述。
wsl -l -v
重要
使用 WSL 安装 Linux 分发版将创建一个存储文件的目录:\\wsl\Ubuntu-20.04
(将 Ubuntu 20.04 替换为你要使用的任何 Linux 分发版)。 要在 Windows 文件资源管理器中打开此目录,请打开 WSL 命令行,使用 cd ~
选择主目录,然后输入命令 explorer.exe .
注意不要在装载的 C 驱动器 (/mnt/c/Users/yourname$
) 上安装 NodeJS 或存储要处理的文件。 这样会显著延长安装和生成的时间。
要在 WSL 上安装完整的 React 工具链,建议使用 create-react-app:
打开 WSL 命令行(如 Ubuntu)。
创建新项目文件夹 mkdir ReactProjects
并输入以下目录:cd ReactProjects
。
使用 npx 安装 React:
Bash复制
npx create-react-app my-app
备注
npx 是 npm 用于执行包的包运行程序,用来代替全局安装。 基本上,它会创建一个临时的 React 安装,这样对于每个新项目,你都可以使用最新版本的 React(而不是你执行上述全局安装时的当前版本)。 使用 NPX 包运行程序执行包还有助于在计算机上安装大量包所产生的污染。
首先,这会请求你提供临时安装 create-react-app 工具链及其关联包的权限。 完成后,将目录更改为你的新应用(“my-app”或选择的任何名称):cd my-app
。
启动新的 React 应用:
Bash复制
npm start
此命令将启动 Node.js 服务器和一个显示应用的新浏览器窗口。 可使用 Ctrl+c 停止在命令行中运行 React 应用。
备注
Create React App 包括一个使用 Babel 和 webpack 的前端生成管道,但不处理后端逻辑或数据库。 如果打算通过 React 生成一个使用 Node.js 后端的服务器呈现网站,建议安装 Next.js,而不是安装更适用于单页应用的 create-react-app。 如果要生成面向内容的静态网站,还可能需要考虑安装 Gatsby。
准备好将 Web 应用部署到生产时,运行 npm run build
将在“build”文件夹中创建一个应用的版本。 有关详细信息,请参阅 Create React App 用户指南。
因为 React 是一个 JavaScript 的库,即一个文本文件的集合(最基本的形式),所以无需在计算机上安装任何工具或库即可创建 React 应用。 你可能只想向网页添加“少量的交互性”,而不需要生成工具。 只需在 HTML 页上添加一个普通标记 即可添加 React 组件。 请按照 React 文档中的“在一分钟内添加 React”进行操作。