使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用

前端

作者： Sahat Yalkabov

Source： sahatyalkabov.com

摘要：在这个教程里，我们将为EVE Online游戏创建一个角色投票应用（受Facemash的启发），EVE是一个大型多人在线游戏。在本教程里你将学习到如何使用Node.js构建一个REST API、使用MongoDB保存和检索数据、使用Socket.IO跟踪在线的访问者，以及使用React + Flux和服务端渲染来构建单页面应用，最后将应用部署到云端。

概述

在这个教程里我们将为EVE Online游戏创建一个角色投票应用（受Facemash的启发），EVE是一个大型多人在线游戏。请点击播放下面美妙的音乐，来进入本教程的学习氛围当中。

【audio：EVE Online - Kronos (2014) Release Theme】

当你听着这首音乐时，想象你正身处宇宙深空的某个小行星带，一边从小行星中挖取稀有矿物，一边警戒着雷达上随时可能出现的宇宙海盗，同时，你还正在研究太空站推进系统的设计图，为你的宇宙舰队制造零件，并在完全由玩家需求和供给控制的交易系统下达买卖指令，另外还从遥远星系赶来的大型宇宙货船上卸货。在你的战舰旁边，是装有微型曲速装置的超高速截击机，和武装到牙齿的战斗飞船，它们也都属于你。在这场自由的游戏中，你可以计算如何从行星最优化的萃取矿物，也可以投身一场有数千玩家参与的大型宇宙会战。——这就是EVE Online。

在EVE Online中每个玩家都有一个3D形象以代表他们的角色，我们要开发的这个应用就是来为这些角色形象投票，以选出它们中最好看的。不管怎样，你的目标是学习Node.js和React，而不是EVE Online。但我想说的是：“在一个教程里，趣味即使不是最重要的，也至少和教程的主要目的同样重要。”我之前创建New Eden Faces的唯一目的是学习Backbone.js，我创建TV Show Tracker的目的是为了学习AngularJS。这些日子以来，貌似大家都开始用一个简单的TODO应用来当做教程项目，但对我来说，上面这些项目的任何一个，都比一个简单的TODO应用要有趣得多。

编写这些教程，我所学到的就是，无论是录屏、书籍还是视频教程，在学习一项新技术时，没有什么比创建一个让你有激情的小项目更高效的了。

项目完整源代码： https://github.com/sahat/newedenfaces-react

基于和我之前教程同样的精神（TV Show Tracker和Instagram Clone），本教程将是一篇全栈的JavaScript教程，我们将从零开始构建一个完整的应用。

注意：这个项目是对我之前New Eden Faces项目的重制，那是我使用Backbone.js编写的第一个单页面应用。它已经在OpenShift上基于Node.js 0.8.x稳定的运行两年多了。

对于特定主题，我一般尝试做尽量少的假设（如假设读者拥有Node.js基础之类），这也是为什么我的教程都是如此之长。不过即便如此，你至少也需要有一些客户端JavaScript框架和Node.js的经验，才能从这个教程中得到最大的收获。

在开始之前，你需要下载并安装下列工具：

1. Node.js，或io.js
2. Bower
3. MongoDB
4. gulp
5. nodemon

第一步：新建Express项目

创建一个新目录newedenfaces，进入目录并创建两个空文件 package.json和server.js：

注：我的OS X终端使用了Monokai主题和oh-my-fish框架以提供Fish shell.

打开package.json并粘贴下面的代码：

{
  "name": "newedenfaces",
  "description": "Character voting app for EVE Online",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/sahat/newedenfaces-react"
  },
  "main": "server.js",
  "scripts": {
    "start": "babel-node server.js",
    "watch": "nodemon --exec babel-node -- server.js"
  },
  "dependencies": {
    "alt": "^0.17.1",
    "async": "^1.4.0",
    "babel": "^5.6.23",
    "body-parser": "^1.13.2",
    "colors": "^1.1.2",
    "compression": "^1.5.1",
    "express": "^4.13.1",
    "mongoose": "^4.0.7",
    "morgan": "^1.6.1",
    "react": "^0.13.3",
    "react-router": "^0.13.3",
    "request": "^2.58.0",
    "serve-favicon": "^2.3.0",
    "socket.io": "^1.3.6",
    "swig": "^1.4.2",
    "underscore": "^1.8.3",
    "xml2js": "^0.4.9"
  },
  "devDependencies": {
    "babelify": "^6.1.3",
    "bower": "^1.4.1",
    "browserify": "^11.0.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-if": "^1.2.5",
    "gulp-less": "^3.0.3",
    "gulp-plumber": "^1.0.1",
    "gulp-streamify": "0.0.5",
    "gulp-uglify": "^1.2.0",
    "gulp-util": "^3.0.6",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.3.0"
  },
  "license": "MIT"
}

这是我们的应用所需要的所有依赖包，简要介绍如下：

在终端输入npm install安装依赖。

如果你使用Windows，可以使用cmder控制台模拟器，可以达到接近OS X/Linux终端的效果。

打开server.js粘贴下面代码，下面是最基础的Express应用，足够我们开始了。

var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');
var app = express();
app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));
app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

注意：尽管我们将使用ES6编写React app，但在这儿我还是决定使用ES5，因为这段代码从两年前到现在基本没有变过。并且，如果你第一次使用ES6，至少这个Express app对你来说还算熟悉。

然后，新建文件夹public，这里是我们放文件如图片、字体，以及压缩后的CSS和JS文件。

现在你可以在终端输入npm start启动应用，确保Express app没有问题。

注意：你现在可以使用node server.js来直接启动应用，但之后我们将使用Babel来预编译文件，也就是说你需要运行babel-node server.js来启动应用。

现在你应该可以看到终端输出“Express server listening on port 3000.”

第二步 构建系统

如果你经常参与web社区，那么你应该听说过Browserify和Webpack工具。如果不使用它们，你将面临手动的在HTML输入很多<script>标签，并且需要将JS代码放到合适的地方。

并且，我们还不能直接在浏览器使用ES6，在将代码提供给用户之前，我们需要用Babel将它们转换为ES5代码。

我们将使用Gulp和Browserify而不用Webpack。我并不认为它们两个谁优谁劣，但我想说Gulp+Browserify比等价的Webpack文件要直观多了，我还没有在任何React boilerplate项目中看到一个易于理解的webpack.config.js文件。

创建文件gulpfile.js并粘贴下面的代码：

