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 组件。
• 默认设置以测试应用程序。