react.js

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过来,整理出一份文档.可能不全,后续还得多提炼总结和完善. 一.组件内方法书写, ...

随机推荐

java web分页查询初试
ssh2分页查询初试,放着记录学习一下. entity:student.java: package com.zte.entity; /** * 数据持久化,跟数据库的的相应的表的字段是对应的. * * ...
【TFS】增加组员，以及用户权限分配
一.创建windows用户. 二.TFS ->组成员资格->双击项目集合管理员->添加创建的Windows用户(最高权限) 三.设置权限: TFS权限的复杂,其实也不是很复杂,它只 ...
filezilla无法连接linux服务器
问题描述: 响应: 220 (vsFTPd 2.2.2)命令: AUTH TLS错误: 无法连接到服务器状态: 已从服务器断开排查步骤: 1 检查服务器IP地址.用户名.密码是否正确 2 在控制面板 ...
V - stl 的优先队列 Ⅱ
Description Because of the wrong status of the bicycle, Sempr begin to walk east to west every morni ...
Windows下安装PHP扩展及资源下载地址（memcached为例）
官方下载的php安装包ext目录里以经包含了常用的php扩展,但某些情况下并不能满足我们项目需求,比如memcache扩展就不在官方的php安装包里.这时就需要我们自己去下载安装. 本文列出php官方 ...
异常处理 - PHP手册笔记
PHP代码中所产生的异常可被throw语句抛出,并被catch语句捕获.需要进行异常处理的代码都必须放入try代码块内,每一个try至少要有一个与之对应的catch.当一个异常被抛出时,所在代码块后面 ...
Python信息采集器使用轻量级关系型数据库SQLite
1,引言Python自带一个轻量级的关系型数据库SQLite.这一数据库使用SQL语言.SQLite作为后端数据库,可以搭配Python建网站,或者为python网络爬虫存储数据.SQLite还在其它 ...
项目 Web 的 NuGet 程序包还原失败: 找不到“1.0.0”版本的程序包“Microsoft.Net.Compilers”。。 0
项目 Web 的 NuGet 程序包还原失败: 找不到“1.0.0”版本的程序包“Microsoft.Net.Compilers”.. 0 使用vs的NutGet包管理器时,另一台电脑从svn下载 ...
最少步数（bfs）
最少步数时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 ...
swift笔记05
数组的定义: var 北京十号线 = ["国家图书馆","巴沟"] 北京十号线.count //或者数组的长度 var a = [Int]() //创建一 ...

React 组件开发初探