var gulp = require('gulp');
var gutil = require('gulp-util');
var gulpif = require('gulp-if');
var streamify = require('gulp-streamify');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var less = require('gulp-less');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var browserify = require('browserify');
var watchify = require('watchify');
var uglify = require('gulp-uglify');
var production = process.env.NODE_ENV === 'production';
var dependencies = [
  'alt',
  'react',
  'react-router',
  'underscore'
];
/*
 |--------------------------------------------------------------------------
 | Combine all JS libraries into a single file for fewer HTTP requests.
 |--------------------------------------------------------------------------
 */
gulp.task('vendor', function() {
  return gulp.src([
    'bower_components/jquery/dist/jquery.js',
    'bower_components/bootstrap/dist/js/bootstrap.js',
    'bower_components/magnific-popup/dist/jquery.magnific-popup.js',
    'bower_components/toastr/toastr.js'
  ]).pipe(concat('vendor.js'))
    .pipe(gulpif(production, uglify({ mangle: false })))
    .pipe(gulp.dest('public/js'));
});
/*
 |--------------------------------------------------------------------------
 | Compile third-party dependencies separately for faster performance.
 |--------------------------------------------------------------------------
 */
gulp.task('browserify-vendor', function() {
  return browserify()
    .require(dependencies)
    .bundle()
    .pipe(source('vendor.bundle.js'))
    .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
    .pipe(gulp.dest('public/js'));
});
/*
 |--------------------------------------------------------------------------
 | Compile only project files, excluding all third-party dependencies.
 |--------------------------------------------------------------------------
 */
gulp.task('browserify', ['browserify-vendor'], function() {
  return browserify('app/main.js')
    .external(dependencies)
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
    .pipe(gulp.dest('public/js'));
});
/*
 |--------------------------------------------------------------------------
 | Same as browserify task, but will also watch for changes and re-compile.
 |--------------------------------------------------------------------------
 */
gulp.task('browserify-watch', ['browserify-vendor'], function() {
  var bundler = watchify(browserify('app/main.js', watchify.args));
  bundler.external(dependencies);
  bundler.transform(babelify);
  bundler.on('update', rebundle);
  return rebundle();
  function rebundle() {
    var start = Date.now();
    return bundler.bundle()
      .on('error', function(err) {
        gutil.log(gutil.colors.red(err.toString()));
      })
      .on('end', function() {
        gutil.log(gutil.colors.green('Finished rebundling in', (Date.now() - start) + 'ms.'));
      })
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('public/js/'));
  }
});
/*
 |--------------------------------------------------------------------------
 | Compile LESS stylesheets.
 |--------------------------------------------------------------------------
 */
gulp.task('styles', function() {
  return gulp.src('app/stylesheets/main.less')
    .pipe(plumber())
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(gulpif(production, cssmin()))
    .pipe(gulp.dest('public/css'));
});
gulp.task('watch', function() {
  gulp.watch('app/stylesheets/**/*.less', ['styles']);
});
gulp.task('default', ['styles', 'vendor', 'browserify-watch', 'watch']);
gulp.task('build', ['styles', 'vendor', 'browserify']);

如果你从未使用过Gulp，这里有一个很棒的教程《An Introduction to Gulp.js》

下面简单介绍一下每个Gulp任务是干嘛的。

下面，我们将注意力转移到项目结构上，我们将创建gulpfile.js需要的文件和文件夹。

第三步：项目结构

在public目录下创建四个目录：css，js，fonts，img。然后，下载这个favicon.png，也把它放到这里。

在项目根目录，创建新目录app。

然后在app文件夹里新建四个目录：actions，components，stores，stylesheets，以及三个空文件alt.js，routes.js和main.js。

在stylesheets目录下新建文件main.less，我们将在里面填入样式。

回到根目录，创建新文件bower.json并粘贴下面的代码：

{
  "name": "newedenfaces",
  "dependencies": {
    "jquery": "^2.1.4",
    "bootstrap": "^3.3.5",
    "magnific-popup": "^1.0.0",
    "toastr": "^2.1.1"
  }
}

注意：Bower是一个让你轻松下载JavaScript库的前端包管理器，通过命令行即可下载上面的库。

在终端运行bower install然后等待包下载并安装到bower_components目录。你能在.bowerrc文件改变该路径，不过本教程我们使用默认设置。

和node_modules相似，你可能不想将bower_components提交到Git仓库，但如果你不提交的话，当你部署应用的时候如何下载这些文件？我们将在教程的部署部分来解决这个问题。

复制bower_components/bootstrap/fonts下所有的字体图标（glyphicons fonts）到public/fonts目录。

下载并解压下面的背景图片到public/img目录。

• Background Images.zip

有趣事实：三年前我使用Adobe Photoshop来创建高斯模糊效果，但它们今天能轻松的使用CSS滤镜实现。

打开main.less并粘贴下面的文件中的代码。鉴于代码的长度，我决定不将它放在文中。

• main.less

如果你以前用过Bootstrap CSS框架，那么你应该对里面的大部分代码都感到熟悉。

注意：我花了很长时间在这个UI上，调整fonts和颜色，添加精细的变换效果，如果你有时间的话，推荐在完成本教程之后继续探索一下样式的细节。

我不知道你是否知道最近的趋势，是将样式直接放入React组件当中，但我不太确定我是否喜欢这项实践，也许当相关的工具完善之后我会喜欢吧，但在那之前我还是会使用附加的样式表文件。不过，如果你对使用模块化的CSS感兴趣，可以看看这个css-modulesify项目。

在我们开始构建React app之前，我决定先花三个章节的时间讲讲ES6、React、Flux基础，否则要想一下子全部学会它们会让人很崩溃。对我个人来说，我曾花了不少时间理解某些用ES6编写的React + Flux示例代码上，因为我相当于同时学习一个新语法、一个新框架，以及一个全新的应用架构。

由于三者的内容众多，显然我不能在一篇文章中全讲清楚，我将会只讲那些本教程中会用到的主题。

第四步： ES6速成教程

最好的学习ES6的方法，是为每一个ES6示例提供一个等价的ES5实现。外面已经有不少介绍ES6的文章，本文将只讲其中一些。

Modules(Import)

// ES6
import React from 'react';
import {Route, DefaultRoute, NotFoundRoute} from 'react-router';
// ES5
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var NotFoundRoute = Router.NotFoundRoute;

使用ES6中的解构赋值（destructuring assignment），我们能导入模块的子集，这对于像react-router和underscore这样不止输出一个函数的模块尤其有用。

需要注意的是ES6 import的优先级很高，所有的依赖模块都会在模块代码执行之前加载，也就是说，你无法像在CommonJS一样有条件的加载模块。之前我尝试在一个if-else条件里import模块，结果失败了。

