当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