ReactJS - 环境搭建

本章将向您展示如何设置一个成功的 React 开发环境。请注意，这其中涉及许多步骤，但这将有助于加快以后的开发过程。我们需要NodeJS，如果您尚未安装它，请查看下表中的链接。

序号	软件及说明
1	NodeJS 和 NPM NodeJS 是 ReactJS 开发所需的平台。查看我们的 NodeJS 环境搭建。

成功安装 NodeJS 后，我们可以使用 npm 在其上开始安装 React。

您可以通过两种方式安装 ReactJS：
使用 webpack 和 babel。

使用 create-react-app 命令。

使用 webpack 和 babel 安装 ReactJS

Webpack 是一个模块打包器（管理和加载独立模块）。它接收依赖模块并将它们编译成单个（文件）包。您可以在使用命令行开发应用程序时使用此包，或者通过使用 webpack.config 文件对其进行配置。

Babel 是一个 JavaScript 编译器和转译器。它用于将一种源代码转换为另一种。使用它，您将能够在代码中使用新的 ES6 功能，babel 将其转换为普通的 ES5，可以在所有浏览器上运行。

步骤 1 - 创建根文件夹

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

使用 mkdir 命令在桌面上创建一个名为 reactApp 的文件夹来安装所有必需的文件。

C:\Users\username\Desktop\reactApp>npm init

要创建任何模块，都需要生成 package.json 文件。因此，创建文件夹后，我们需要创建一个 package.json 文件。为此，您需要从命令提示符运行 npm init 命令。

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

此命令会询问有关模块的信息，例如包名称、描述、作者等，您可以使用 –y 选项跳过这些信息。

步骤 2 - 安装 React 和 react-dom

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

由于我们的主要任务是安装 ReactJS，因此分别使用 npm 的 install react 和 react-dom 命令安装它及其 dom 包。您可以使用 --save 选项将我们安装的包添加到 package.json 文件中。

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

或者，您可以使用单个命令安装所有这些包：

步骤 3 - 安装 webpack

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

由于我们使用 webpack 生成捆绑器，因此需要安装 webpack、webpack-dev-server 和 webpack-cli。

步骤 4 - 安装 babel

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

安装 babel 及其插件 babel-core、babel-loader、babel-preset-env、babel-preset-react 和 html-webpack-plugin

步骤 5 - 创建文件

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

要完成安装，我们需要创建某些文件，即 index.html、App.js、main.js、webpack.config.js 和 .babelrc。您可以手动创建这些文件，也可以使用命令提示符。

步骤 6 - 设置编译器、服务器和加载器

打开 webpack-config.js 文件并添加以下代码。我们将 webpack 入口点设置为 main.js。输出路径是捆绑的应用程序将被提供服务的位置。我们还将开发服务器设置为 8001 端口。您可以选择任何您想要的端口。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

webpack.config.js

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

打开 package.json 并删除 "scripts" 对象内的 "test" "echo \"Error: no test specified\" && exit 1"。我们删除此行是因为在本教程中我们不会进行任何测试。让我们添加 start 和 build 命令。

步骤 7 - index.html

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

这只是普通的 HTML。我们将 div id = "app" 设置为我们应用程序的根元素，并添加 index_bundle.js 脚本，这是我们的捆绑应用程序文件。

步骤 8 - App.jsx 和 main.js

这是第一个 React 组件。我们将在后续章节中深入解释 React 组件。此组件将渲染 Hello World。

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

App.js

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

main.js

注意 - 每当您想使用某些内容时，您需要先导入它。如果您想使组件在应用程序的其他部分可用，则需要在创建后导出它，并在您想要使用它的文件中导入它。

{
   "presets":["env", "react"]
}

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

步骤 9 - 运行服务器

C:\Users\username\Desktop\reactApp>npm start

设置已完成，我们可以通过运行以下命令启动服务器。

它将显示我们需要在浏览器中打开的端口。在本例中，它是 https://127.0.0.1:8001/。打开它后，我们将看到以下输出。

步骤 10 - 生成包

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

最后，要生成包，您需要在命令提示符中运行 build 命令：

这将在当前文件夹中生成包，如下所示。

使用 create-react-app 命令

您可以通过安装 create-react-app 来更简单地安装 ReactJS，而不是使用 webpack 和 babel。

步骤 1 - 安装 create-react-app

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

浏览桌面，使用如下所示的命令提示符安装 Create React App：

这将在桌面上创建一个名为 my-app 的文件夹，并在其中安装所有必需的文件。

步骤 2 - 删除所有源文件

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

浏览生成的 my-app 文件夹中的 src 文件夹，并删除其中的所有文件，如下所示：

步骤 3 - 添加文件

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

在 src 文件夹中添加名为 index.css 和 index.js 的文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

在 index.js 文件中添加以下代码

步骤 4 - 运行项目

npm start

最后，使用 start 命令运行项目。

打印页面