当React遇到了es6，让gulp来搭桥

前面介绍了如何搭建es6环境来开发，本章将一下React如何用es6来编写代码。

根据前面的基础我们加入react的jsx解析，首先回顾一下前面用到的gulp模块

之前我们安装了gulp，gulp-babel, babel-preset-es2015和gulp-webpack。通过webpack的module.exports和require来导出和导入模块（es6是import和export），大概就这么多。

接着我们继续安装gulp模块来解析react，废话少说，我们来操作命令

npm install --save-dev gulp-react

毋庸置疑，就用这个模块来解析jsx，接下来在gulpfile.js代码中加入以下命令

var config = require("./config.json"),
gulp=require("gulp"),
babel = require("gulp-babel"),
es2015 = require("babel-preset-es2015"),
webpack = require("gulp-webpack"),
react = require("gulp-react");//新加入的模块

var PATH = config.path;
gulp.task("default",function(){
gulp.src(PATH.jsx+"/*.jsx")
.pipe(react())//这里就是新加入的模块, 解析jsx用
.pipe(babel({presets:[es2015]}))//es6tojs的解析器
.pipe(gulp.dest(PATH.js))
.pipe(webpack({//包装代码
output:{
filename:"all.js",
},
stats:{
colors:true
}
}))
.pipe(gulp.dest(PATH.js));
});

这样我们就可以用es6的语法写react了，依旧少废话，上代码

list.jsx es6写法

class List extends React.Component
{
constructor(props){
super(props);
}
render(){
return (
<li>
List {this.props.listno}
</li>
);
}
}

module.exports = List;

list.jsx es5写法

var List =React.createClass(
{
render:function(){
return
<li>
List {this.props.listno}
</li>;
}
});

todolist.jsx es6写法

var List = require("./list");

class TodoList extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h1>Todo List</h1>
<ul>
<List listno="1" />
<List listno="2" />
<List listno="3" />
</ul>
</div>
);
}
}

ReactDOM.render(
<TodoList />,
document.getElementById("containerId")
)

todolist.jsx es5写法

其中的require都需要webpack重新打包即可，否则会出现require is not defined的错误。

html需要加载webpack打包后的js即可（我的是all.js)

<script src="js/all.js"></script>

到此我们可以安心用es6来写react了。一周的前端工程环境在摸索中慢慢地搭建了起来。我们可以专心地为后续开发起个好头了。

React资料

React入门教程 阮一峰：http://www.ruanyifeng.com/blog/2015/03/react.html

React中文网站：http://reactjs.cn/react/docs/getting-started.html

Reac英文网站：http://facebook.github.io/react/docs/getting-started.html