想了解import的更多细节，可访问它的MDN页面。

Modules(Export)

// ES6
function Add(x) {
  return x + x;
}
export default Add;
// ES5
function Add(x) {
  return x + x;
}
module.exports = Add;

想学习ES6模块的更多细节，这里有两篇文章ECMAScript 6 modules和Understanding ES6 Modules。

Classes

ES6 class只不过是现有的基于原型继承机制的一层语法糖，了解这个事实之后，class关键字对你来说就不再像一个其它语言的概念了。

// ES6
class Box {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }
  calculateArea() {
    return this.length * this.width;
  }
}
let box = new Box(2, 2);
box.calculateArea(); // 4
// ES5
function Box(length, width) {
  this.length = length;
  this.width = width;
}
Box.prototype.calculateArea = function() {
  return this.length * this.width;
}
var box = new Box(2, 2);
box.calculateArea(); // 4

另外，ES6中还可以用extends关键字来创建子类。

class MyComponent extends React.Component {
  // Now MyComponent class contains all React component methods
  // such as componentDidMount(), render() and etc.
}

了解ES6 class更多信息可查看Classes in ECMAScript 6这篇博文。

JS var与let

这两个关键字唯一的区别是，var的作用域在最近的函数块中，而let的作用域在最近的块语句中——它可以是一个函数、一个for循环，或者一个if语句块。

这里有个很好的示例，来自MDN：

var a = 5;
var b = 10;
if (a === 5) {
  let a = 4; // The scope is inside the if-block
  var b = 1; // The scope is inside the function
  console.log(a);  // 4
  console.log(b);  // 1
}
console.log(a); // 5
console.log(b); // 1

一般来说，let是块作用域，var是函数作用域。

箭头函数(=> fat arrow)

一个箭头函数表达式与函数表达式相比有更简短的语法，以及从语法上绑定了this值。

// ES6
[1, 2, 3].map(n => n * 2); // [2, 4, 6]
// ES5
[1, 2, 3].map(function(n) { return n * 2; }); // [2, 4, 6]

注意：如果参数只有一个，圆括号是可选的，到底是否强制使用取决于你，不过有些人认为去掉括号是坏的实践，有些人则无所谓。

除了更短的语法，箭头函数还有什么用途呢？

考虑下面这个示例，它来自于我将这个项目转换为使用ES6之前的代码：

$.ajax({ type: 'POST', url: '/api/characters', data: { name: name, gender: gender } })
  .done(function(data) {
    this.setState({ helpBlock: data.message });
  }.bind(this))
  .fail(function(jqXhr) {
    this.setState({ helpBlock: jqXhr.responseJSON.message });
  }.bind(this))
  .always(function() {
    this.setState({ name: '', gender: '' });
  }.bind(this));

上面的每个函数都创建了自己的this作用域，不绑定外层this的话我们是无法在示例中调用this.setState的，因为函数作用域的this一般是undefined。

当然，它有绕过的方法，比如将this赋值给一个变量，比如var self = this，然后在闭包里用self.setState代替this.setState即可。

而使用等价的ES6代码的话，我们没有必要如此麻烦：

$.ajax({ type: 'POST', url: '/api/characters', data: { name: name, gender: gender } })
  .done((data) => {
    this.setState({ helpBlock: data.message });
  })
  .fail((jqXhr) => {
    this.setState({ helpBlock: jqXhr.responseJSON.message });
  })
  .always(() => {
    this.setState({ name: '', gender: '' });
  });

ES6的讲解就到此为止了，下面让我们看看React，到底是什么让它如此特殊。

第五步： React速成教程

React是一个用于构建UI的JS库。你可以说它的竞争对手有AngularJS，Ember.js，Backbone和Polymer，尽管React专注的领域要小得多。React仅仅是MVC架构中的V，即视图层。

那么，React有什么特殊的呢？

React的组件使用特定的声明式样式书写，不像jQuery或其它传统JS库，你不与DOM直接交互。当背后的数据改变时，React接管所有的UI更新。

React还非常快，这归功于Virtual DOM和幕后的diff算法。当数据改变时，React计算所需要操作的最少的DOM，然后高效的重新渲染组件。比如，如果页面上有10000个已经渲染的元素，但只有一个元素改变，React将仅仅更新其中一个DOM，这是React为何能高效的重新渲染整个组件的原因。

React其它令人瞩目的特性包括：

• 可组合性。小的组件可以组合成大的、复杂的组件。
• 相对易于学习。需要学习的并不多，并且它不像AngularJS或Ember.js那样有庞大的文档。
• 服务端渲染。让我们能轻松的构建同型JS应用(Isomorphic JavaScript apps)。
• 最有帮助的错误和警告提示，是我从未在其它JS库中见到过的。
• 组件是自包含的。标记、行为（甚至样式）都在同一个地方，让组件非常易于重用。

我非常喜欢React v0.14 Beta 1发布中的这段话，讲了React到底是什么：

现在我们已经清楚，React的美妙和本质与浏览器或DOM无关，我们认为React的真正基础是关于组件和元素的质朴想法：用声明式的方式来描述任何你想渲染的东西。

在进入下一步之前，推荐你先观看这个了不起的视频React in 7 Minutes，它的作者是John Lindquist，推荐你订阅PRO以获得更多的视频教程。

另外，也可以考虑Udemy上的这个广受好评的教程——Build Web Apps with React JS and Flux，作者是Stephen Grider。它包含超过71个视频和10小时以上的内容，涵盖了React，Flux，React Router，Firebase，Imgur API和其它。

当学习React时，我最大的挑战是使用完全不同的思考方式去构建UI。这也是为什么你必须阅读Thinking in React（中文版）这个官方指南的原因。

和Thinking in React中的产品列表风格类似，如果我们将New Eden Faces UI分开为潜在的组件，它将会是这样：

注意：每个组件都应该坚持单一职责原则，如果你发现你的组件做的事情太多，也许最好将它分成子组件。不过话虽如此，我首先还是编写了一个典型的的单块组件，当它能够工作后，然后将它重构为小的子组件。

在我们的项目中，顶级App组件包含Navbar，Homepage和Footer组件，Homepage组件包含两个Character组件。

所以，无论何时你想到一个UI设计，从将它分解为不同的组件开始，并且永远考虑你的数据如何在父-子、子-父以及同胞组件间传递，否则你会遇到这样的时刻：“WTF，这个到底在React里怎么实现的？这个用jQuery实现起来简单多了……”

所以，下次你决定用React构建一个新app时，在写代码之前，先画一个这样的层次大纲图。它帮你视觉化多个组件间的关系，并可以照着它来构建组件。

