React 环境设置

在本节中，我们将学习如何为成功开发 ReactJS 应用程序设置环境。

ReactJS 的先决条件

1. NodeJS 和 NPM
2. React 和 React DOM
3. Webpack
4. Babel

安装 ReactJS 的方法

有两种方法可以为成功的 ReactJS 应用程序设置环境。它们如下所示。

1. 使用 npm 命令
2. 使用 create-react-app 命令

1. 使用 npm 命令

安装 NodeJS 和 NPM

NodeJS 和 NPM 是开发任何 ReactJS 应用程序所需的平台。您可以通过下面的链接安装 NodeJS 和 NPM 包管理器。

要验证 NodeJS 和 NPM，请使用下方图片中所示的命令。

安装 React 和 React DOM

在桌面或您想要的位置创建一个名为 reactApp 的 根 文件夹。这里，我们在桌面上创建它。您可以直接创建文件夹，也可以使用下面提供的命令。

现在，您需要创建一个 package.json 文件。要创建任何模块，需要在项目文件夹中生成一个 package.json 文件。为此，您需要运行下方图片中所示的命令。

创建 package.json 文件后，您需要使用终端窗口中的以下 npm 命令安装 react 及其 DOM 包，如下面的图片所示。

您也可以单独使用上述命令，如下所示。

安装 Webpack

Webpack 用于模块打包、开发和生产管道自动化。我们在开发过程中使用 webpack-dev-server，生产构建使用 webpack，webpack CLI 提供了一套命令。Webpack 将它们编译成一个单一文件（bundle）。要安装 webpack，请使用下方图片中所示的命令。

您也可以单独使用上述命令，如下所示。

安装 Babel

Babel 是一个 JavaScript 编译器和转译器，用于将一种源代码转换为其他代码。它将 React JSX 和 ES6 编译为 ES5 JavaScript，可以在所有浏览器上运行。我们需要 babel-loader 来处理 JSX 文件类型，babel-preset-react 可以在不丢失应用程序当前状态的情况下，在代码发生任何更改时自动更新您的浏览器。ES6 支持需要 babel-preset-env Babel preset。要安装 webpack，请使用下方图片中所示的以下命令。

您也可以单独使用上述命令，如下所示。

创建文件

要完成安装过程，您需要在项目文件夹中添加以下文件。这些文件是 index.html, App.js, main.js, webpack.config.js 和 .babelrc。您可以通过手动创建它们，或使用命令提示符创建它们。

设置 React 应用程序的编译器、加载器和服务器

配置 webpack

您可以在 webpack.config.js 文件中通过添加以下代码来配置 webpack。它定义了您的应用程序入口点、构建输出以及将自动解析的扩展名。它还将开发服务器设置为 8080 端口。它定义了用于处理应用程序中使用的各种文件类型的加载器，并通过添加开发所需的插件来完成。

webpack.config.json

现在，打开 package.json 文件，删除 “scripts” 对象中的 “test” “echo \\" Error: no test specified\\" && exit 1"，然后添加启动和构建命令。这是因为我们不会在此应用程序中执行任何测试。

index.html 的 HTML webpack 模板

我们可以添加一个自定义模板来使用 HtmlWeb-packPlugin 插件生成 index.html。这使我们能够添加视口标签以支持应用程序的移动响应式缩放。它还将 div id = "app" 设置为应用程序的根元素，并添加 index_bundle.js 脚本，这是我们的打包后的应用程序文件。

App.jsx 和 main.js

这是第一个 React 组件，即应用程序入口点。它将渲染 Hello World。

App.js

现在，导入此组件并将其渲染到您的根 App 元素中，以便您可以在浏览器中看到它。

Main.js

注意：如果您想使用某个东西，则需要先导入它。为了使组件在应用程序的其他部分可用，您需要在创建后导出它，并在您想要使用它的文件中导入它。

创建 .babelrc 文件

创建一个名为 .babelrc 的文件，并将以下代码复制到其中。

.babelrc

运行服务器

完成安装过程并设置应用程序后，您可以通过运行以下命令来启动服务器。

它将显示我们需要在浏览器中打开的端口号。打开后，您将看到以下输出。

生成 Bundle

现在，为您的应用程序生成 Bundle。Bundling 是跟踪导入文件并将其合并为一个文件的过程：“bundle”。然后可以将此 bundle 包含在网页中以一次性加载整个应用程序。要生成此文件，您需要在命令提示符中运行构建命令，如下所示。

此命令将在当前文件夹（您的应用程序所属的文件夹）中生成 Bundle，并显示如下面的图片。

2. 使用 create-react-app 命令

如果您不想使用 webpack 和 babel 来安装 react，那么您可以选择 create-react-app 来安装 react。'create-react-app' 是一个由 Facebook 本身维护的工具。这适合初学者，无需手动处理 webpack 和 babel 等转译工具。在本节中，我将向您展示如何使用 CRA 工具安装 React。

安装 NodeJS 和 NPM

NodeJS 和 NPM 是开发任何 ReactJS 应用程序所需的平台。您可以通过下面的链接安装 NodeJS 和 NPM 包管理器。

安装 React

您可以使用以下命令通过 npm 包管理器安装 React。无需担心 React 安装的复杂性。create-react-app npm 包会处理好。

创建一个新的 React 项目

安装 React 后，您可以使用 create-react-app 命令创建一个新的 react 项目。这里，我为我的项目选择了 jtp-reactapp 这个名字。

注意：您可以使用 npx 将上述两个步骤合并为单个命令。npx 是一个包运行工具，它随 npm 5.2 及更高版本一起提供。

上述命令将安装 react 并创建一个名为 jtp-reactapp 的新项目。此应用程序默认包含以下子文件夹和文件，如下面的图片所示。

现在，要开始，请打开 src 文件夹并在您想要的文件中进行更改。默认情况下，src 文件夹包含如下面的图片所示的以下文件。

例如，我将打开 App.js 并在其代码中进行更改，如下所示。

App.js

注意：您也可以选择自己喜欢的代码编辑器来编辑您的项目。但在我的例子中，我选择了 Eclipse。使用下面的链接，您可以下载适用于 Ubuntu 的 Eclipse 并进行安装。

运行服务器

完成安装过程后，您可以通过运行以下命令来启动服务器。

它将显示我们需要在浏览器中打开的端口号。打开后，您将看到以下输出。