ReactJS - 安装

本章解释如何在您的机器上安装 React 库及其相关工具。在进行安装之前，让我们先验证一下先决条件。

React 为开发者提供了 CLI 工具，可以加快基于 React 的 Web 应用的创建、开发和部署速度。React CLI 工具依赖于 Node.js，必须安装在您的系统中。希望您已经在您的机器上安装了 Node.js。我们可以使用以下命令进行检查：

node --version

您可以看到您可能安装的 Nodejs 版本。对我来说，它显示如下：

v14.2.0

如果Nodejs没有安装，您可以访问https://node.org.cn/en/download/.下载并安装。

工具链

为了开发轻量级功能，例如表单验证、模态对话框等，React 库可以直接通过内容分发网络 (CDN) 包含到 Web 应用中。这类似于在 Web 应用中使用 jQuery 库。对于中等规模到大型应用，建议将应用编写为多个文件，然后使用 webpack、parcel、rollup 等捆绑器在部署代码之前编译和捆绑应用。

React 工具链有助于创建、构建、运行和部署 React 应用。React 工具链基本上提供了一个启动项目模板，其中包含引导应用所需的所有必要代码。

一些流行的用于开发 React 应用的工具链包括：

Create React App - 面向 SPA 的工具链
Next.js - 面向服务器端渲染的工具链
Gatsby - 面向静态内容的工具链

开发 React 应用所需的工具包括：

serve，一个静态服务器，用于在开发过程中提供我们的应用
Babel 编译器
Create 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

接下来，打开浏览器并在地址栏中输入https://127.0.0.1:5000，然后按 Enter。serve 应用将提供我们的网页，如下所示。

serve 将使用默认端口 5000 提供应用。如果该端口不可用，它将选择一个随机端口并指定它。

│ Serving!                                     │   
   │                                              │ 
   │ - Local: https://127.0.0.1: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
... 
... 
+ [email protected] 
+ [email protected] 
updated 2 packages in 8.685s

Babel 帮助我们使用下一代高级 JavaScript 语法编写应用。

Create React App 工具链

Create React App 是一个现代化的 CLI 工具，用于创建单页 React 应用。它是 React 社区支持的标准工具。它也处理 babel 编译器。让我们在本地系统中安装Create React App。

> npm install -g create-react-app
+ [email protected] 
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 组件。
默认设置用于测试应用。

打印页面