网上对于 React 的相关教程层出不穷，官方文档也对其中的技术要点做出了充足的解释，只是不那么简洁易懂。但有了这篇译文，我们可以从最简单的组件开始，通过对 Babel、Webpack 的了解与实践，来搭建最简单的 React 开发环境。

• 原文地址：Setting up React for ES6 with Webpack and Babel
• 原文作者：Sam Agnew
• 译者：韩亦乐
• 校审：韩亦乐
• 转载请注明以上信息

ReactJS 从诞生以来，一直引领着前端技术的飞速发展。正如其官网所说，React 作为专注于 MVC 架构中 View 层的前端库，允许我们构建可重用的 UI 组件，并通过抽象 DOM 来维护数据状态的变化。结合前端资源加载/打包工具 Webpack，React 大大简化了构建和维护单页应用程序的过程。

Facebook 做了大量的工作使 React 保持活力，包括及时使它与 ECMAScript 6（ES6）标准（JavaScript 语言的一次重大更新）的新功能兼容。不幸的是，浏览器对 ES6 的支持并不像许多人所希望的那样广泛，因此也就出现了 Babel 这样实用的工具。Babel 允许我们编写符合 ES6 标准的 JavaScript 文件并将其编译为可以运行在旧 JavaScript 环境的标准 ES5 代码。

在这篇文章中，我们将尝试编写两个符合ES6 标准的基本 React 组件。其中需要使用
Babel 将代码编译为 ES5 代码并使用 Webpack 将源代码打包。 这个过程会很有趣的，因为将 React、ES6、Babel 和 Webpack 搭配起来的开发体验真的很棒。

使用构建工具搭建运行环境

在我们正式开始编写代码之前，首先确保我们的电脑上是否已经安装了 NodeJS 和 npm，因为我们将使用这些来安装需要的软件包。

安装完成后打开终端，使用简单的终端命令跳转到我们的新项目目录下并输入如下命令：

npm init

在接下来终端的提示中填写我们觉得合适的内容（译者注：默认一直回车即可），将会生成一个 package.json 文件。这个文件将允许我们记录项目需要的所有 node 模块以供参考。

现在我们来安装 React 和 React DOM：

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