How to set up React, webpack 4, and Babel 7

React 主要用于单页面应用程序。

Y然而，你可以将React库集成到任何使用 webpack和Babel构建的网站中。

react webpack babel

¶How to set up React, Webpack, and Babel: What you will learn

如何安装和配置webpack
如何安装和配置Babel
如何安装React
如何按照Container / Presentational组件的原则创建两个React组件
如何将生成的包包含到HTML页面
如何安装和配置Webpack Dev Server

React不仅限于SPA应用。可以将库集成到任何现有网站中。

可以通过CDN或模块包引入React。

对于我的大多数项目，我都使用Webpack：将React和Webpack结合起来很容易。

您也可以按下下面几分钟的教程与Webpack4工作。

¶How to set up React, Webpack, and Babel: Setting up the project

首先为项目创建一个目录：

1	mkdir webpack-react-tutorial && cd webpack-react-tutorial

创建一个用于保存代码的最小目录结构：

1	mkdir -p src

通过运行来启动项目：

1	npm init -y

就是这么简单，项目建立完成！

¶How to set up React, Webpack, and Babel: Setting up webpack

Webpack 是现代Web开发的支柱之一。这是一个非常强大的工具。

了解如何使用webpack是使用React的基础。

webpack提取原始的React组件，用于生成(几乎)每个浏览器都能运行的JavaScript代码。

让我们通过运行以下命令来安装它：

1	npm i webpack --save-dev

你还需要webpack-cli，将其加入：

1	npm i webpack-cli --save-dev

接下来将webpack命令加入到package.json：

1
2
3

"scripts": {
	"build": "webpack --mode production"
}

这里，不需要为webpack定义配置文件。

较旧的webpack版本会自动查找配置文件。

自版本4开始，你可以直接开发。

下一小节，我们将安装和配置Babel以便转换我们的代码。

¶How to set up React, Webpack, and Babel: Setting up Babel

React components(组件)大多是用JavaScript ES6编写的。

由于浏览器无法理解React组件，因此需要进行某种转换。

Webpack不知道如何进行转换，但它具有loaders(加载器)的概念：将它们视为转换器。

Webpack loaders(加载器)将某些内容作为输入并生成其他内容作为输出。

babel-loader是Webpack加载器，负责接收ES6代码并使其可以让所选择的浏览器理解。

很明显 babel-load使用Babel。并且Babel必须配置为使用一组预设：

babel-preset-env用于将JavaScript ES6代码编译为ES5(请注意，babel-preset-es2015现已弃用)

babel-preset-react用于将JSX和其它东西编译到JavaScript

让我们用以下命令引入依赖关系：

1	npm i babel-loader babel-core babel-preset-env babel-preset-react --save-dev

别忘了配置Babel！在项目文件夹中创建一个名为.babelrc的新文件：

1
2
3

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

此时我们已准备好定义最小的webpack配置。

创建一个名为webpack.config.js的文件，写入以下内容：

module.exports = {
  module: {
    rules: [
	  {
	    test: /\.js$/,
		exclude: /node_modules/,
		use: {
		  loader: "babel-loader"
		}
      }
	]
  }
};

配置非常简单。

对于每个扩展名为.js的文件，webpack都会通过babel-loader来管理代码，将ES6转换为ES5.

有了这个，我们就可以编写我们的React组件了。

让我们来看看下一节。

¶How to set up React, webpack, and Babel: writing React components

我喜欢按照容器(Container)组件/展示(Presentational)组件的原则编写我的React组件。

我建议看看Dan Abramov的 container components 和 smart and dumb components，以了解更多信息。

简而言之，容器组件/展示组件原则是React组件的模式。

容器组件是承载所有逻辑的容器组件：用于处理state(状态)更改，内部组件state(状态)等的功能。

相反，展示组件仅用于显示所需的HTML标记。展示组件通常是普通的箭头函数，并从容器组件接受数据作为 props(属性)。

你将在以下示例中看到它们的样子。

对于这片文章的范围，我想构建一个带有单个文本输入的超级简单的React表单。

在接触任何代码之前，让我们通过运行以下命令来引入React：

1	npm i react react-dom --save-dev

然后创建一个用于组织组件的最小目录结构：

1	mkdir -p src/js/components/{container,presentational}

接下来让我们创建一个容器组件：

有自己的state(状态)
渲染HTML表单

在src/js/components/container/中创建组件：

1	touch src/js/components/container/ForContainer.js

该组件将如下所示：

import React, { Component } from "react";
import ReactDOM from "react-dom";
class FormContainer extends Component {
  constructor() {
    super();
    this.state = {
      title: ""
    };
  }
  render() {
    return (
      <form id="article-form">
      </form>
    );
  }
}
export default FormContainer;

该组件刺客没什么内容和交互。它只是一个包装组件的骨架。