React中所有的组件都有render()方法，它总是返回一个单一的子元素。因此，下面的返回语句是错误的，因为它返回了3个子元素。

render() {
  // Invalid JSX,
  return (
    <li>Achura</li>
    <li>Civire</li>
    <li>Deteis</li>
  );
}

上面的HTML标记叫做JSX。它的语法和HTML仅有些微的不同，比如用className代替class，在我们开始开发应用的时候你将会学到它的更多内容。

当我第一眼看到这样的语法，我的第一反应就是拒绝，在JavaScript中我习惯返回布尔值、数字、字符串、对象以及函数，但绝不是这种东西。但是，JSX不过是一个语法糖。使用一个<ul>标签包裹上面的返回内容后，下面是不使用JSX时的模样：

render() {
  return React.createElement('ul', null,
    React.createElement('li', null, 'Achura'),
    React.createElement('li', null, 'Civire'),
    React.createElement('li', null, 'Deteis')
  );
}

我相信你会同意JSX远比普通的JavaScript的可读性更好，另外，Babel对JSX有内建支持，所以我们无需做任何额外的事情即可解析它。如果你用过AngularJS中的指令（directive）那么你将会欣赏React的做法，这样你就不必同时处理两个文件——directive.js（负责逻辑）和template.html（负责展现），你可以在同一个文件里同时处理逻辑和展现了。

React中的componentDidMount方法和jQuery中的$(document).ready非常相似，这个方法仅在组件第一次渲染后运行一次（只在客户端运行），这里经常用于初始化第三方库和jQuery插件，或者连接到Socket.IO。

在render方法中，你将经常使用三元运算符：当数据为空时隐藏元素、根据条件注入CSS类名、根据组件的状态切换元素的展示等等。

比如下面的例子展示如果根据props值作为条件将CSS类名设为text-danger或text-success：

render() {
  let delta = this.props.delta ? (
    <strong className={this.props.delta > 0 ? 'text-success' : 'text-danger'}>
      {this.props.delta}
    </strong>
  ) : null;
  return (
    <div className='card'>
      {delta}
      {this.props.title}
    </div>
  );
}

这里我们仅仅浅尝辄止了React的内容，但这应该已经足以展示React的一般概念和它的优点了。

React本身是非常简单并且容易掌握的，但是，当我们谈起Flux架构时，可能会有些麻烦。

第六步：Flux架构速成教程

Flux是Facebook为可扩展的客户端web应用开发的应用架构。它利用单向数据流补全了React组件的一些不足。Flux更应该看做一种模式而非框架，不过，这里我们将使用一个叫做Alt的Flux实现，来减少我们写脚手架代码的时间。

以前你看过这个图解吗？你能理解它吗？我就不能理解，无论我看它多少遍。

现在我对Flux比较了解了，我只能说，真是服了他们（Flux作者），能将简单的架构用如此复杂的方式展现出来。不过需要说明的是，它们的新Flux图解比以前好多了。

有趣事实：当我刚开始写这个教程时，我决定不在这个项目中使用Flux。我实在掌握不了这个东西，还是让别人去教它吧。不过谢天谢地，在Yahoo我能在上班时间把玩不同的技术并试验它们，所以花点功夫还是学会了。老实说，不用Flux我们也能构建这个app，并且写的代码还少些，因为这个项目并没有什么复杂的内嵌组件。但我相信，做一个全栈的React app，包括服务端渲染和Flux架构，看着不同的部分是如何组合到一起的，这本身有它的价值。

与其重复Flux那抽象的官方教程，不如让我们来看一个真实的用例，来展示Flux是如何工作的：

• 在componentDidMount中，三个action被触发：

OverviewActions.getSummary();
OverviewActions.getApps();
OverviewActions.getCompanies();

• 每一个action都创建了一个AJAX请求向服务器获取数据。
• 获取到数据后，每一个action触发另一个“success”的action，并且将数据传递给它：

getSummary() {
  request
    .get('/api/overview/summary')
    .end((err, res) => {
      this.actions.getSummarySuccess(res.body);
    });
}

• 同时，Overview的store（我们存储Overview组件状态的地方）监听所有“success”的action。当getSummarySuccess被触发后，Overview的store中的onGetSummarySuccess方法被调用，store被更新：

class OverviewStore {
  constructor() {
    this.bindActions(OverviewActions);
    this.summary = {};
    this.apps = [];
    this.companies = [];
  }
  onGetSummarySuccess(data) {
    this.summary = data;
  }
  onGetAppsSuccess(data) {
    this.apps = data;
  }
  onGetCompaniesSuccess(data) {
    this.companies = data;
  }
}

• 一旦store更新，Overview组件将会知道，因为它订阅了Overview store，当store更新/改变后，组件将会安装store中的值更新自身状态。

class Overview extends React.Component {
  constructor(props) {
    super(props);
    this.state = OverviewStore.getState();
    this.onChange = this.onChange.bind(this);
  }
  componentDidMount() {
    OverviewStore.listen(this.onChange);
  }
  onChange() {
    this.setState(OverviewStore.getState())
  }
  ...
}

• 此时Overview组件已经根据新数据更新完成了。

• 在上面的截图上，当从下拉菜单选择不同的日期范围，将会重复整个流程。

注意：Action如何命名并无规定，你可自由按照自己的习惯命名，只要它是描述性并且有意义的。

让我们暂时先忽略Dispatcher一会，从上面的描述你看到了一条单向的数据流吗？如果没有也没什么大不了的，当我们开始构建应用的时候你自然就明白了。

Flux概要

Flux事实上不过是pub/sub架构的一个时髦说法，比如，应用的数据总是单向的，并被一路上的订阅者们接收。

在写这篇教程的时候，外面已经有超过一打的Flux实现，在这些实现当中，我只用过RefluxJS和Alt，在这两者之间，我个人比较喜欢Alt，因为它的简洁，以及作者goatslacker的热心、支持服务端渲染、非常棒的文档，以及积极的维护。

我强烈建议你去读一下Alt的Getting Started，不超过10分钟你就能基本入门了。

如果你对于该选择哪个Flux库感到迷茫，可以考虑一下Hacker News上一个叫glenjamin的家伙的评论，他花了大量时间试图弄清到底该用哪个Flux库：

令人郁闷的事实是：它们（Flux库）都很好。你几乎不可能因为一个Flux库而让你的应用出现问题。即使某个Flux库停止维护了也不打紧，你要知道，大多数正常的Flux实现都非常小（大约100行代码），出不了什么致命问题，即使出了我想你也能搞定。总之，redux很灵巧，但不要在试图获得完美的Flux库上浪费时间，瞅着哪个还算顺眼就拿来用，赶紧将关注点转回到你的应用上去。

