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 ...
随机推荐
- A WPF/MVVM Countdown Timer
Introduction This article describes the construction of a countdown timer application written in C# ...
- 使用 Gradle 插件进行代码分析(转)
代码分析在大多数项目中通常是作为最后一个步骤(如果做了的话)完成的.其通常难以配置及与现有代码整合. 本文旨在勾勒出使用 Gradle 整合 PMD 与 FindBugs 的步骤,并将其与一个现有的 ...
- JComboBox
package swing.combox; import java.awt.FlowLayout; import javax.swing.DefaultComboBoxModel; import ja ...
- oracle db于,一个特定的数据字典pct miss其计算公式
这篇文章是原创文章,转载请注明出处: http://blog.csdn.net/msdnchina/article/details/38766801 本文提到的数据字典.以dc_histogram_d ...
- Linux开机自启动
永久打开或则关闭 chkconfig iptables on chkconfig iptables off 即时生效,重启后还原 service iptables start service ipta ...
- Android多线程.断点续传下载
多线程,可断点续传的demo!最早写于2010.7! /** * @brief 主界面 * @author lixp */ public class HomeActivity exten ...
- java实现线性链表结构
package com.hephec.ds; public class LinkedList<T> { //定义一个内部类节点Node Node实例代表链表的节点 class Node{ ...
- C++学习笔记1--基础知识
#include <iomanip> setpresition(int n); 设置输出精度浮点数是n. [goto声明] goto也被称为无条件分支语句购买勇于改变运行顺序的声明.got ...
- NetBeans工具学习之道:NetBeans IDE Java 高速新手教程
欢迎使用 NetBeans IDE! 本教程通过指导您创建一个简单的 "Hello World" Java 控制台应用程序,简要介绍 NetBeans IDE 工作流.学习完本教程 ...
- 移动端 微信 网易 触屏滑动回弹菜单(css版)
总结一下: 有点:网易新闻,微信 热文 都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧: bug: 部分安卓浏览器(uc,自带) 只支持持续滑动,不 ...