事实上，如果一个容器组件不包含展示子组件的话，那么这个容器组件几乎是无用的。

我们来解决这个问题。

在src/js/components/presentational/中创建一个新组件：

1	touch src/js/components/presentational/Input.js

我们的第一个表示性的React组件将是文本输入框。我们知道HTML input具有以下属性：

type
class
id
value
required

所有这些都将成为容器组件传递给其展示子组件的props(属性)。

由于Input保持自己的state(状态)，我们必须确保React会处理它。HTML input成为一个React中的受控组件。

说到props(属性)，最好使用Prop Types记录你的React组件。

通过运行以下命令来安装prop-types包：

1	npm i prop-types --save-dev

回到React，HTML Input展示组件如下所示：

import React from "react";
import PropTypes from "prop-types";
const Input = ({ label, text, type, id, value, handleChange }) => (
  <div className="form-group">
    <label htmlFor={label}>{text}</label>
    <input
      type={type}
      className="form-control"
      id={id}
      value={value}
      onChange={handleChange}
      required
    />
  </div>
);
Input.propTypes = {
  label: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  handleChange: PropTypes.func.isRequired
};
export default Input;

此时，我们就可以更新容器组件，以包含文本输入框，即 Input 展示组件：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Input from "../presentational/Input";
class FormContainer extends Component {
  constructor() {
    super();
    this.state = {
      seo_title: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ [event.target.id]: event.target.value });
  }
  render() {
    const { seo_title } = this.state;
    return (
      <form id="article-form">
        <Input
          text="SEO title"
          label="seo_title"
          type="text"
          id="seo_title"
          value={seo_title}
          handleChange={this.handleChange}
        />
      </form>
    );
  }
}
export default FormContainer;

是时候把所有这些东西联系起来了。

Webpack期望 entry point(入口点)为 ./src/index.js

创建 ./src/index.js，并使用import指令将容器组件引入其中：

1	import FormContainer from "./js/components/container/FormContainer";

有了这个，我们就可以通过运行以下命令来创建我们的包了：

1	npm run build

给Webpack一秒钟，看看bundle(包)就生产了！

bundle(包)将被放入 ./dist/main.js。

现在让我们通过将bundle(包)包含在HTML页面中来实现我们的React实战。

如何使用webpack 4和 Babel 构建 React 应用：HTML webpack插件 (html-webpack-plugin，html-loader)

要显示我们的 React 表单，我们必须告诉 webpack生产一个HTML页面。生产的 bundle(包)将放在 <script></script>标签内。

webpack需要两个额外的组件来处理HTML： html-webpack-plugin 和 html-loader。

通过以下命令添加依赖项：

1	npm i html-webpack-plugin html-loader --save-dev

然后更新webpack配置：

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

接下来./src/index.html中创建一个HTML文件(可以随意使用你喜欢的CSS库)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" >
    <title>How to set up React, Webpack, and Babel</title>
</head>
<body>
    <div class="container">
        <div class="row mt-5">
            <div class="col-md-4 offset-md-1">
                <p>Create a new article</p>
                <div id="create-article-form">
                    <!-- form -->
                </div>
            </div>
        </div>
    </div>
</body>
</html>

还剩下最后一件事！我们必须告诉我们React组件将自己渲染到 <div id="create-article-form"></div>标签中。

打开./src/js/components/container/FormContainer.js并在文件底板添加以下内容：

1 2	const wrapper = document.getElementById("create-article-form"); wrapper ? ReactDOM.render(<FormContainer />, wrapper) : false;

关闭并保存文件。

现在再次运行构建：

1	npm run build

并查看 ./dist 文件夹。你应该看到生成的HTML。

使用webpack，无需在HTML文件中包含你的JavaScript：bundle(包)将自动注入页面。

在浏览器中打开./dist/index.html：你应该可以看到React表单了。

¶How to set up React, webpack, and Babel: webpack dev server

每次更改文件时，你应该不希望每次都需要键入 npm run build来重新构建项目。

只需3行配置即可启动并运行开发服务器。

配置后，webpack将在浏览器中启动你的应用程序。

此外，每次在修改后保存文件时，webpack dev server都会自动刷新浏览器的窗口。

要设置webpack dev server，请先通过以下命令安装包：

1	npm i webpack-dev-server --save-dev

打开 package.json添加启动脚本：

"scripts": {
  "start": "webpack-dev-server --open --mode development",
  "build": "webpack"
}

保存并关闭文件。

现在执行：

npm start

webpack dev server会为每个更新的文件自动刷新浏览器窗口。

webpack dev server

¶How to set up React, webpack, and Babel: wrapping up

React主要用于创建单页面应用程序。但它也可以适用于任何网站。

通过组合webpack 和 Babel，可以将一堆 React组件转换为适合分发的 bundle(包).