Question

最后我们来聊聊 React！

使用 React+Redux+Immutable 来开发应用真正酷毙的地方在于：我们可以用纯组件（有时候也称为蠢组件）思想实现
任何东西。这个概念与纯函数很类似，有如下一些规则：

1. 一个纯组件利用 props 接受所有它需要的数据，类似一个函数的入参，除此之外它不会被任何其它因素影响；
2. 一个纯组件通常没有内部状态。它用来渲染的数据完全来自于输入 props，使用相同的 props 来渲染相同的纯组件多次，
   将得到相同的 UI。不存在隐藏的内部状态导致渲染不同。

这就带来了 一个和使用纯函数一样的效果 ：
我们可以根据输入来预测一个组件的渲染，我们不需要知道组件的其它信息。这也使得我们的界面测试变得很简单，
与我们测试纯应用逻辑一样简单。

如果组件不包含状态，那么状态放在哪？当然在不可变的 Store 中啊！我们已经见识过它是怎么运作的了，其
最大的特点就是从界面代码中分离出状态。

在此之前，我们还是先给项目添加 React：

npm install --save react

我们同样需要 react-hot-loader 。它让我们的开发
变得非常快，因为它提供了我们在不丢失当前状态的情况下重载代码的能力：

npm install --save-dev react-hot-loader

我们需要更新一下 webpack.config.js ，使其能热加载：

//webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    }],
  }
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

在上述配置的 entry 里我们包含了 2 个新的应用入口点：webpack dev server 和 webpack hot module loader。
它们提供了 webpack 模块热替换能力。该能力并不是默认加载的，所以上面我们才需要在 plugins 和 devServer
中手动加载。

配置的 loaders 部分我们在原先的 Babel 前配置了 react-hot 用于 .js 和 .jsx 文件。

如果你现在重启开发服务器，你将看到一个在终端看到 Hot Module Replacement 已开启的消息提醒。我们可以
开始写我们的第一个组件了。