React 组件开发初探
在线地址：http://slides.com/yueyao/deck/#/
COMPONENT
JSX
预编译语言， 一个基于ECMAscript 的xml-link 的语法扩展，最终都是将jsx代码转换为ECMAscript。
就像 CoffeeScript / TypeScriptSass/LessJade / Haml
一个常见的布局结构（DomTree）:
<div class="note">
<div class="note-to">
</div>
<div class="note-from">
</div>
<div class="note-heading">
</div>
<div class="note-body">
</div>
</div>
一个XML (DATA)
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
一个用JSX 写的React 组件。(DATA+DomTree)
var Note = MyNoteComponent;
var NoteApp = (
<Note>
<Note.to/>
<Note.from />
<Note.heading/>
<Note.body/>
</Note>
);
render(NoteApp)
利用JSX编写，组件的结构和组件之间的关系看上去更加清晰。它提供了一个清晰，直观的方式来描述组件树。
也可以不用JSX，直接用js写:
React.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
生命周期
插件体系
react-with-addons.js
虚拟DOM
操作数据既操作DOM , 不用手动操作DOM
View层接口化，背后实现可替换为任意真实表现层（dom/canvas/svg/native）
FLUX
Facebook使用的前端应用架构，
React 相当于View， FLUX 规定了数据，视图，控制器之间如何交流
我们现在的MVC模式:
Model:
View: BaiduTemplate
Control: events
__Data: 自己存储，无规则，任性
FLUX:
Action -> Dispatcher -> Store -> View
↑
View -> Action （交互产生）
Dispatcher: 事件分发，分发给相应的Store
Store: 数据&逻辑, 分发给相应的View
View: 用户界面，交互触发Action
Action： 提供给 事件分发器需要的数据，状态
Redux(最新的FLUX库)
Other
同构
React 提供了模块来进行服务端渲染。主流语言全支持。
服务端渲染：
React.renderString （客户端服务端共用）
React.renderToStaticMarkup (不计划在客户端渲染这个组件)
业务逻辑共享（UI除外）
With CommonJS
- use browserify
- use webpack
- 其他兼容CommonJS规范的模块系统(modjs)
现有开发方式切换到React 无使用障碍。
1.安装组件
npm install rc-dialog
2.使用
var Dialog = require('rc-dialog');
React.renderComponent(
(<Dialog title={title} onClose={callback1} onShow={callback2}>
<p>first dialog</p>
</Dialog>),
document.getElementById('t1')
);
// use dialog
测试
单元测试： jasmine / mocha 等
功能测试：Casper.js
迅速壮大的组件库
- http://react-components.com/
- http://react-component.github.io/badgeboard/ 国产 支付宝系
- https://react.parts/web
- http://react.rocks/
- http://amazeui.org/react/ 国产 妹子UI
- React-Bootstrap
Documantations & Articles
Examples
http://iyueyaos.duapp.com/static/react/demos/index.html
http://iyueyaos.duapp.com/static/react/demos/addons.html
http://iyueyaos.duapp.com/static/react/demos/usecomponent.html