现在，我们已经过了一遍ES6、React、Flux的一些基础，现在该将注意力集中到我们的应用上来了。

第七步：React路由（客户端）

在app/components目录下新建文件App.js，粘贴下面的代码：

import React from 'react';
import {RouteHandler} from 'react-router';
class App extends React.Component {
  render() {
    return (
      <div>
        <RouteHandler />
      </div>
    );
  }
}
export default App;

RouteHandler是渲染当前子路由处理器的组件，它将根据URL渲染这些组件中的一个：Home、Top100、Profile，或Add Character。

注意：它和AngularJS中的<div ng-view></div>挺相似，会将当前路由中已渲染的模板包含进主布局中。

然后，打开app目录下的routes.js，粘贴下面的代码：

import React from 'react';
import {Route} from 'react-router';
import App from './components/App';
import Home from './components/Home';
export default (
  <Route handler={App}>
    <Route path='/' handler={Home} />
  </Route>
);

之所以将路由像这样嵌套，是因为我们将在RouteHandler的前后添加Navbar和Footer组件。不像其它组件，路由改变的时候，Navbar和Footer组件会保持不变。

最后，我们需要添加一个URL监听程序，当URL改变时渲染应用。打开App目录下的main.js并添加下列代码：

import React from 'react';
import Router from 'react-router';
import routes from './routes';
Router.run(routes, Router.HistoryLocation, function(Handler) {
  React.render(<Handler />, document.getElementById('app'));
});

注意：main.js是我们的React应用的入口点，当Browserify将整个依赖树串起来并生成最终的bundle.js时会用到，这里我们填入初始化的内容后我们基本不用再动它了。

React Router引导route.js中的路由，将它们和URL匹配，然后执行相应的callback处理器，在这里即意味着渲染一个React组件到<div id="app"></div>。它是怎么知道要渲染哪个组件呢？举例来说，如果我们在/URL路径，那么<Handler />将渲染Home组件，因为我们之前已经在route.js指定这个组件了。后面我们将添加更多的路由。

另外注意，为了让URL好看点，我们使用了HistoryLocation来启用HMTL History API。比如它的URL看起来会是http://localhost:3000/add而不是http://localhost:3000/#add，因为我们构建的是一个同型React应用（在客户端和服务端都能渲染），所以我们不需要用一些非正统的方式在服务器上重定向以启用这项特性，它直接就能用。

接下来让我们创建这一节最后一个React组件。在app/components目录新建文件Home.js，并添上内容：

import React from 'react';
class Home extends React.Component {
  render() {
    return (
      <div className='alert alert-info'>
        Hello from Home Component
      </div>
    );
  }
}
export default Home;

下面应该是我们在目前所创建的所有内容。现在是你检查代码的好时候了。

哦，还有一个，打开app目录下的alt.js并粘贴下面的代码，我将会在第9步真正用到它的时候再解释这些代码的目的。

import Alt from 'alt';
export default new Alt();

现在我们只需要在后端设置一些东西，就终于能将我们的应用运行起来了。

第八步：React路由（服务端）

打开server.js并将下面的代码粘贴到文件最前面，我们需要导入这些模块：

var swig  = require('swig');
var React = require('react');
var Router = require('react-router');
var routes = require('./app/routes');

然后，将下面的中间件也加入到server.js中去，放在现有的Express中间件之后。

app.use(function(req, res) {
  Router.run(routes, req.path, function(Handler) {
    var html = React.renderToString(React.createElement(Handler));
    var page = swig.renderFile('views/index.html', { html: html });
    res.send(page);
  });
});

这个中间件在每次请求时都会执行。这里server.js中的Router.run和main.js中Router.run的主要区别是应用是如何渲染的。

在客户端，渲染完成的HTML标记将被插入到<div id="app"></div>，在服务器端，渲染完成的HTML标记被发到index.html模板，然后被Swig模板引擎插入到<div id="app">{{ html|safe }}</div>中，我选择Swig是因为我想尝试下Jade和Handlerbars之外的选择。

但我们真的需要一个独立的模板吗？为什么不直接将内容渲染到App组件呢？是的，你可以这么做，只要你能接受违反W3C规范的HMTL标记，以及不能在组件中直接包含内嵌的script标签，比如Google Analytics。不过即便这么说，好像现在不规范的HMTL标记也不再和SEO相关了，也有一些绕过的办法来包含内嵌script标签，所以要怎么做看你咯，不过为了这个教程的目的，让我们还是使用Swig模板引擎吧。

在项目根目录新建目录views，进入目录并新建文件index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>New Eden Faces</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900"/>
  <link rel="stylesheet" href="/css/main.css"/>
</head>
<body>
<div id="app">{{ html|safe }}</div>
<script src="/js/vendor.js"></script>
<script src="/js/vendor.bundle.js"></script>
<script src="/js/bundle.js"></script>
</body>
</html>

打开两个终端界面并进入根目录，在其中一个运行gulp，连接依赖文件、编译LESS样式并监视你的文件变化：

在另一个界面运行npm run watch来启动Node.js服务器并在文件变动时自动重启服务器：

在浏览器打开http://localhost:3000，现在你应该能看到React应用成功渲染了。

我们坚持到现在，做了大量的工作，结果就给我们显示了一个提示信息！不过还好，最艰难的部分已经结束了，从现在开始我们可以轻松一点，专注到创建React组件并实现REST API端点。

上面的两个命令gulp和npm run watch将为我们完成脏活累活，我们不用在添加React组件后的重新编译和Express服务器重启上费心啦。

第九步：Footer和Navbar组件

Navbar和Footer都是相对简单的组件。Footer组件获取并展示Top5人物角色，Navbar组件获取并展示所有角色数量，然后还初始化一个Socket.IO事件监听器，用以跟踪在线访客的数量。

注意：这一节会比别的小节要稍长些，因为我会在这里谈到一些新概念，而其它小节将基于它们进行开发。

Footer组件

在components目录下新建文件Footer.js：

