1. React 使用

1.1. state VS prop

参考 动态交互式用户界面

大部分组件的工作应该是从 props 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。

原则上不可修改 props

1.2. Refs

参考 对组件的refs

Refs是一种很好的发送消息给特定子实例(通过流式的Reactive props 和 state来做会不方便)的方式。

1.3. Inline Styles

1.4. 搭建环境

• 在用户第一次访问页面时，由服务端路由处理，输出相关页面内容
• 客户端用户点击链接跳转，由客户端路由处理，渲染相关组件并展示
• 用户在前端跳转后刷新页面，此时被服务端路由截获，并由服务端处理渲染并返回页面内容

参考

• Koa2 + React + Redux + antd 同构直出探索
• Server Rendering
• React koa2 同构应用实践

参考项目

1.4.1. 初始化 package.json

npm init

1.4.2. eslint

npm install --save-dev eslint
npm install --save-dev eslint-plugin-react

1.4.3. WebStorm

• Preferences > Languages & Frameworks > Node.js and NPm > Node interperter:v6.9.1 | enable Node.js Core library
• Preferences > Languages & Frameworks > JavaScript > JavaScript language version > React JSX
• Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint > Enable

1.4.4. Koa2

npm install --save koa@next
npm install --save koa-router@next
npm install --save koa-favicon@next
npm install --save koa-logger@next
npm install --save koa-compress@next
npm install --save request

1.5. react

npm install --save react
npm install --save react-dom

1.5.1. gulp

npm install -g gulp
npm install --save-dev gulp-babel
npm install --save-dev gulp-changed
npm install --save-dev gulp-clean-css
npm install --save-dev gulp-htmlmin
npm install --save-dev gulp-imagemin
npm install --save-dev gulp-livereload
npm install --save-dev gulp-plumber
npm install --save-dev gulp-react
npm install --save-dev gulp-rename
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-sass
npm install --save-dev gulp-sourcemaps
npm install --save-dev gulp-uglify
npm install --save-dev gulp-watch
npm install --save-dev imagemin-pngquant
npm install --save-dev run-sequence

1.5.2. webpack

npm install --save-dev webpack

1.5.3. babel

npm install -g babel-cli
npm install -g babel-node
npm install --save babel-polyfill
npm install --save-dev babel-core
npm install --save-dev babel-eslint
npm install --save-dev babel-plugin-transform-async-to-module-method
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-stage-0

1.5.4. other

npm install --save bluebird