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 ...
随机推荐
- 应对黑客攻击SQL SERVER数据库中的一个案例
最近发现挂在网上server不知怎的,重新启动,那server现在主要是开始IIS服务,SQL SERVER 服务. 远程登录.发现系统响应十分缓慢.一个明显的停滞感,打开任务管理器,CPU在基本用法 ...
- c++爱问的面试问题
1.static_cast,dynamic_cast,reinterpret_cast,const_cast四种转换. 2.const行为 3.malloc/free, new/delete差额 4. ...
- NYOJ 118 路方案(第二小的跨越)
修路方案 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描写叙述 南将军率领着很多部队,它们分别驻扎在N个不同的城市里,这些城市分别编号1~N.因为交通不太便利,南将军准备修 ...
- EasyUI实战经验总结(转)
最近公司培训EasyUI,就做下总结吧,给有需要的人,源码在文章最后. 1.最常用的表格 ? 1 2 3 <div class="easyui-panel" data-opt ...
- Mac OS X 在捕捉AppLAN通信包
Mac OS X 在捕捉AppLAN通信包 一.拍摄模式 由于工作关系.经常要分析App wifi通讯协议.我的开发电脑是Mac Book. 大体有例如以下几种模式: + App与server进行ht ...
- RH133读书笔记(9)-Lab 9 Installation and System-Initialization
Lab 9 Installation and System-Initialization Goal: Successfully install Red Hat Enterprise Linux. Sy ...
- Android应用启动还有一个应用
已知包名和应用入口Activity 包名:org.ww 应用入口:Activity:org.ww.TestActivity Intent intent = new Intent(); intent.s ...
- html5 兼容参考文档 与 浏览器hack兼容参考文档
移动端兼容参考文档 http://mobilehtml5.org/ 浏览器hack http://browserhacks.com/ 附上部分截图
- 于XAML导入命名空间的代码
例如,下面的代码到指定的命名空间.不仅导入的命名空间,并且还为指定的命名空间前缀local.当然,你也可以指定一个前缀为另一个名称,这可以定义.导入后,市民可以在命名当前空间XAML使用代码.例如,在 ...
- 【C语言】reverse_string(char * string)(递归)
递归reverse_string(char * string)性能. 逆转 原始字符串 更改 相反,打印出的. /* 编写一个函数reverse_string(char * string)(递归实现) ...