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模式:
Alt text

	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

迅速壮大的组件库

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
http://iyueyaos.duapp.com/static/react/demos/dom.html

你可能感兴趣的:(react)