您的位置：首页 > Web前端 > React

使用gulp进行简易react环境搭建(适合写demo用)

2016-11-21 00:00 381 查看
这篇文章主要针对于react环境搭建，至于如何安装Node和gulp，这里就不再赘述了。

首先说一下所需要的包，我最推荐的是 gulp+gulp-reactify（gulp编译reactify的插件）+react-tools（配置gulp-reactify所需要的工具模块）+browser-sync（作为一个小型服务器，主要用他进行更改页面刷新，释放F5）。当然react和react-dom模块是必备的。

文件结构是这样的。



本地引入react.js和react-dom.js。这里个文件在对应的npm包里面的dist文件内。





这里是index.html里面的内容。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/react.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/react-dom.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="example"></div>
<script src="dist/helloWorld.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>

这里Body下面的引入的helloWord.js是已经编译好的。位于dist/helloWorld.js

var HelloWorld = React.createClass({displayName: "HelloWorld",
render: function() {
return React.createElement("div", null, " Hello World...")
}
});

ReactDOM.render( React.createElement(HelloWorld, null) , document.getElementById('example'));

这里是为进行编译的helloWorld.js也就是我们在开始是些的js。位于app/helloWorld.js

var HelloWorld = React.createClass({
render: function() {
return <div> Hello World...</div>
}
});

ReactDOM.render( < HelloWorld /> , document.getElementById('example'));

接下来。我们在编写gulpfile.js（gulp的配置文件）

var gulp = require('gulp')
var gulpReactify = require('gulp-reactify');
var reactTools = require('react-tools');
var browserSync = require('browser-sync').create();

gulp.task('compile', function() {
gulp.src('app/helloWorld.js')
.pipe(gulpReactify({
reactTools: reactTools
}))
.pipe(gulp.dest('dist'))
})

gulp.task('watch', ['compile'], function() {
browserSync.reload();
})

gulp.task('run', ['compile'], function() {
browserSync.init({
port: 8080,
server: {
baseDir: "./"
}
})
gulp.watch("app/helloWorld.js", function(event) {
gulp.src(event.path)
.pipe(gulpReactify({
reactTools: reactTools
}))
.pipe(gulp.dest('dist'))

browserSync.reload();
})
})

最后，我们在命令行中输入gulp run,会启动服务，进行编译，并且自动打开index.html。就可以看到Hello World...啦。在app/helloWorld.js中更改下输出的内容。浏览器会自动刷新，展示出新的内容。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航