React入门教程：Hello World环境搭建与Gulp自动化构建详解

React入门与Hello World环境搭建

引言

React 是构建用户界面的 JavaScript 库。其主要职责在于构建 UI，常被视作 MVC 架构中的视图层。笔者长期关注 React，近期计划系统深入研习并开展实践操作。

学习语言或框架通常始于 Hello World 程序。本文将演示如何使用 React 编写 Hello World，以了解其编写与运行方式。

入门指南与环境配置

官方文档推荐基于 npm 的方式，笔者亦偏好此法。以下步骤将逐步构建一个简单的 React 应用。

首先创建 react-test 目录，进入后执行“npm install –yes”以生成默认的 package.json 文件。随后创建 main.js 文件存放 React 源代码，结构如下：

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
 <h1>Hello, world!</h1>,
 document.getElementById('example')
);

上述代码利用 require 语法加载 react 和 react-dom 库，并包含 JSX 语法。因此需对该文件进行处理，将源代码转换为浏览器可识别的目标代码。

转换过程涉及 Browserify 工具，官方对其介绍如下：

Browserify 允许在浏览器中通过 bundling 所有依赖项来使用 require('modules')。

简言之，Browserify 负责将依赖库与当前文件打包。例如，依赖 react 和 react-dom 时，经 Browserify 处理后，main.js 与这两个库将被打包至单一文件。首先需安装 Browserify 包，命令如下：

npm install -g browserify

为将 main.js 转换为可用目标文件，需安装相关依赖库，命令如下：

npm install --save-dev react react-dom babelify babel-preset-react

其中 babelify 是 Browserify 的 babel 转换器，babel-preset-react 是针对 React 的 babel 转码规则包。安装这些依赖后，目录结构如图所示：

随后可使用 Browserify 处理及打包 main.js，在当前目录执行以下命令：

browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

执行该命令后，当前目录将生成 bundle.js 文件，如图所示：

获得 bundle.js 后，只需在应用中引入即可。现于当前目录创建 index.html，内容如下：

<html>
 <body>
  <div id="example"></div>
  <script type="text/javascript" src="bundle.js"></script>
 </body>
</html>

直接在浏览器中打开此文件即可看到 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即可完成转译与打包。

基于Gulp的自动化构建系统配置

上述内容介绍了 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 内容。

上述项目已托管至 Github，感兴趣的同学可查阅或克隆至本地尝试。

源码获取

github 地址：https://github.com/scottliu2011/react-dev

本地下载地址：http://xiazai.jb51.net/201707/yuanma/react-dev(jb51.net).rar

使用 gulp 构建前端工程大幅简化了开发流程。大家可在此简易项目基础上针对实际项目进行扩展。若学习 React 过程中产生新的构建需求，笔者亦会及时更新至 Github。

结语

以上就是本文的全部内容，希望本文内容对大家的学习或工作有所助益。如有疑问欢迎留言交流，感谢大家对本站的支持。