React.js Tutorial Part 2

原文地址：http://www.joshfinnie.com/blog/reactjs-tutorial-part-2/

Welcome to part 2 of my tutorial on how to get a website up and running using React.js and Node.js. You can read Part 1 here if you haven't already.

欢迎来到如何使用React.js搭建网站教程的第二部分不，如果你还没有阅读第一部分，戳这里。

In this part of the tutorial, we are going to make our React.js/Express.js app more like a full-fledged web application with the addition of a build system called Gulp.js. Gulp.js is a build system (or task runner) that I have been using for a while. There are many, many, many out there, but I find Gulp.js to be very sufficient for my needs.

这一部分，我们将使用额外的Gulp.js构建工具，搭建一个更加完善的React.js/Express.js应用。Gulp.js是一个我一直在使用的构建工具（任务管理），这里有很多类似的gruntjs, broccoli, webpack等工具，但是最终发现Gulp.js最符合需求。

Installing Gulp

Installing Gulp is very similar as to how we installed Express in the last tutorial, we need to add the --save-dev flag to save gulp to our devDependencies portion of the package.json file. Run:

安装Gulp非常简单，就像上个教程中安装Express一样。使用--save-dev标记将gulp保存到package.json文件的devDependencies部分，运行：

$ npm install --save-dev gulp

Now with Gulp installed, we can create our basic gulpfile.js file:

Gulp安装好之后，我们建立一个gulpfile.js文件：

var gulp = require('gulp');

gulp.task('default', function() {
// place code for your default task here
});

Now we need to install the Gulp packages that we will need to build our application. To start, let's install browserify, reactify and vinyl-source-stream. To install these packages, run the following command:

现在需要为我们的应用安装Gulp包，开始之前，让我们添加browserify，reactify和vinyl-source-stream。运行：

$ npm install --save-dev react browserify reactify vinyl-source-stream

At this point, we can remove react-tools from our devDependencies since we no longer need to build our .jsx files via the command line. Your devDependencies should look like this:

在这时，我们可以从devDependencies中删除react-tools，因为我们不再需要通过命令行手动编译.jsx文件了。

"devDependencies": {
    "browserify": "^8.1.3",
    "gulp": "^3.8.10",
    "react": "^0.12.2",
    "reactify": "^1.0.0",
    "vinyl-source-stream": "^1.0.0"
}

Setting up Gulp

The next step is to set up Gulp to automatically build our .jsx files into usable javascript. To do this, we are going to create a Gulp task. A Gulp task is a function that will stream a bunch of steps transforming our .jsx to javascript. We will need to modify our gulpfile.js to look like this:

下一步就是编写Gulp任务来将.jsx文件自动编译成可用的JavaScript文件。一个Gulp任务就是一个函数，包含编译文件的一系列步骤。我们需要修改gulpfile.js：

var gulp = require('gulp');

var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream');

gulp.task('js', function(){
    browserify('./public/javascripts/src/app.jsx')
        .transform(reactify)
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('public/javascripts/build/'));
});

gulp.task('default', ['js']);

Now running gulp from the command line will trigger the build of our React app; however, there are some things we need to do to our react app first!

现在从命令行中运行gulp就会自动编译我们的React应用。但是，还有一些事情需要做！

Browserifying React

There are some things we need to do to our application before browserify will work. Last tutorial we wrote a helloworld.jsx, now we need to modify this slightly to work with browserify. If you don't know browserify is a tool for compiling node-flavored commonjs modules for the browser. So let's modify our React code to work with browserify.

在browserify可以工作之前需要做一些事情，在上一节中编写了helloworld.jsx，现在我们需要稍微修改一下。browserify是一个工具，可以将node模块编译成浏览器可执行的commonjs模块。

First, we need to create an "entry point" for browersify, we can do this by simply creating an app.jsx file:

首先，我们需要为browersify创建一个入口，建立一个app.jsx文件就可以了：

var React = require('react');
var HelloWorld = require('./HelloWorld.jsx');

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

This file is taking our HelloWorld component and rendering it in the div with id "example". This code is taken from our original helloworld.jsx file from last tutorial. Instead of doing everything in that file, we are now requiring a module HelloWorld and rendering it in app.jsx. The reason for this is that as our application gets more complex, we have more control of how our files are broken out.

这个文件就是一个HelloWorld组件，可以被渲染到id="example"的div标签中，这份代码是直接从上一个教程的helloworld.jsx文章拿到的。但现在不是在一个文件中做所有事情，而是将HelloWorld模块渲染到app.jsx中。

The next thing is that we have is modify our existing helloworld.jsx file to be a React component named HelloWorld.jsx. This is easily done and our HelloWorld.jsx file now looks like this:

下一件事是已有的helloworld.jsx文件修改成React组件，HelloWorld.jsx：

var React = require('react');

module.exports = React.createClass({
render: function() {
    return (
    <h1>Hello, world from a React.js Component!</h1>
    )
}
});

Notice that the HelloWorld.jsx and app.jsx files are combined to be very similar to how the 'helloworld.jsx' looked. Again, the reason for breaking our app into these two files are for future modules to be added.

注意到HelloWorld.jsx和app.jsx文件组合在一起，看起来很像单独的'helloworld.jsx'文件。原因是为了将我们的应用拆分成不同的模块，以便于未来的可扩展性。

Now, running gulp will create a javascript file in public/javascripts/build/ called app.js and it will have everything we need to run our React app. Let's add this to our layout.jade file instead of the react.min.js and helloworld.js files:

现在运行gulp会在public/javascripts/build/目录中新建名为app.js的标准JavaScript文件，我们需要它来运行React应用。让我们添加到layout.jade，替换之前的react.min.js和helloworld.js文件：

doctype html
html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    block content
    script(src='/javascripts/build/app.js')

There you have it, a React application being built with Gulp using browersify!

现在就有了一个使用Gulp自动构建browersify的React应用啦！

Gulp Watch

To make Gulp even better, let's implement the built-in watch functionality to have gulp watch for changes in our .jsx files and automatically build our javascript. To do this, we want to add the following task to our gulpfile.js:

为了更好得使用Gulp，我们可以实现一个内建的watch功能，能够自动监测和编译.jsx文件。添加任务：

gulp.task('watch', function() {
    gulp.watch("public/javascripts/src/**/*.jsx", ["js"])
})

Also add that task to your default Gulp task:

同时将watch任务添加到默认任务中：

gulp.task('default', ['js', 'watch']);

Now when we run gulp it will watch for changes in our .jsx and rebuild our javascript with that change! Awesome!

现在我们可以运行gulp来自动监控.jsx的变化，并且自动重新编译成标准的JavaScript，Awesome！

Next Time

Next time we will continue to use Gulp to build out some more niceties when building a web application, introduce Bower, and finally get to building some of the React Components we will use in our job board.

下一次我们将继续使用Gulp来构建开发web应用时的其他细节，介绍Bower，最终为我们的工作布告栏应用的编写React组件。

{ meta: { tags: [ tutorial, react.js, javascript, node.js, express.js ], post_date: 2015-02-04 } }