React6 实战项目1
本文为 React 的第一个项目，需要使用 livereload(此文中有使用介绍)
完整代码包下载 (运行时可能显示 gulp 版本不匹配，可重新自行下载 npm install -g -gulp npm install --save-dev -gulp)
配置生产环境：
1、cmd 进入项目文件夹
2、创建 reactQa 并进入：mkdir reactQa && cd reactQa
3、安装必要的组件：npm init，一直回车就好
4、npm install react --save
5、npm install -g gulp
6、npm install --save-dev gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify
7、安装 bootstrap(与 gulp 配合使用)
安装 bower ： npm install bower -g
bower init (一直回车就好)
bower install bootstrap --save
8、创建静态文件 app文件夹 dist文件夹(压缩后的文件存放位置) index.html index-static.html gulpfile.js
9、dist 内创建 js 文件夹，新建 main.js 文件
10、app 内创建 js 文件夹
新建 main.js
新建 components 文件夹，新建 QuestionApp.js、QuestionForm.js、QuestionItem.js、QuestionList.js、ShowAddButton.js
11、gulp serve
以下为项目中使用的知识点：
1、Hello World
引用 react.js 以及 JSXTransformer.js 可自行下载
2、组件嵌套
3、state
4、props
5、events 与 ref
对于不确定个数的 radio 与 checkbox 还是建议 onChange 事件而不使用 ref 属性
ref 是 react 对象，所以在子组件中定义新的函数，在父组件中使用，ref 也是可以使用的
ref 也可以被定义为函数，如 ref={function(comp){ React.findDOMNode(comp).focus()}}
6、双向数据流 使用 mixins
需要多引用 react-with-addons.js
在 script 中首先需要写入 mixins，mixins：[React.addons.LinkedStateMixIn]
mixins 是一个 link 对象，可以一直传递到子组件
7、组件的生命周期
周期分为三个阶段：装载阶段、更新阶段、卸载阶段
装载阶段(Mounting)分为两个函数 componentWillMount(将要被装载) componentDidMount(已经被装载)
componentDidMount 此阶段可写 ajax
函数 React.unmountComponentAtNode(传一个 DOM 节点) 删除一个组件
更新阶段(Updating)分为四个个函数
shouldComponentUpdate(可以做限制，暂时不太懂为什么写，请指教！)
componentWillUpdate(组件将要更新，做处理)
componentDidUpdate(组件已经更新，可以进行dom操作)
componentWillReceiveProps(放到子组件，子组件将接受更新)
8、Mixin
与组件的生命周期密切相关，目的是让不同的组件共用一些逻辑，不用重复的写一些相似的代码