React入门菜出来的坑（未完待续）

破题

想要用组件的方式重构一下前段时间搞出来的前台界面，看来看去决定了React.js……这篇就作为破题了

入门基础知识

1. React与ReactDOM：阮一峰老师的React 入门实例教程，大概了解了React与ReactDOM的最最基础知识，以及部分JSX、与Ajax结合等基础知识
2. webpack：入门 Webpack，看这篇就够了，了解了webpack基本使用流程、各参数意义等。

碰到的问题

1. 对React总体框架没有概念，不知道React、webpack、react-route、redux等应该用在什么场景下。茫然的查来查去看到了一句话：只有遇到 React 实在解决不了的问题，你才需要 Redux。挺有道理的，等遇到解决不了的场景的时候自然就会去找上面那几个工具。
2. 本来想用require.js的异步加载来引入各用ES6语法写的js，结果发现并不像以前那样好用，如果直接引用ES6的js会报错。最后决定了用Webpack来预处理打包。
3. 我在windows下安装的Webpack需要node环境，参考了windows下webpack快速上手（一）。根据官网教程一步步傻瓜装机似的装上了。
4. 没有使用webpack构建本地服务器，因为8080端口被我正在跑的工程占用了……，等找找如何修改Webpack服务器的端口号再去搞本地服务器
5. 创建package.json文件，使用的npm init创建的，注意每步的提示填上信息就行了。每个字段的值参考的package.json文件。
6. webpack.config.js里entry代表的是待打包js文件，output才是输出js文件……
7. 根据入门 Webpack，看这篇就够了打包后的main.js文件过大，看了一下打包后的文件，由于待打包文件里面有import React from 'react'，导致main.js里面多引入了react与ReactDOM（这俩已通过html引入了），就又把这个import给删除了，大小瞬间降下来了。其他减小size的方法或许可以参考彻底解决 webpack 打包文件体积过大
8. 有两个文件需要打包，A.js与welcome.js，要在A.js中调用welcome.js，要在A.js开头写上：import WelcomeHostMonitor from './template/welcome.js';，注意路径只与A跟welcome.js的路径有关，不用考虑index.html与welcome.js的路径关系。不然webpack打包时会报错。
9. Webpack打包A.js会自动打包welcome.js
10. 要在welcome.js中加上export default WelcomeHostMonitor，可以参考ES6模块的import和export用法总结，只有这样在html中才能访问到WelcomeHostMonitor，不然会报：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

    var WelcomeHostMonitor = React.createClass({
      render: function() {
      return (
          
Hello ~
        );
      }
    })

    export default WelcomeHostMonitor

11. 未完待续……

阶段性成果

A.js调用了welcome.js后结果

下一步

1. 修改welcome.js成一个具体的模块，试试Ajax与数据渲染
2. 分析A.js能不能修改作为一个系统总入口

参考文章

以上各链接
webpack+babel转义React与ES6语法