这篇文章主要针对于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里面的内容。

这里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 
    
      Hello World...
    
 	}});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中更改下输出的内容。浏览器会自动刷新，展示出新的内容。