利用命令快速构建react工程(create-react-app or nwb)

cretae-react-app

前一段时间在很多app和博客中看到facebook的create-react-app命令，可以利用这个命令迅速搭建react工程，官网详细见https://github.com/facebookincubator/create-react-app
, 你仅仅需要执行

npm install create-my-app
create-react-app my-app

便可构建出一个react工程，这个命令已经帮你安装了部分搭建react工程所需的依赖，你现在就可以在你的工程目录下的src/index.js的编写你自己的react代码，它已经支持了es6,react语法，同时也支持了page reload,当你的代码发生了修改时，页面会重新加载，同时，你也可以在控制台看到打包错误和格式警告～。当然autoprefixer等等工作它也已经帮助你完成。
cretae-react-app命令前一段时间仅仅帮你完成上面的工作，并不支持测试，需要自己加入测试环境。但是今天看了一下官网教程，目前也开始支持测试，npm test命令即可跑起你整个项目的测试，create-my-app默认的测试环境是jest,它是基于node的runner，可以加快速度，当你需要浏览器全局变量时，你需要加入jsdom模拟浏览器环境，test文件和需要被测试的文件尽量路径比较接近(都放在src下！)，譬如app.js和app.spec.js在同级目录下～,而在你需要测试react组件时，你可以

    npm install --save-dev enzyme react-addons-test-utils

然后便可以利用enzyme的方法进行测试，是不是很棒

        import React from 'react';
        import { shallow } from 'enzyme';
        import App from './App';
        it('renders without crashing', () => {
          shallow(<App />);
        });

同时，create-react-app命令也支持proxy代理,把以下一行代码添加到package.json中，这样当你在npm start(仅在开发环境)情况下时，你便可以通过’fetch(‘/api/todos’)把你的请求代理到http://localhost:4000/api/todos上，当然，你得负责解决cors问题～～

       "proxy": "http://localhost:4000",

nwb

目前create-react-app还有几项局限性，即官网的Limitations(如下)，可能等命令stable后会陆续加入(正如最近新加入的test一样)

    Server rendering.
    Some experimental syntax extensions (e.g. decorators).
    CSS Modules.
    LESS or Sass.
    Hot reloading of components

而nwb命令在一定程度上弥补了create－react-app的问题

    * 它支持热加载，当组件修改时，页面不会强制刷新而是保留之前的state,同时，也会同时在控制台和浏览器上显示build错误
    * 它在create-react-app之前就已经支持了test(内置测试框架为karma结合phantomjs),同时也支持
    自定义测试框架（可以自己引入chai-enzyme），同时，它也支持自行修改已有的webpack等其他配置，选择性的引入其他webpack 插件 
譬如htmlplugin等～，具有Flexible的特点(配置文件为工程中的nwb.config.js文件～)
    * 可以构建web模块，react app,react组件等几种不同形式的工程～

自己用nwb写了一个react switch组件（参照ant-design源码），链接地址为https://github.com/xiaomaisu/react_compoent1/tree/develop,可以看下～

先就介绍到这里，后期有补充的话还会增加进来的～～