春节临近，办公室里半片空位，半片浮嚣。
想到将放假，屏幕上的代码也都变成了雀跃的小虫。
无法专心了。
终于还是强迫自己读了半篇文档，写了几坨程序。
这次记录的是关于React，最浅显的内容。
———— 我是望眼欲穿的分割线 ————
Step 1：npm init
按照向导填写各个字段，最后生成package.json文件。
容易出错的是：name的值不要和包包同名。
比如我们后续需要使用npm安装几个包包：browserify react reactify ...
则name值如果写作“browserify”或“react”，此依赖会安装失败！
提示如下：
npm WARN install Refusing to install react as a dependency of itself
在OS X里一个依赖安装失败会Block其他依赖的安装，
Ubuntu里只会失败当前包的安装，不会Block其他包。
总之，name不要和包名等关键字重名就对了。
Step 2：npm install --save-dev blah blah blah
package.json文件完成后，即可安装所需的依赖了：
sudo npm install --save-dev browserify react reactify react-dom uglify-js
这里的安装不要使用全局（-g）安装。只装在当前目录里即可。
多个依赖之间是空格。
安装成功后，需要手动在package.json文件里的scripts属性中做个配置：
（假设package.json文件里的main文件是index.js）
"build": "browserify --debug index.js > myBundle.js",
"build-dist": "NODE_ENV=production browserify index.js | uglifyjs -m > myBundle.min.js",
browserify 是一个JS文件的打包工具，网上很多介绍，此不赘述。
任何包含require语句的JavaScript文件运行Browserify都会自动打包所有的依赖项。
只不过它只支持.js文件。很专一。
这个Step还没完，在package.json里还要添加一个属性：
"browserify": {
"transform": [
"reactify"
]
}
好了，这个Step完了。
Step 3：npm run build
这个命令就创建了打包文件myBundle.js。
然后在index.html页面里引用之即可。
接下来，对index.js的每一次修改，都要run一次，页面才会有更新。
补充半句，
webpack也可以完成browserify的任务，
并且它不仅仅支持.js文件，很强大。不解释了。
Step 4：现在可以在index.js里美美的写React代码了
先require：
var React = require("react");
var ReactDOM = require(‘react-dom‘);
初次接触React代码对于用惯了jQuery的人来说不适应。
但如果写过AngularJS就容易接受了。
不仅想起了两年前写AngularJS时的痛苦，一身冷汗！
好在经过修炼，再新奇的JS写起来也不再冒冷汗了。
复述有助于自我理解，以下是对原理的通俗解释，可忽略：
jQuery对事件的监听会绑定在DOM元素上，
事件每次发生，都会对DOM有所动作。
而React通过“状态”来监听事件，每当事件发生时，状态改变，
然后在render属性里将最新状态渲染到页面上。
因此，React会通过创建UI组件，
将事件监听、状态修改、DOM结构都集成在一个组件里，
对于需要多个组件的大型WEB应用来说，这种结构更方便维护。
Step 5：React.createClass({ ... })创建UI组件
其中一个自带属性 getInitialState 要初始化各个“状态”：
注意这个函数每次创建组件时只运行一次。
getInitialState: function() {
return {
text: "",
closed: false
}
}
然后我们可以自定义自己的监听函数，比如：
myHandleChange: function(event) {
this.setState({
text: event.target.value,
closed: true
})
}
每次执行myHandleChange函数时都会在setState里更新状态，
这里是重写了text的值和closed的值。
如何触发myHandleChange函数，就不是React的问题了，
比如将其写在input元素的onChange属性里就可以在输入时触发。
Step 6：最后将UI组件render到页面里
ReactDOM.render(<TweetBox />, document.body);
render函数接收的两个参数，一个是带尖尖括号的组件变量名，
另一个是容器，这里是document.body
但似乎官方不建议直接使用body作容器，
最好创建一个body下的容器元素。
Step 7：render函数里奇异的return
这个要单独提出来讲一下，是因我个人看它不顺眼。。。
在render函数里的return返回的是一段HTML结构，
但它的写法既不同于JS原生语法，也不遵循HTML语法，
据说这货叫作JSX什么的，Whatever。
总之，这里要注意的是4点：
a：return 后面的内容都放在小括号里
b：这段HTML结构必须包含在一个最外层元素中，不可出现两个并列的最外层元素。
c：结构里的class要写成“className”
d：引用组件内的变量时，不要带引号，例如 onChange={this.myHandleChange}
———— 我是赤裸裸的分割线 ————
以上是最浅显的内容。
但也足够支持我写一坨小程序了。
准备放假了呢。