在浏览器中直接打开这个文件即可看到我们的hello world程序了，可以从开发工具中看的到，React的确起作用了： 

到目前为止，我们已经实现了React的hello world程序，不过使用browserify命令时后面跟那么多参数，十分的不便，我们考虑将其移至package.json中的scripts中：

"scripts": {
 "bundle": "browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js"
}

配置完成之后，我们就可以安装并使用本地的browserify来打包应用了，并且使用npm的命令来执行：

npm uninstall -g browserify
npm install browserify --save-dev
npm run bundle

以后再改动main.js时，只需执行npm run bundle即可完成转译和打包。

以上介绍了如何编译打包JSX代码，如果在项目实际应用时，上面的操作可能满足不了我们的需求，比如实时监测文件变化自动构建等功能。下面我会使用gulp来搭建一个简易的自动化构建系统，用于将React源代码转译打包和压缩。
首先，我们创建一个react-dev的项目，结构如下： 

这个项目包含一个app目录，里面又包含jsx目录和index.html，然后在jsx目录里我们放置了React的源代码main.jsx文件。
大家也可以看到gulpfile.js和package.json，我们逐一介绍。

首先是package.json，里面列举了我们项目所需的依赖包：

"devDependencies": {
 "babel-preset-react": "^6.5.0",
 "gulp": "^3.9.1",
 "gulp-babel": "^6.1.2",
 "gulp-browserify": "^0.5.1",
 "gulp-connect": "^3.2.2",
 "gulp-rename": "^1.2.2",
 "gulp-uglify": "^1.5.3",
 "react": "^0.14.8",
 "react-dom": "^0.14.8"
 }

这些依赖包负责转译、打包、压缩以及启动Web服务。首先我们需要使用npm install将这些依赖包安装在本地。

然后介绍gulpfile.js，我们在这个构建文件中定义了几个简单的任务：

var gulp = require('gulp');
var babel = require('gulp-babel');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var connect = require('gulp-connect');

//this task is responsible for compiling, bundling, renaming, compressing, and generating the released JS file.
gulp.task('build', function() {
 return gulp.src('app/jsx/*')
   .pipe(babel({
    presets: ['react']
   }))
   .pipe(browserify())
   .pipe(rename('main.min.js'))
   .pipe(uglify())
   .pipe(gulp.dest('app/js'))
});

//this task will watch any change in app/jsx folder and then re-build it.
gulp.task('watch', function() {
 gulp.watch([
 'app/jsx/*'
 ], function() {
 //any changed detected, call build task
 gulp.run('build');
 });
});

//this task will run a server listening at port 8080
gulp.task('server', function() {
 connect.server({
 root: 'app',
 port: 8080,
 livereload: true
 });
});

build任务负责执行一次构建任务，watch任务负责监听jsx目录变化，如有改动则立即再次执行构建任务，server任务负责启动一个服务，在8080端口监听。

最后如果要运行里面的任务，我们需要先在全局安装命令行工具：

npm install --global gulp-cli

然后，在项目当前目录下，执行一个任务：

gulp watch

开启一个新的命令行，启动Web服务：

gulp server

之后在浏览器中输入localhost:8080就可以看到我们的index.html内容了。

感谢各位的阅读！关于“React如何搭建Hello World环境”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。