这是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支持大量不同的框架，构建系统、测试框架、模板引擎，看这里。
给你一个快速知道babel如何工作的例子。下面就是我们用ECMAScript 6写的例子：
var evenNumbers = numbers.filter((num) => num % 2 === 0);
运行babel以后得到下面的代码：
var evenNumbers = numbers.filter(function (num) {
return num % 2 === 0;
});
开发环境配置
为了让babel有连续的工作流，我们将使用Gulp。这是基于nodejs的任务构建工具，可以自动改善繁琐的任务。
明显，你需要安装nodejs，如果你没有安装，需要在你系统上安装nodejs。
下一步，你将需要安装全局的
Gulp:npm install --g gulp。运行
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中的内容，请移步：my article about Browserify,Babelify and ES6
创建 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的开发更加方便快捷。
这是关于JSX更多的信息。
使用ECMAScript 6编写第一个React 组建
这个时候希望你多一点耐心
在项目的根目录下面，添加一个hello-world.jsx文件，并且在文件中code下面的代码。这是我们用ES6编写的第一个非常简单的React组建。
import React from 'react';
class HelloWorld extends React.Component {
render() {
return <h1>Hello from {this.props.phrase}!</h1>;
}
}
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 (
<h1>Hello from {this.props.phrase}!</h1>
);
}
});
export default HelloWorld;
结束了
让我们来结束我们简单的例子。
创建名字为app.jsx的文件。
import HelloWorld from './hello-world';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<HelloWorld phrase="ES6"/>,document.querySelector('.root')
);
这里我们导入上面创建的组建HelloWorld并且将HelloWorld创建了对象并且设置phrase属性。请注意，这里我们使用特殊的库ReactDOM来渲染HelloWorld组建。
下一步，我们来创建index.html.
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title>ReactJS and ES6</title>
</head>
<body>
<div class="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
现在在终端运行gulp命令(它将创建dist/bundle.js文件)并且在浏览器中打开index.html，运行效果如下：
参考文档
| 扫码申请加入全栈部落 |
|---|
