译:使用 Webpack & Babel 搭建 React ES6 开发条件

网上对此 React
的有关课程习以为常,官方文书档案也对内部的技艺核心做出了富饶的诠释,只是不那么简单易懂。但有了那篇译文,我们得以从最简便易行的组件开始,通过对
Babel、Webpack 的问询与实践,来搭建最简单易行的 React 开发环境。

ReactJS 从出生以来,一向引领着前端技术的神速发展。正如其官网所说,React
作为专注于 MVC 架构中 View 层的前端库,允许大家营造可选择的 UI
组件,并透过架空 DOM 来维护数据状态的扭转。结合前端能源加载/打包工具
Webpack,React 大大简化了构建和掩护单页应用程序的进度。

推特(Twitter)(TWT福睿斯.US) 做了多量的办事使 React 保持生机,包含及时使它与 ECMAScript
6(ES6)标准(JavaScript
语言的3遍重庆大学立异)的新职能包容。不幸的是,浏览器对 ES6
的支撑并不像许两个人所希望的那么广泛,由此也就应运而生了 Babel
那样实用的工具。Babel 允许大家编辑符合 ES6 标准的 JavaScript
文件并将其编译为能够运作在旧 JavaScript 环境的正规 ES5 代码。

在那篇作品中,大家将尝试编写多少个符合ES6 标准的大旨 React
组件。当中需求利用
Babel 将代码编译为 ES5 代码并应用 Webpack 将源代码打包。
那个进度会很风趣的,因为将 React、ES六 、Babel 和 Webpack
搭配起来的付出体验真正很棒。

选择构建筑工程具搭建运维环境

在大家正式初阶编写制定代码在此以前,首先有限支撑大家的处理器上是还是不是曾经设置了 NodeJS 和
npm,因为我们将应用这个来安装须求的软件包。

安装达成后打开终端,使用简便的极端命令跳转到我们的新品类目录下并输入如下命令:

npm init

在接下去终端的唤起中填入大家觉得合适的始末(译者注:默许一向回车即可),将会转变1个package.json 文件。那几个文件将同意大家记录项目必要的有所 node
模块以供参考。

当今大家来安装 React 和 React DOM:

npm install --save react
npm install --save react-dom

咱俩还索要安装 webpack 和 webpack-dev-server 来打包并运营打包后的
JavaScript 应用程序。那时大概须要选取“sudo”权限来将 webpack-dev-server
安装到全局环境。

npm install --save-dev webpack
npm install webpack-dev-server -g

后天我们须要的模块已经安装好了,我们须求2个用来分析 ES6
代码的编写翻译器,也就到了 Babel 上场的天天。大家来设置将用于 Webpack 的
babel-loader 和 babel-core 模块,以及 babel-preset-es2014 和用于加载
React 代码的babel-preset-react 模块。

npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

成立第二个 React 组件

React
使用组件来封装界面模块。大家能够编写组件来处理数据的外观并机关呈现状态数据变动后的样子。创立组件时,大家需求经过重载
React.Component 的 render 函数来定义每三个零部件。

于今编写我们的率先个零部件来实施这么些定义,这几个组件的结尾指标是能在浏览器中显示“Hello”那些单词。

因此编辑器在档次中新建贰个“hello.jsx”文件并写下如下代码:

import React from 'react';

class Hello extends React.Component {
  render () {
    return <h1>Hello</h1>
  }
}

有关以上代码的语法大家有几件事要求小心。首先,我们有 ES6 的 import
语句和类定义语句,那使得大家的代码更简短,无需调用
React.createClass。第①,在组件定义的 render 函数中有一个时髦的内联 HTML
的东西,那一个看似 XML 的语法称为 JSX。JSX 被规划来使 React
组件的创设更便于,其简介、纯熟的语法用于定义具有属性的 DOM 树结构。

那么些新的语法或者看起来有点奇怪,但是不要顾虑,因为大家只供给有个别使用
babel,便能将 ES6 语法和 JSX 语法都转换来能够在浏览器中运作的 ES5
JavaScript。

倘若在 React 中不使用 ES6 和 JSX 语法,我们的“Hello” 组件将会是如此的:

var React = require('react');

var Hello = React.createClass({displayName: 'Hello',
  render: function() {
    return React.createElement("h1", null, "Hello ");
  }
});

当大家利用 JSX 时,大家得以更简单地定义大家的虚拟DOM成分,而无需调用
React.createElement 并传递成分应拥有的习性。使用 JSX
并不一定能使大家以此大致的“Hello”组件剩去有点代码行数,但在大家塑造组件并将它们组成在联名时,JSX会使工作变得越来越便于。