import React from 'react';
import {Link} from 'react-router';
import FooterStore from '../stores/FooterStore'
import FooterActions from '../actions/FooterActions';
class Footer extends React.Component {
  constructor(props) {
    super(props);
    this.state = FooterStore.getState();
    this.onChange = this.onChange.bind(this);
  }
  componentDidMount() {
    FooterStore.listen(this.onChange);
    FooterActions.getTopCharacters();
  }
  componentWillUnmount() {
    FooterStore.unlisten(this.onChange);
  }
  onChange(state) {
    this.setState(state);
  }
  render() {
    let leaderboardCharacters = this.state.characters.map((character) => {
      return (
        <li key={character.characterId}>
          <Link to={'/characters/' + character.characterId}>
            <img className='thumb-md' src={'http://image.eveonline.com/Character/' + character.characterId + '_128.jpg'} />
          </Link>
        </li>
      )
    });
    return (
      <footer>
        <div className='container'>
          <div className='row'>
            <div className='col-sm-5'>
              <h3 className='lead'><strong>Information</strong> and <strong>Copyright</strong></h3>
              <p>Powered by <strong>Node.js</strong>, <strong>MongoDB</strong> and <strong>React</strong> with Flux architecture and server-side rendering.</p>
              <p>You may view the <a href='https://github.com/sahat/newedenfaces-react'>Source Code</a> behind this project on GitHub.</p>
              <p>© 2015 Sahat Yalkabov.</p>
            </div>
            <div className='col-sm-7 hidden-xs'>
              <h3 className='lead'><strong>Leaderboard</strong> Top 5 Characters</h3>
              <ul className='list-inline'>
                {leaderboardCharacters}
              </ul>
            </div>
          </div>
        </div>
      </footer>
    );
  }
}
export default Footer;

为防止你还未熟悉ES6语法而晕头转向，在这里我将最后一次展示这段代码用ES5是如何写的，另外你也可以参看Using Alt with ES5指南来了解创建action和store时语法的不同。

var React = require('react');
var Link = require('react-router').Link;
var FooterStore = require('../stores/FooterStore');
var FooterActions = require('../actions/FooterActions');
var Footer = React.createClass({
  getInitialState: function() {
    return FooterStore.getState();
  }
  componentDidMount: function() {
    FooterStore.listen(this.onChange);
    FooterActions.getTopCharacters();
  }
  componentWillUnmount: function() {
    FooterStore.unlisten(this.onChange);
  }
  onChange: function(state) {
    this.setState(state);
  }
  render() {
    var leaderboardCharacters = this.state.characters.map(function(character) {
      return (
        <li key={character.characterId}>
          <Link to={'/characters/' + character.characterId}>
            <img className='thumb-md' src={'http://image.eveonline.com/Character/' + character.characterId + '_128.jpg'} />
          </Link>
        </li>
      );
    });
    return (
      <footer>
        <div className='container'>
          <div className='row'>
            <div className='col-sm-5'>
              <h3 className='lead'><strong>Information</strong> and <strong>Copyright</strong></h3>
              <p>Powered by <strong>Node.js</strong>, <strong>MongoDB</strong> and <strong>React</strong> with Flux architecture and server-side rendering.</p>
              <p>You may view the <a href='https://github.com/sahat/newedenfaces-react'>Source Code</a> behind this project on GitHub.</p>
              <p>© 2015 Sahat Yalkabov.</p>
            </div>
            <div className='col-sm-7 hidden-xs'>
              <h3 className='lead'><strong>Leaderboard</strong> Top 5 Characters</h3>
              <ul className='list-inline'>
                {leaderboardCharacters}
              </ul>
            </div>
          </div>
        </div>
      </footer>
    );
  }
});
module.exports = Footer;

如果你还记得Flux架构那一节的内容，这些代码看上去应该挺熟悉。当组件加载后，将初始组件状态设置为FooterStore中的值，然后初始化store监听器。同样，当组件被卸载（比如导航至另一页面），store监听器也被移除。当store更新，onChange函数被调用，然后反过来又更新Footer的状态。

如果你之前用过React，在这里你需要注意的是，当使用ES6 class创建React组件，组件方法不再自动绑定this。也就是说，当你调用组件内部方法时，你需要手动绑定this，在之前，React.createClass()会帮我们自动绑定：

自动绑定：当在JavaScript中创建回调时，你经常需要手动绑定方法到它的实例以保证this的值正确，使用React，所有方法都自动绑定到组件实例。

以上出自于官方文档。不过在ES6中我们要这么做：

this.onChange = this.onChange.bind(this);

下面是关于这个问题更详细的例子：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = AppStore.getState();
    this.onChange = this.onChange; // Need to add `.bind(this)`.
  }
  onChange(state) {
    // Object `this` will be undefined without binding it explicitly.
    this.setState(state);
  }
  render() {
    return null;
  }
}

现在你需要了解JavaScript中的map()方法，即使你之前用过，也还是可能搞不清楚它在JSX中是怎么用的（React官方教程并没有很好的解释它）。

它基本上是一个for-each循环，和Jade和Handlebars中的类似，但在这里你可以将结果分配给一个变量，然后你就可以在JSX里使用它了，就和用其它变量一样。它在React中很常见，你会经常用到。

注意：当渲染动态子组件时，如上面的leaderboardCharacters，React会要求你使用key属性来指定每一个子组件。

Link组件当指定合适的href属性时会渲染一个链接标签，它还知道链接的目标是否可用，从而给链接加上active的类。如果你使用React Router，你需要使用Link模块在应用内部进行导航。

Actions

下面，我们将为Footer组件创建action和store，在app/actions目录新建FooterActions.js并添加：

import alt from '../alt';
class FooterActions {
  constructor() {
    this.generateActions(
      'getTopCharactersSuccess',
      'getTopCharactersFail'
    );
  }
  getTopCharacters() {
    $.ajax({ url: '/api/characters/top' })
      .done((data) => {
        this.actions.getTopCharactersSuccess(data)
      })
      .fail((jqXhr) => {
        this.actions.getTopCharactersFail(jqXhr)
      });
  }
}
export default alt.createActions(FooterActions);

首先，注意我们从第七步创建的alt.js中导入了一个Alt的实例，而不是从我们安装的Alt模块中。它是一个Alt的实例，实现了Flux dispatcher并提供创建Alt action和store的方法。你可以把它想象为我们的store和action之间的胶水。

这里我们有3个action，一个使用ajax获取数据，另外两个用来通知store获取数据是成功还是失败。在这个例子里，知道getTopCharacters何时被触发并没有什么用，我们真正想知道的是action执行成功（更新store然后重新渲染组件）还是失败（显示一个错误通知）。

Action可以很复杂，也可以很简单。有些action我们不关心它们做了什么，我们只关心它们是否被触发，比如这里的ajaxInProgress和ajaxComplete被用来通知store，AJAX请求是正在进行还是已经完成。

注意：Alt的action能通过generateActions方法创建，只要它们直接通向dispatch。具体可参看官方文档。

