React.js初探(一)
前端框架多如牛毛的今天,团队的技术选型很重要,没有最好的,只有最合适的,这话早已经被说烂了。
但是作为一个有追求的前端,对新技术的敏感以及尝试心理还是要有的。
虽然React已经火的不行了,但由于自己的惰性,好吧,就是懒,看了很多的技术文章,但是一直没有开始去学习这个框架。
今天就开始这个框架的学习吧 - -。。。也作为本博第一篇文章。。。
var el = React.createElement(
"ul",
null,
React.createElement("li",null,"China"),
React.createElement("li",null,"Japan"),
React.createElement("li",null,"Korea")
);
<script>
//获取初始时间
var t0 = new Date().getTime(); //16ms定时器
setInterval(function(){
//获取当前时间,计算已运行时长
var t = new Date().getTime(),
delta = t - t0; var el = React.createElement('p', null, delta); React.render(el, document.querySelector('#content'))
},16);
</script>
render: function(){
return React.createElement(
"div",null,
React.createElement("div",{className:"ez-led"},"Hello, React!"),
React.createElement("div",{className:"ez-led"},"2015-04-15")
);
}
//JavaScript
var e = React.createElement(
"ul",null,
React.createElement("li",null,"China"),
React.createElement("li",null,"Japan"),
);
//JSX = JavaScript + XML like extension
var e = <ul>
<li>China</li>
<li>Japan</li>
</ul>;
//内联脚本
<script type="text/jsx">...</script>
//外部脚本
<script src="a.js" type="text/jsx"></script>
- 搜索DOM中的script标签,且标签类型为text/jsx的
- 读取该script内容,转换成JS语法代码
- 构建一个新的script,转换后的代码写入script,将该script插入head中
React.js初探(一)的更多相关文章
- React.js初探
React.js 菜鸟官方解释: React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- React.js入门必须知道的那些事
首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...
- React.js 官网入门教程 分离文件 操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...
- React.js入门笔记(再续):评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...
随机推荐
- Linux 环境下 Lua 安装(转)
系统环境:CentOS-6.2-x86_64. Lua 是嵌入式脚本语言,应用场景很广泛. 引自官网:Lua is used in many products and projects around ...
- swift 笔记 (十二) —— 下标
下标 swift同意我们为 类.结构体,枚举 定义下标,以更便捷的方式訪问一大堆属性.比方Array和Dictionary都是结构体,swift的project师已经为这两个类型提供好了下标操作的代码 ...
- Codeforces Round #234 (Div. 2) B. Inna and New Matrix of Candies
B. Inna and New Matrix of Candies time limit per test 1 second memory limit per test 256 megabytes i ...
- 【Android进阶】快捷图标的创建与移除
注释已经说得很清楚了,如果有疑问,请留言 /** * 添加桌面快捷方式 * * @param view */ public void click1(View view) { if (isExit()) ...
- Oracle 重建索引脚本
该指数是一个有力的武器,以提高数据库的查询性能. 没有索引,喜欢同样的标签库没有书籍,找书,他们想预订比登天还难.中,尤其是在批量的DML的情形下会产生对应的碎片.以及B树高度会发生对应变化.因此能够 ...
- UI设计学习路径(一个)—好酒也怕巷子深
来源 參与米老师对项目的验收的时候.听了老师对UI的看法才注意UI这块内容.非常奇怪为什么我们总是不能注意到本该注意的问题呢?软件开发难道仅仅是功能的实现不包含界面设计吗?当然不是.问题的根源在于我们 ...
- FastReport扩展类
题记: 最近有在用FastReport进行开发报表工作,当然也有在看书,突然想到可以用书中所写来实现一个fastreport的帮助类. 对于引用第三方类库,我们都会去将这个库在调用前进行相应的封装,也 ...
- Struts2之—实现自己的结果集的定义ajax
项目中我们常常遇到这种需求--页面部分刷新.比如:加入用户,转到加入用户页面时,页面自己主动载入了全部部门. 完整流程:选择所属部门,填写username和password,点击"注冊&qu ...
- MEF初体验之十一:查询组合容器
查询组合容器 组合容器暴露了几个get exports的重载方法和导出对象和对象集合.你需要注意下面的行为: 当请求单个对象实例时,如果未发现导出,一个异常将被抛出 当请求单个对象实例时,如果发现超过 ...
- Tempdb怎么会成为性能瓶颈
原文:Tempdb怎么会成为性能瓶颈 转自:http://blogs.msdn.com/b/apgcdsd/archive/2011/01/25/tempdb.aspx 我曾经遇到过这样一个性能问题. ...