之前我们安装了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