下面的两种创建action方式是等价的，可依据你的喜好进行选择：

getTopCharactersSuccess(payload) {
  this.dispatch(payload);
}
getTopCharactersFail(payload) {
  this.dispatch(payload);
}
// Equivalent to this...
this.generateActions(
  'getTopCharactersSuccess',
  'getTopCharactersFail'
);

最后，我们通过alt.createActions将FooterActions封装并暴露出来，然后我们可以在Footer组件里导入并使用它。

Store

下面，在app/stores目录下新建文件FooterStore.js：

import alt from '../alt';
import FooterActions from '../actions/FooterActions';
class FooterStore {
  constructor() {
    this.bindActions(FooterActions);
    this.characters = [];
  }
  onGetTopCharactersSuccess(data) {
    this.characters = data.slice(0, 5);
  }
  onGetTopCharactersFail(jqXhr) {
    // Handle multiple response formats, fallback to HTTP status code number.
    toastr.error(jqXhr.responseJSON && jqXhr.responseJSON.message || jqXhr.responseText || jqXhr.statusText);
  }
}
export default alt.createStore(FooterStore);

在store中创建的变量，比如this所赋值的变量，都将成为状态的一部分。当Footer组件初始化并调用FooterStore.getState()，它会获取在构造函数中指定的当前状态（在一开始只是一个空数组，而遍历空数组会返回另一个空数组，所以在Footer组件第一次加载时并没有渲染任何内容）。

bindActions用于将action绑定到store中定义的相应处理函数。比如，一个命名为foo的action会匹配store中叫做onFoo或者foo的处理函数，不过需要注意它不会同时匹配两者。因此我们在FooterActions.js中定义的action getTopCharactersSuccess和getTopCharactersFail会匹配到这里的处理函数onGetTopCharactersSuccess和onGetTopCharactersFail。

注意：如需更精细的控制store监听的action以及它们绑定的处理函数，可参看文档中的bindListeners方法。

在onGetTopCharactersSuccess处理函数中我们更新了store的数据，现在它包含Top 5角色，并且我们在Footer组件中初始化了store监听器，当FooterStore更新后组件会自动的重新渲染。

我们会使用Toastr库来处理通知。也许你会问为什么不使用纯React通知组件呢？也许你以前看到过为React设计的通知组件，但我个人认为这是少数不太适合用React的地方（还有一个是tooltips）。我认为要从应用的任何地方显示一个通知，使用命令方式远比声明式要简单，我以前曾经构建过使用React和Flux的通知组件，但老实说，用来它处理显隐状态、动画以及z-index位置等，非常痛苦。

打开app/components下的App.js并导入Footer组件：

import Footer from './Footer';

然后将<Footer />添加到<RouterHandler / >组件后面：

<div>
  <RouteHandler />
  <Footer />
</div>

刷新浏览器你应该看到新的底部：

我们稍后会实现Express API以及添加人物角色数据库，不过现在让我们还是继续构建Navbar组件。因为之前已经讲过了alt action和store，这里将会尽量简略的说明Navbar组件如何构建。

Navbar组件

在app/components目录新建文件Navbar.js：

