ReactJS - 安装
本章介绍如何在您的机器上安装 React 库及其相关工具。在进行安装之前，让我们先验证先决条件。
React 为开发人员提供 CLI 工具，以快速创建、开发和部署基于 React 的 Web 应用程序。React CLI 工具依赖于 Node.js，必须安装在您的系统中。希望您已经在机器上安装了 Node.js。我们可以使用以下命令检查它 −
node --version
您可以查看您可能已安装的 Nodejs 版本。对我来说，如下所示，
v14.2.0
如果未安装 Nodejs，您可以通过访问 https://nodejs.org/en/download/ 下载并安装。
工具链
要开发表单验证、模型对话框等轻量级功能，可以通过内容分发网络 (CDN) 将 React 库直接包含在 Web 应用程序中。这类似于在 Web 应用程序中使用 jQuery 库。对于中大型应用程序，建议将应用程序编写为多个文件，然后使用捆绑程序(如 webpack、parcel、rollup 等)在部署代码之前编译和捆绑应用程序。
React 工具链有助于创建、构建、运行和部署 React 应用程序。 React 工具链基本上提供了一个启动项目模板，其中包含启动应用程序所需的所有代码。
一些用于开发 React 应用程序的流行工具链是 −
- 创建 React App − 面向 SPA 的工具链
- Next.js − 面向服务器端渲染的工具链
- Gatsby −面向静态内容的工具链
开发 React 应用程序所需的工具是 −
- serve，一个在开发期间为我们的应用程序提供服务的静态服务器
- Babel 编译器
- 创建 React App CLI
让我们在本章中学习上述工具的基础知识以及如何安装它们。
serve 静态服务器
serve 是一个轻量级 Web 服务器。它为静态站点和单页应用程序提供服务。它加载速度快，占用的内存最少。它可用于为 React 应用程序提供服务。让我们使用系统中的 npm 包管理器安装该工具。
npm install serve -g
让我们创建一个简单的静态站点并使用 serve 应用程序为该应用程序提供服务。
打开命令提示符并转到您的工作区。
cd /go/to/your/workspace
创建一个新文件夹 static_site 并将目录更改为新创建的文件夹。
mkdir static_site cd static_site
接下来，使用您最喜欢的 html 编辑器在文件夹中创建一个简单的网页。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Static website</title>
</head>
<body>
<div><h1>Hello!</h1></div>
</body>
</html>
接下来，运行 serve 命令。
serve .
我们还可以提供单个文件 index.html，而不是整个文件夹。
serve ./index.html
接下来，打开浏览器并在地址栏中输入 http://localhost:5000 并按回车键。serve 应用程序将提供我们的网页，如下所示。
serve 将使用默认端口 5000 为 应用程序提供服务。如果不可用，它将选择一个随机端口并指定它。
│ Serving! │ │ │ │ - Local: http://localhost:57311 │ │ - On Your Network: http://192.168.56.1:57311 │ │ │ │ This port was picked because 5000 is in use. │ │ │ │ Copied local address to clipboard!
Babel 编译器
Babel 是一个 JavaScript 编译器，它将 JavaScript 的许多变体(es2015、es6 等)编译为所有浏览器支持的标准 JavaScript 代码。React 使用 JSX(JavaScript 的扩展)来设计用户界面代码。Babel 用于将 JSX 代码编译为 JavaScript 代码。
要安装 Babel 及其 React 配套程序，请运行以下命令 −
npm install babel-cli@6 babel-preset-react-app@3 -g ... ... + babel-cli@6.26.0 + babel-preset-react-app@3.1.2 updated 2 packages in 8.685s
Babel 帮助我们使用下一代高级 JavaScript 语法编写应用程序。
Create React App 工具链
Create React App 是一个用于创建单页 React 应用程序的现代 CLI 工具。它是 React 社区支持的标准工具。它还可以处理 babel 编译器。让我们在本地系统中安装 Create React App。
> npm install -g create-react-app + create-react-app@4.0.1 added 6 packages from 4 contributors, removed 37 packages and updated 12 packages in 4.693s
更新工具链
React Create App 工具链使用 react-scripts 包来构建和运行应用程序。一旦我们开始开发应用程序，我们就可以随时使用 npm 包管理器将 react-script 更新到最新版本。
npm install react-scripts@latest
使用 React 工具链的优势
React 工具链提供了许多开箱即用的功能。使用 React 工具链的一些优点是 −
- 应用程序的预定义和标准结构。
- 适用于不同类型应用程序的现成项目模板。
- 包含开发 Web 服务器。
- 轻松包含第三方 React 组件。
- 默认设置以测试应用程序。
