这是React和ECMAScript6结合使用系列文章的第一篇。
本文出自从零到壹全栈部落
下面是所有系列文章章节的链接：
| React | JS |
|---|---|
 |  |
自从ReactJS v0.13.0 Beta 1宣布，React 组建可以使用ECMAScript 6 后，它能给我们带来什么好处呢？
ECMAScript6 (或者 ECMAScript 2015)是一个新的标准(它从26.06.2015更新，在2015年定稿，它是现在官方的标准-),它为JavaScript带来了很多新的特性，例如：classes，arrow functions, rest parameters, iterators, generators … 等更多的新特性。
如果你不是特别熟悉ECMAScript 2015的新特性，我将重点推荐你看看这个。
看看ES6的，我们会发现不是所有的浏览器都支持ES2015的新特性。幸运的是，你不需要花时间等所有的浏览器都支持ES2015，现在已经有相关的解决方案。你可以使用transpilers将ES2015的代码转换成ES5。这很类似于在JavaScript中如何将CoffeeScript转换成Coffee code。
是解决方案之一，它真的很神奇的工具。对于作者有太多的感谢。Babel有什么好处呢，Babel支持大量不同的框架，构建系统、测试框架、模板引擎，。
给你一个快速知道babel如何工作的例子。下面就是我们用ECMAScript 6写的例子：
var evenNumbers = numbers.filter((num) => num % 2 === 0);
运行babel以后得到下面的代码：
var evenNumbers = numbers.filter(function (num) { return num % 2 === 0;}); 同样的方法适用于其它ES6代码到ES5代码的转换。
开发环境配置
为了让babel有连续的工作流，我们将使用Gulp。这是基于nodejs的任务构建工具，可以自动改善繁琐的任务。
明显，你需要安装nodejs，如果你没有安装，需要在你系统上安装nodejs。
下一步，你将需要安装全局的
Gulp:npm install --g gulp。创建一个空文件夹，切换到这个文件夹中，在终端输入
npm init初始化你的package.json。运行
npm install --save react react-dom,这将安装react和react-dom到你的node_modules文件夹并且作为依赖库保存到package.json文件中。运行
npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react,这将安装更多的依赖到你的node_modules文件夹。
如果想要了解更多关于step 5中的内容，请移步：
创建 gulpfile.js
在你的根目录下面创建gulpfile.js文件，并将下面的代码拷贝到里面。
var gulp = require('gulp');var browserify = require('browserify');var babelify = require('babelify');var source = require('vinyl-source-stream');gulp.task('build', function () { return browserify({entries: './app.jsx', extensions: ['.jsx'], debug: true}) .transform('babelify', {presets: ['es2015', 'react']}) .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('dist'));});gulp.task('watch', ['build'], function () { gulp.watch('*.jsx', ['build']);});gulp.task('default', ['watch']); 我猜，相关的一些解释将对你有帮助：
Lines 1-4. 我们需要安装node.js modules并且将他们赋值给变量。
Line 6. 我们定义gulp任务名为
build以便我们可以使用gulp build来运行。Line 7. 我们开始描述我们的构建任务将做什么。我们告知Gulp来使用app.jsx。我们打开调试模式，这有利于我们开发调试。
Lines 8-11. 我们应用
Babelify来转换我们的代码。这允许我们将ECMAScript6转换成ECMAScript5。下一步我们将结果输出到dist/bundle.js文件。这几行代码现在使用了Babel 6 中叫做presets的新特性。Lines 14-16. 我们定义一个名字叫做
watch的任务以便我们能够通过gulp watch来运行。无论什么时候jsx文件内容发生变化，这个任务都会重新进行编译。Line 18. 我们定义默认的gulp任务以便我们输入gulp时自动运行，此任务只执行监视任务。
典型的工作流将是在终端输入gulp然后按下enter键。它将连续的监听react组建中代码的变化。
JSX and Babel
你可能已经注意到我们在使用.jsx代替.js语法。JSX是ReactJS团队研发的JavaScript扩展语法。这个格式对于ReactJS的开发更加方便快捷。
这是关于更多的信息。
使用ECMAScript 6编写第一个React 组建
这个时候希望你多一点耐心
在项目的根目录下面，添加一个hello-world.jsx文件，并且在文件中code下面的代码。这是我们用ES6编写的第一个非常简单的React组建。
import React from 'react';class HelloWorld extends React.Component { render() { return Hello from {this.props.phrase}!
; }}export default HelloWorld; 代码解析：
Line 1. 导入React库并且将它存到变量React中。
Lines 3-8. 使用ES6创建继承自
我们添加非常简单的React.Component的类.render方法并且return一个包含phrase属性的<h1>标签。Line 9. 使用
export default HelloWorld将创建的组建导出以便在其它地方能够正常导入使用。
为了便于理解，你也可以将下面ES5代码将上面文件中的代码替换，你会发现下面的代码就是上面代码的变体，上面是ES6，下面是ES5.
import React from 'react';var HelloWorld = React.createClass({ render: function() { return ( Hello from {this.props.phrase}!
); }});export default HelloWorld; 结束了
让我们来结束我们简单的例子。
创建名字为app.jsx的文件。
import HelloWorld from './hello-world';import React from 'react';import ReactDOM from 'react-dom';ReactDOM.render(, document.querySelector('.root'));
这里我们导入上面创建的组建HelloWorld并且将HelloWorld创建了对象并且设置phrase属性。请注意，这里我们使用特殊的库ReactDOM来渲染HelloWorld组建。
下一步，我们来创建index.html.
ReactJS and ES6
现在在终端运行gulp命令(它将创建dist/bundle.js文件)并且在浏览器中打开index.html，运行效果如下：
参考文档
| 扫码申请加入全栈部落 |
|---|
 |