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](./屏幕快照 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
迅速壮大的组件库
- 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过来,整理出一份文档.可能不全,后续还得多提炼总结和完善. 一.组件内方法书写, ...
随机推荐
- Android 四大组件之 BroadcastReceiver
0 简介 BroadcastReceiver也就是“广播接收者”的意思,顾名思义,它就是用来接收来自系统和应用中的 广播. 在Android系统中,广播体现在方方面面,例 ...
- Yaffs文件系统简介
1 简介 1.1 应用场合 Yaffs(Yet Another Flash File System)文件系统是专门针对NAND闪存设计的嵌入式文件系统,目前有YAFFS和YAFFS2两个版本,两个版本 ...
- Unity 进度条3D制作(3D版)
昨天我们一起学习了2D进度跳的制作,那么趁着我们脑海中还残存昨日的记忆,今天继续学习另一种方法: 实现思路:当鼠标悬浮Start按钮->实例化物体并显示进度->100/100->进入 ...
- NET基础课--组件2
强命名组件:使用sn.exe生成公钥私钥对,公钥可以用工具查看.snk文件需严格保护. sn -k d:\iron.snk 生成公钥私钥对 sn -p d:\iron.snk d:\ ...
- Hadoop 安装(1) CENTOS 安装与配置
配置虚拟机,名字 Hadoop_Slave4,内存为1024MB,15GB. 进入安装centos. 配置Hostname: Slave4.Hadoop 配置网络,设置静态IP:192.168.1.2 ...
- 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[ ...
- ASP.NET MVC中移除冗余Response Header
本文主要介绍如何优化ASP.NET MVC使用IIS时Response Header中的不必要的信息 默认的,创建一个ASP.NET MVC项目,会在Response Header中包含一些敏感的信息 ...
- HDU 1151 - Air Raid
很明显求最小路径覆盖 就是求最大匹配 #include <iostream> #include <cstdio> #include <cstring> #inclu ...
- R - 一只小蜜蜂...(第二季水)
Description 有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数. 其中,蜂房的结构如下所示. ...
- 配置nginx静态资源路径
1.修改nginx.conf文件 server节点下location节点的 root目录修改 location / { root html; index index.html index.htm; } ...