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
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 组件开发初探的更多相关文章
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- React组件开发（一）初识React
*React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- react组件开发规范（一）
这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在 ...
- jquery插件模式开发和react组件开发之间的异同
jquery插件模式开发和react组件开发之间的异同
- react复习总结（1）--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
- React 组件开发注意事项
0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...
- React组件开发
目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...
- react组件开发规范总结
开发react也有一段时间了,一开始的随手写,生命周期乱用,无状态组件的不熟悉.现在逐渐规范一下,从网上各个地方copy过来,整理出一份文档.可能不全,后续还得多提炼总结和完善. 一.组件内方法书写, ...
随机推荐
- svn 清理失败 (cleanup 失败) 的解决方法
svn 清理失败 (clean up 失败) 的解决方法 參考:http://www.tuicool.com/articles/biy6na 解决方法: step1: 到 sqlite官网 (http ...
- quick-cocos2d-x android返回键监听并实现原生退出对话框
这两天最终闲了一下,就顺手又把quick捡起来又学了学,一直都认为quick比cocos2dx那套lua绑定要方便很多,今天试了下android返回键的监听,还是挺好弄的,所以就有了这篇. 首先说明一 ...
- lua编译出liblua.so
偶遇一个事情,需要在C里面嵌入Lua代码,这真是痛苦了我好久…. 不知道为啥lua默认编译没有生成.so 的动态链接库,需要修改Makefile生成liblua.so,我用的版本是5.2 一.先修改根 ...
- 修改vim中的tab为4个空格
记录一下,避免用时还得搜........ 1.临时修改 在vi中,set tabstop=4 或 set ts=4 2.永久修改 vi --version 查看要修改的文件 如果是vim的话,修改~/ ...
- notepad++和gcc搭建语言环境
1,工具: Notepad++:http://pan.baidu.com/s/1sjlXl6X MinGW:http://pan.baidu.com/s/1qWyQ3lq 2,安装notepad++ ...
- 用maven骨架生成项目速度慢的问题
最近从IntelliJ Idea 14的Community版本切换到Ultimate. 问题出现 最近从IntelliJ Idea 14的Community版本切换到Ultimate,key是从网络上 ...
- jquery $(function) 区别
document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是onloa ...
- 简单随笔——如何在gridview的页脚显示信息。。。。
我是超级大菜鸟...哈哈 先上图看看是不是你需要的 第一步,右击gridview,在事件中,单击RowdataBond事件. 在这之前一定要记得在gridview属性中的ShowFooter设置为“t ...
- 什么是目标、度量、KPI、维度和细分
今天看到了Avinash的一篇文章:Web Analytics 101: Definitions: Goals, Metrics, KPIs, Dimensions, Targets,正是我想在影响网 ...
- Sicily 1790. Single Round Match
高进度求余 或者 将一个数奇位上的数字与偶位上的数字分别加起来,再求它们的差,如果这个差是11的倍数(包括0),那么,原来这个数就一定能被11整除． #include <iostream> ...