ReactJS - 安装

本章介绍了在您的计算机中安装 React 库及其相关工具。在开始安装之前，让我们首先验证先决条件。

React 为开发人员提供 CLI 工具来快速创建、开发和部署基于 React 的 Web 应用程序。React CLI 工具依赖于 Node.js，并且必须安装在您的系统中。希望您已经在计算机上安装了 Node.js。我们可以使用以下命令检查它 -

node --version

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

v14.2.0

如果未安装Nodejs，可以访问https://nodejs.org/en/download/下载并安装。

工具链

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

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

一些用于开发 React 应用程序的流行工具链是 -

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

开发 React 应用程序所需的工具是 -

服务，一个静态服务器，用于在开发过程中为我们的应用程序提供服务
巴别塔编译器
创建 React 应用程序 CLI

让我们在本章中学习上述工具的基础知识以及如何安装它们。

服务静态服务器

该服务是一个轻量级 Web 服务器。它服务于静态站点和单页应用程序。它加载速度快并且消耗最少的内存。它可用于为 React 应用程序提供服务。让我们在系统中使用npm包管理器安装该工具。

npm install serve -g

让我们创建一个简单的静态站点并使用serve app为应用程序提供服务。

打开命令提示符并转到您的工作区。

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 .

我们还可以提供单个文件，index.html，而不是整个文件夹。

serve ./index.html

接下来，打开浏览器并在地址栏中输入http://localhost:5000并按回车键。服务应用程序将为我们的网页提供服务，如下所示。

服务器将使用默认端口 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 是一个 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 语法编写应用程序。

创建 React App 工具链

Create React App是一个现代 CLI 工具，用于创建单页 React 应用程序。它是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包管理器将反应脚本更新到最新版本。

npm install react-scripts@latest

使用React工具链的优点

React 工具链提供了许多开箱即用的功能。使用 React 工具链的一些优点是 -

应用程序的预定义和标准结构。
适用于不同类型应用程序的现成项目模板。
包括开发网络服务器。
包含第三方 React 组件的简单方法。
用于测试应用程序的默认设置。