React 教程:如何使用 webpack 4 和 Babel 构建 React 应用(2018)

栏目: 编程工具 · 发布时间: 5年前

内容简介:React主要用于单页应用程序。然而,你可以将 React 库集成到任何使用 webpack 和 Babel 构建的网站中。React 不仅限于 SPA 应用。 可以将库集成到任何现有网站中。
React 教程:如何使用 webpack 4 和 Babel 构建 React 应用(2018)

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

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

如何使用 webpack 4 和 Babel 构建 React 应用: 你将学习什么

  1. 如何安装和配置 webpack
  2. 如何安装和配置 Babel
  3. 如何安装 React
  4. 如何按照容器(Container)组件/展示(Presentational)组件的原则创建两个React组件
  5. 如何将生成的包包含到HTML页面中
  6. 如何安装和配置 Webpack Dev Server

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

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

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

您也可以这样做并在几分钟内的拥有一个有效的 webpack 4 – React 环境:这里我为你准备了一个简短的教程。

如何使用 webpack 4 和 Babel 构建 React 应用: 建立项目

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

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

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

mkdir -p src

通过运行来启用项目:

npm init -y

就是这么简单,项目建立完成!

如何使用 webpack 4 和 Babel 构建 React 应用: 设置 webpack

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

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

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

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

npm i webpack --save-dev

您还需要 webpack-cli 。 将其拉入:

npm i webpack-cli --save-dev

接下来在 package.json 中添加 webpack 命令:

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

此时,无需为webpack定义配置文件。

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

从版本4开始不再是这种情况:你可以直接开始开发。

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

如何使用 webpack 4 和 Babel 构建 React 应用: 设置 Babel

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

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

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

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

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

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

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

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

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

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

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

{
  "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 组件了。

让我们来看看下一节。

如何使用 webpack 4 和 Babel 构建 React 应用: 编写 React 组件

如果你对 React 不熟悉,你可以查看 React 教程:2018年学习 React.js 的综合指南 这篇文章,作为你最简入门,这篇文章用实例介绍了 React 中最重要的特性。

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

我建议看看 Dan Abramov 的 容器组件聪明和愚蠢的组件 ,以了解更多信息。

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

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

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

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

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

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

npm i react react-dom --save-dev

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

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

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

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

src/js/components/container/ 中创建组件:

touch src/js/components/container/FormContainer.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/ 中创建一个新组件:

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 包:

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 指令将 容器组件 引入其中:

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

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

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。

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

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 并在文件底部添加以下内容:

const wrapper = document.getElementById("create-article-form");
wrapper ? ReactDOM.render(, wrapper) : false;

关闭并保存文件。

现在再次运行构建:

npm run build

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

使用 webpack ,无需在 HTML 文件中包含您的 Javascript : bundle(包) 将自动注入页面。

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

如何使用 webpack 4 和 Babel 构建 React 应用: webpack dev server

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

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

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

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

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

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

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

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

保存并关闭文件。

关于 npm scripts 可以查看:

现在,通过运行:

npm start

你应该能够看到 webpack 在浏览器中启动你的应用程序。

React 教程:如何使用 webpack 4 和 Babel 构建 React 应用(2018)

Webpack Dev Server将在每次修改文件时自动刷新窗口!

如何使用 webpack 4 和 Babel 构建 React 应用: 小结

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

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

在上面的指南中我们看到:

  1. 如何安装和配置 webpack
  2. 如何安装和配置Babel
  3. 如何安装React
  4. 如何按照容器(Container)组件/展示(Presentational)组件的原则创建两个React组件
  5. 如何将生成的包包含到HTML页面中
  6. 如何安装和配置 Webpack Dev Server

到最后,你应该能够在项目一开始的时候就使用 React,webpack 和 Babel。

有关 webpack 的更多信息,请查看webpack 4 官方文档。

有关 React 的更多信息,请查看React 官方文档。

原文链接: https://www.valentinog.com/blog/react-webpack-babel/#How_to_set_up_React_Webpack_and_Babel_what_you_will_learn


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

匠心体验

匠心体验

[法] 艾米丽·布歇 / 吴 博 / 人民邮电出版社 / 2016-11 / 69.00元

本书针对在智能手机和平板电脑的网站及应用程序设计,详细剖析了移动终端服务的用户体验设计要点,阐述了营造舒适的感官体验、甄选内容及功能、提高用户效率、优化等待时间、合理实施教学、情感设计等方面的设计诀窍,并通过大量实例,呈现当今移动终端服务设计中的亮点与雷区。一起来看看 《匠心体验》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具