React 组件开发初探

react.js

在线地址：http://slides.com/yueyao/deck/#/

COMPONENT

JSX

预编译语言， 一个基于ECMAscript 的xml-link 的语法扩展，最终都是将jsx代码转换为ECMAscript。

就像 CoffeeScript / TypeScript Sass/Less Jade / 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

• 组件化思考-徐飞
• facebook/react
• facebook/jsx
• React-cn
• webpack
• browserify
• browserify-handbook

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

http://iyueyaos.duapp.com/static/react/demos/dom.html