今昔我们有了叁个组件类,大家要求扩展部分代码使组件能“mount”到一个 DOM
成分。那将会使我们的 React 组件显示到 HTML 页面包车型大巴因素中。为此大家导入
react-dom 模块并调用其 render
函数,传入组件对象以及该零件要绑定的莫过于DOM成分。

重复打开“hello.jsx”并添加以下行(第一行和后三行):

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

ReactDOM.render(
    <Hello/>, 
    document.getElementById('hello')
);

现行我们来成立大家的第二个零部件,用来渲染“World”那么些单词。在此时此刻项目根目录下开创三个新的“world.jsx”文件并投入填写代码。请小心,它与大家为率先个零件编写的代码卓殊相像:

import React from 'react';
import ReactDOM from 'react-dom';

class World extends React.Component {
  render() {
    return <h1>World</h1>
  }
}

ReactDOM.render(
    <World/>,
    document.getElementById('world')
);

今昔大家有了俩个 React
组件,可是还一向不地方可以使用它们。我们未来来由此编写制定3个大概的 HTML
页面来解决那几个题材,这些 HTML
页面将为我们要渲染到页面上的各类组件分配1个<div>。制造三个“index.html”文件并编辑相应的骨子:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="hello"></div>
    <div id="world"></div>
  </body>
</html>

我们今后创办了能在浏览器中展现“Hello World”的享有 React
组件代码。能让代码最后运转的最终一步必要经过 Webpack 来落成。

翻译注:此时的体系目录

采纳 Webpack 打包源代码

Webpack 作为模块加载/打包器能够拍卖很多能源,诸如使 CSS 文件、图像或是
JavaScript
文件等多量借助关系的财富转换为能够提供给客户端网页的始末。Webpack
通过我们在类型布局文件中钦赐的装载程序来处理相应的能源。在大家的例证中,我们期待将
JSX 转换为 JavaScript 并将 ES6 代码转换为契合浏览器的 ES5
代码。大家得以经过提供1个 JavaScript 文件作为 Webpack
实行操作的入口点。Webpack
将分析此文件以及代码中采用的有所继续信赖关系,以生成3个包以供最终的
HTML 页面包蕴。要告诉 Webpack 有关项目中用到的 React
组件,大家要求做的正是导入这一个 JavaScript 文件到进口文件中。

在文件编辑器中开创三个“main.js”文件,并添加以下代码来导入大家构建的多少个React 组件:

import Hello from './hello.jsx';
import World from './world.jsx';

接下去大家要求告诉 Webpack
那个文件是大家的输入文件,以便大家在卷入时能让 Webpack
定位到。我们那里只用到了 贝布el
的加载器,但只要大家有此外的借助关系,大家还是能运用任何加载器来促成如
CoffeeScript 和 SASS 文件的拍卖。

再也运行大家的文件编辑器,创建贰个名为“webpack.config.js”的新文件,并加上以下配置:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015',  'react']
        }
      }
    ]
  },
};

最终,大家需求对大家的 index.html 举行3个小的改动,以富含在运作 Webpack
dev服务器时将转移的“bundle.js”文件:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="hello"></div>
    <div id="world"></div>
    <script src="bundle.js"></script>
  </body>
</html>

让我们运维 Webpack dev
服务器,看看我们的页面上的组件是还是不是真的能表现出来:

webpack-dev-server --progress --colors

当在终极输入指令后打响跑起来时,Webpack 成功打包了作者们的零件代码。将来Webpack dev 服务器正在运作,我们能够浏览浏览器中的 http://
localhost:8080/webpack-dev-server(译者注:译者的处理器上是 http://
localhost:8081,具体意况请看终端),以便在页面上看看我们的“Hello
World”React 应用程序。

接下去该干吗?

大家正好仅仅经过应用能分析 JSX 和 ES6 的 Babel 营造了三个 React
组件,并利用 Webpack
将它们打包在一块儿就此得以在浏览器跑起来。那或许看起来并不是很难,不过在构建更大的单页应用程序的征途上是贰个稳步的开首。大家今日一度克制了一大堆的阻力使这一个新技巧能有机的结合在协同,我们到底得以用
React 初步构建出令人敬畏的事物了。

如果你想深刻探索并塑造实际的 React
应用程序,您能够在博客小说中查阅本人近年写的关于“动用 React 创造3个依照Twilio REST API
来监督电话的仪表盘
”(译者注:可能以往会再翻译一下那篇小说)。

您能够每一日沟通自个儿来享受你的经验或提议任何难题。