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 应用程序所需的工具是 -

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

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

serve 静态服务器

serve 是一个轻量级的 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 命令。

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 语法编写应用程序。

创建 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 包管理器将 react-script 更新到最新版本。

npm install react-scripts@latest

使用 React 工具链的优势

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

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

本页