react大前端开发之超简说明（站在巨人的肩上）

1、前戏准备充分（包括但不限于）：安装最新node.js环境，安装好VScode

2、npm init，初始化node.js项目，会生成package.json文件

3、npm install hapi，安装node.js的web服务器

4、npm install inert，让上一部安装的hapi服务器可以返回静态文件，比如JS啊，静态html啊，图片啊，css啊之类的东西（bullshit)，还要在等下的server.js里添加上注册代码。

5、hapi官网：http://hapijs.com/，点头部导航第二个－Tutorials（学习指南），再点右边的Tutorials最下面的一个Views，找到下面比较完成的reply.view的代码，自己用。

6、在项目根目录下，就是与刚刚的package.json同级的目录，添加一个server.js文件（其实文件名随意取），将刚刚的代码弄进去。代码还比较容易理解。该文件内的所有代码如下，略有点长，请自行展开。

'use strict';

const Hapi = require('hapi');

const server = new Hapi.Server();

server.connection({
    port: Number(process.argv[2] || 8080),
    host: 'localhost'
});

server.register(require('inert'), (err) => {

    if (err) {
        throw err;
    }

    server.route({
        method: 'GET',
        path: '/{controller}/{action}.js',
        handler: function (request, reply) {
            reply.file(request.params.controller+'/'+request.params.action+'.js');
        }
    });
});

server.register(require('vision'), (err) => {

    server.views({
        engines: {
            html: require('handlebars')
        },
        relativeTo: __dirname,
        path: 'views'        
    });

    server.route({
        method: 'GET',
        path: '/',
        handler: function (request, reply) {
            reply('hello?');
        }
    });
    server.route({
        method: 'GET',
        path: '/{controller}/{action}.html',
        handler: function (request, reply) {
            reply.view(request.params.controller+'/'+request.params.action+'.html');
        }
    });
});

server.start((err) => {

        if (err) {
            throw err;
        }

        console.log('Server running at:', server.info.uri);
    });

7、npm install --save handlebars vision，

8、再node server.js差不多可以运行了，有问题的话稍微改下

9、安装webpack，npm install webpack --save-dev，如果没有全局安装过的话请再全局安装一下npm install webpack -g，简单使用可参考简书上的webpack入门说明：http://www.jianshu.com/p/42e11515c10f。我这里只用它来编译ES6，并将多个JS打包成一整个的JS。

10、建立webpack.config.js，与package.json同级目录。本人使用的webpack.config.js如下，想了下还是贴出来。我看有的教程说可以把query那一项另外放一个文件以防日后东西太多，我这里嫌麻烦没搞，有兴趣自己扩展一下。

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/src/index.js",
  output: {
    path: __dirname + "/scripts",
    filename: "bundle.js"
  },

  module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel',//在webpack的module部分的loaders里进行配置即可
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },
}

11、安装babel，npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react，这里安装了好几个东西，我也不太分得清，凑合安吧。

12、完成后执行webpack，神奇的发现，scripts下生成了一个bundle.js。至此，呵呵，手动微笑。

13、再在index.html下加载一下这个js，按正常写加载就行，如果加载失败返回403之类的，肯定就是第4部后面说的注册inert姿势不正确，或者根本没有注册。再node server.js一下，刷一下index页面，正常加载js，再次手动微笑。

14、安装react全家桶，npm install --save react react-dom redux react-redux，一口气安4个东西脸不红心不跳气也不喘（其实TM蛋疼，没办法再难过也要微笑哦）。

环境搞好了，差不多可以愉快的开始react开发了，本文最后一次手动微笑^_^

仅以此作为记录与分享，谢谢

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

2016.10.16更新

深知一个道理：talk is cheap, show me the code.

上一个学习过程中自己实现的counter和messagelist（类似于官方和大家解读的todolist示例）结合在同一个页面的demo项目

github：https://github.com/LeehanLee/react-msglist

clone下来之后直接 npm install安装需要的依赖包（前提当然的node.js环境已OK），安装太慢的话你可能需要设置一下使用淘宝的npm镜像。然后直接npm start运行，再在浏览器内浏览http://localhost:8080/home/index.html

项目结构截图

项目运行后访问如下：