import React from 'react';
import {Link} from 'react-router';
import NavbarStore from '../stores/NavbarStore';
import NavbarActions from '../actions/NavbarActions';
class Navbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = NavbarStore.getState();
    this.onChange = this.onChange.bind(this);
  }
  componentDidMount() {
    NavbarStore.listen(this.onChange);
    NavbarActions.getCharacterCount();
    let socket = io.connect();
    socket.on('onlineUsers', (data) => {
      NavbarActions.updateOnlineUsers(data);
    });
    $(document).ajaxStart(() => {
      NavbarActions.updateAjaxAnimation('fadeIn');
    });
    $(document).ajaxComplete(() => {
      setTimeout(() => {
        NavbarActions.updateAjaxAnimation('fadeOut');
      }, 750);
    });
  }
  componentWillUnmount() {
    NavbarStore.unlisten(this.onChange);
  }
  onChange(state) {
    this.setState(state);
  }
  handleSubmit(event) {
    event.preventDefault();
    let searchQuery = this.state.searchQuery.trim();
    if (searchQuery) {
      NavbarActions.findCharacter({
        searchQuery: searchQuery,
        searchForm: this.refs.searchForm.getDOMNode(),
        router: this.context.router
      });
    }
  }
  render() {
    return (
      <nav className='navbar navbar-default navbar-static-top'>
        <div className='navbar-header'>
          <button type='button' className='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar'>
            <span className='sr-only'>Toggle navigation</span>
            <span className='icon-bar'></span>
            <span className='icon-bar'></span>
            <span className='icon-bar'></span>
          </button>
          <Link to='/' className='navbar-brand'>
            <span ref='triangles' className={'triangles animated ' + this.state.ajaxAnimationClass}>
              <div className='tri invert'></div>
              <div className='tri invert'></div>
              <div className='tri'></div>
              <div className='tri invert'></div>
              <div className='tri invert'></div>
              <div className='tri'></div>
              <div className='tri invert'></div>
              <div className='tri'></div>
              <div className='tri invert'></div>
            </span>
            NEF
            <span className='badge badge-up badge-danger'>{this.state.onlineUsers}</span>
          </Link>
        </div>
        <div id='navbar' className='navbar-collapse collapse'>
          <form ref='searchForm' className='navbar-form navbar-left animated' onSubmit={this.handleSubmit.bind(this)}>
            <div className='input-group'>
              <input type='text' className='form-control' placeholder={this.state.totalCharacters + ' characters'} value={this.state.searchQuery} onChange={NavbarActions.updateSearchQuery} />
              <span className='input-group-btn'>
                <button className='btn btn-default' onClick={this.handleSubmit.bind(this)}><span className='glyphicon glyphicon-search'></span></button>
              </span>
            </div>
          </form>
          <ul className='nav navbar-nav'>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/stats'>Stats</Link></li>
            <li className='dropdown'>
              <a href='#' className='dropdown-toggle' data-toggle='dropdown'>Top 100 <span className='caret'></span></a>
              <ul className='dropdown-menu'>
                <li><Link to='/top'>Top Overall</Link></li>
                <li className='dropdown-submenu'>
                  <Link to='/top/caldari'>Caldari</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/top/caldari/achura'>Achura</Link></li>
                    <li><Link to='/top/caldari/civire'>Civire</Link></li>
                    <li><Link to='/top/caldari/deteis'>Deteis</Link></li>
                  </ul>
                </li>
                <li className='dropdown-submenu'>
                  <Link to='/top/gallente'>Gallente</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/top/gallente/gallente'>Gallente</Link></li>
                    <li><Link to='/top/gallente/intaki'>Intaki</Link></li>
                    <li><Link to='/top/gallente/jin-mei'>Jin-Mei</Link></li>
                  </ul>
                </li>
                <li className='dropdown-submenu'>
                  <Link to='/top/minmatar'>Minmatar</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/top/minmatar/brutor'>Brutor</Link></li>
                    <li><Link to='/top/minmatar/sebiestor'>Sebiestor</Link></li>
                    <li><Link to='/top/minmatar/vherokior'>Vherokior</Link></li>
                  </ul>
                </li>
                <li className='dropdown-submenu'>
                  <Link to='/top/amarr'>Amarr</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/top/amarr/amarr'>Amarr</Link></li>
                    <li><Link to='/top/amarr/ni-kunni'>Ni-Kunni</Link></li>
                    <li><Link to='/top/amarr/khanid'>Khanid</Link></li>
                  </ul>
                </li>
                <li className='divider'></li>
                <li><Link to='/shame'>Hall of Shame</Link></li>
              </ul>
            </li>
            <li className='dropdown'>
              <a href='#' className='dropdown-toggle' data-toggle='dropdown'>Female <span className='caret'></span></a>
              <ul className='dropdown-menu'>
                <li><Link to='/female'>All</Link></li>
                <li className='dropdown-submenu'>
                  <Link to='/female/caldari'>Caldari</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/female/caldari/achura'>Achura</Link></li>
                    <li><Link to='/female/caldari/civire/'>Civire</Link></li>
                    <li><Link to='/female/caldari/deteis'>Deteis</Link></li>
                  </ul>
                </li>
                <li className='dropdown-submenu'>
                  <Link to='/female/gallente'>Gallente</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/female/gallente/gallente'>Gallente</Link></li>
                    <li><Link to='/female/gallente/intaki'>Intaki</Link></li>
                    <li><Link to='/female/gallente/jin-mei'>Jin-Mei</Link></li>
                  </ul>
                </li>
                <li className='dropdown-submenu'>
                  <Link to='/female/minmatar'>Minmatar</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/female/minmatar/brutor'>Brutor</Link></li>
                    <li><Link to='/female/minmatar/sebiestor'>Sebiestor</Link></li>
                    <li><Link to='/female/minmatar/vherokior'>Vherokior</Link></li>
                  </ul>
                </li>
                <li className='dropdown-submenu'>
                  <Link to='/female/amarr'>Amarr</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/female/amarr/amarr'>Amarr</Link></li>
                    <li><Link to='/female/amarr/ni-kunni'>Ni-Kunni</Link></li>
                    <li><Link to='/female/amarr/khanid'>Khanid</Link></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li className='dropdown'>
              <a href='#' className='dropdown-toggle' data-toggle='dropdown'>Male <span className='caret'></span></a>
              <ul className='dropdown-menu'>
                <li><Link to='/male'>All</Link></li>
                <li className='dropdown-submenu'>
                  <Link to='/male/caldari'>Caldari</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/male/caldari/achura'>Achura</Link></li>
                    <li><Link to='/male/caldari/civire'>Civire</Link></li>
                    <li><Link to='/male/caldari/deteis'>Deteis</Link></li>
                  </ul>
                </li>
                <li className='dropdown-submenu'>
                  <Link to='/male/gallente'>Gallente</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/male/gallente/gallente'>Gallente</Link></li>
                    <li><Link to='/male/gallente/intaki'>Intaki</Link></li>
                    <li><Link to='/male/gallente/jin-mei'>Jin-Mei</Link></li>
                  </ul>
                </li>
                <li className='dropdown-submenu'>
                  <Link to='/male/minmatar'>Minmatar</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/male/minmatar/brutor'>Brutor</Link></li>
                    <li><Link to='/male/minmatar/sebiestor'>Sebiestor</Link></li>
                    <li><Link to='/male/minmatar/vherokior'>Vherokior</Link></li>
                  </ul>
                </li>
                <li className='dropdown-submenu'>
                  <Link to='/male/amarr'>Amarr</Link>
                  <ul className='dropdown-menu'>
                    <li><Link to='/male/amarr/amarr'>Amarr</Link></li>
                    <li><Link to='/male/amarr/ni-kunni'>Ni-Kunni</Link></li>
                    <li><Link to='/male/amarr/khanid'>Khanid</Link></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><Link to='/add'>Add</Link></li>
          </ul>
        </div>
      </nav>
    );
  }
}
Navbar.contextTypes = {
  router: React.PropTypes.func.isRequired
};
export default Navbar;

必须承认，这里使用循环的话可以少写一些代码，但现在这样对我来说更直观。

你可能立刻注意到的一个东西是class变量contextTypes。我们需要它来引用router的实例，从而让我们能访问当前路径、请求参数、路由参数以及到其它路由的变换。我们不在Navbar组件里直接使用它，而是将它作为一个参数传递给Navbar action，以使它能导航到特定character资料页面。

componentDidMount是我们发起与Socket.IO的连接，并初始化ajaxStart和ajaxComplete时间监听器地方，我们会在AJAX请求时在NEF logo旁边显示加载指示。

handleSubmit是用来处理表单提交的程序，在按下Enter键或点击Search图标时执行。它会做一些输入清理和验证工作，然后触发findCharacter action。另外我们还传递了搜索区域的DOM节点给action，以便当搜索结果为0时加载一个震动动画。

Actions

在app/actions目录下新建文件NavbarActions.js：

import alt from '../alt';
import {assign} from 'underscore';
class NavbarActions {
  constructor() {
    this.generateActions(
      'updateOnlineUsers',
      'updateAjaxAnimation',
      'updateSearchQuery',
      'getCharacterCountSuccess',
      'getCharacterCountFail',
      'findCharacterSuccess',
      'findCharacterFail'
    );
  }
  findCharacter(payload) {
    $.ajax({
      url: '/api/characters/search',
      data: { name: payload.searchQuery }
    })
      .done((data) => {
        assign(payload, data);
        this.actions.findCharacterSuccess(payload);
      })
      .fail(() => {
        this.actions.findCharacterFail(payload);
      });
  }
  getCharacterCount() {
    $.ajax({ url: '/api/characters/count' })
      .done((data) => {
        this.actions.getCharacterCountSuccess(data)
      })
      .fail((jqXhr) => {
        this.actions.getCharacterCountFail(jqXhr)
      });
  }
}
export default alt.createActions(NavbarActions);