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](./屏幕快照 2015-07-17 下午3.19.31.png)

	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 组件开发初探的更多相关文章

  1. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  2. React组件开发(一)初识React

    *React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...

  3. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  4. react组件开发规范(一)

    这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在 ...

  5. jquery插件模式开发和react组件开发之间的异同

    jquery插件模式开发和react组件开发之间的异同

  6. react复习总结(1)--react组件开发基础

    这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...

  7. React 组件开发注意事项

    0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...

  8. React组件开发

    目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...

  9. react组件开发规范总结

    开发react也有一段时间了,一开始的随手写,生命周期乱用,无状态组件的不熟悉.现在逐渐规范一下,从网上各个地方copy过来,整理出一份文档.可能不全,后续还得多提炼总结和完善. 一.组件内方法书写, ...

随机推荐

  1. Android 四大组件之 BroadcastReceiver

    0  简介        BroadcastReceiver也就是“广播接收者”的意思,顾名思义,它就是用来接收来自系统和应用中的 广播.        在Android系统中,广播体现在方方面面,例 ...

  2. Yaffs文件系统简介

    1 简介 1.1 应用场合 Yaffs(Yet Another Flash File System)文件系统是专门针对NAND闪存设计的嵌入式文件系统,目前有YAFFS和YAFFS2两个版本,两个版本 ...

  3. Unity 进度条3D制作(3D版)

    昨天我们一起学习了2D进度跳的制作,那么趁着我们脑海中还残存昨日的记忆,今天继续学习另一种方法: 实现思路:当鼠标悬浮Start按钮->实例化物体并显示进度->100/100->进入 ...

  4. NET基础课--组件2

    强命名组件:使用sn.exe生成公钥私钥对,公钥可以用工具查看.snk文件需严格保护. sn -k  d:\iron.snk       生成公钥私钥对 sn -p  d:\iron.snk  d:\ ...

  5. Hadoop 安装(1) CENTOS 安装与配置

    配置虚拟机,名字 Hadoop_Slave4,内存为1024MB,15GB. 进入安装centos. 配置Hostname: Slave4.Hadoop 配置网络,设置静态IP:192.168.1.2 ...

  6. Integer to Roman(JAVA)

    public String intToRoman(int num) { int[] values={1000,900,500,400,100,90,50,40,10,9,5,4,1}; String[ ...

  7. ASP.NET MVC中移除冗余Response Header

    本文主要介绍如何优化ASP.NET MVC使用IIS时Response Header中的不必要的信息 默认的,创建一个ASP.NET MVC项目,会在Response Header中包含一些敏感的信息 ...

  8. HDU 1151 - Air Raid

    很明显求最小路径覆盖 就是求最大匹配 #include <iostream> #include <cstdio> #include <cstring> #inclu ...

  9. R - 一只小蜜蜂...(第二季水)

    Description          有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数.         其中,蜂房的结构如下所示.     ...

  10. 配置nginx静态资源路径

    1.修改nginx.conf文件 server节点下location节点的 root目录修改 location / { root html; index index.html index.htm; } ...