直接在浏览器运行jsx及高版本的js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type='text/javascript' src="./dist/React.js"></script>
<style>
.aaa {
width: 200px;
height: 200px;
background: red;
}
</style>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class A extends React.Component {
constructor() {
super()
this.state = {
aaa: 111
}
}
click() {
console.log('click')
this.setState({
aaa: this.state.aaa + 1
})
}
componentDidMount() {
console.log('componentDidMount')
this.click()
}
componentDidUpdate() {
console.log('componentDidUpdate')
}
render() {
return React.createElement('div', {
id: 'id',
style: {
height: this.state.aaa
},
onClick: this.click.bind(this),
className: 'aaa'
}, this.state.aaa)
}
}
var a
window.onload = function () {
a = React.render(<A />, document.body)
console.log(a)
}
</script>
</head>
<body>
<div>这个默认会被清掉</div>
</body>
</html>
你如果将babel改成国内的
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
变成
<script src="https://cdn.bootcss.com/babel-standalone/6.24.0/babel.js"></script>
什么react, react-dom, redux, react-redux都可以在 http://www.bootcdn.cn/ 上找到
直接在浏览器运行jsx及高版本的js代码的更多相关文章
- 解决WIN7无法安装高版本Node.js问题
网上很多文章都让去安装低版本node 由于业务需求,低版本node npm 有一些包支持的不好 npm出cb() never call 本着更新npm 顺带弄个高版本的node 单独更新npm npm ...
- 如何编写高质量的js代码--底层原理
转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇 本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...
- 兼容所有浏览器的设为首页收藏本站js代码
大家发现传统的收藏本站按钮在360浏览器下面没有效果了,但是360浏览器用户群却非常之大.所以我们在网上找到一个兼容所有浏览器的收藏本站解决方案,具体功能如下: 设为首页 和 收藏本站js代码 兼容I ...
- 通过input上传图片，判断不同浏览器及图片类型和大小的js代码
1.jsp页面代码 <form id="userPhoto" name="userPhoto" method="post" actio ...
- 区分IE版本的js代码
function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgen ...
- 在Chrome、Firefox等高版本浏览器中实现低延迟播放海康、大华RTSP
一.背景 现在到处是摄像头的时代,随着带宽的不断提速和智能手机的普及催生出火热的网络直播行业,新冠病毒的大流行又使网络视频会议系统成为商务会议的必然选择,因此RTSP实时视频流播放及处理不再局限于安防 ...
- 解决Safari高版本浏览器中默认禁用第三方COOKIE（含demo）
前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方co ...
- 如何让VMware低版本运行VMware高版本创建的虚拟机
如何让VMware低版本运行VMware高版本创建的虚拟机 问题描述: 本机安装的VMware Workstation是10版本,之前VMware Workstation 11版本创建的虚拟机,在运行 ...
- html5调用本机摄像头兼容谷歌浏览器高版本,谷歌浏览器低版本,火狐浏览器
做这个功能的时候在网上查了一些资料,代码如下,在这个代码在谷歌浏览器46版本是没问题的,在火狐浏览器也行,但是在谷歌浏览器高版本下是不兼容的 <div id="body"&g ...
随机推荐
- SCCM2012 R2实战系列之六：安装客户端代理软件
在安装客户端代理软件之前,请大家确保已经对本系列的第四和第五部分有了基本了解,而且对SCCM环境做了初始化配置和发现方法.我们目前讨论的是加域的计算机,对于工作组的计算机还需要进行额外的配置.在上篇文 ...
- linux system()函数详解
system(3) - Linux man page Name system - execute a shell command Synopsis #include <stdlib.h> ...
- linux环境下运行程序格式错误的问题，bash: ./helloworld: cannot execute binary file: Exec format error
在编译完quecOpen的example helloworld之后,我运行此程序,结果报错,详情如下: ricks@ubuntu:~/share/project/ql-ol-sdk/ql-ol-ext ...
- hue中使用oozie的workflow执行mr
workflow创建任务 进入hue–Workflows–编辑器–workflow–创建 拖一个mapreduce作业(在页面靠近顶端有一排选项图标)到页面中间虚线框中 Jar路径必须是hdfs中ja ...
- ZooKeeper系列(9)：ZooKeeper实现分布式Barrier和Queue
1. 快速开始 1.1概述: Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统,可提供的服务主要有:配置服务.名字服务.分布式同步.组服务等. 1.2 使用常见 1.2.1 统 ...
- RecyclerView.Adapter封装，最简单实用的BaseRecyclerViewAdapter；只需重写一个方法，设置数据链式调用；
之前对ListView的BaseAdapter进行过封装,只需重写一个getView方法: 现在慢慢的RecyclerView成为主流,下面是RecyclerView.Adapter的封装: Base ...
- 2-scala集合
1.集合的数据结构: array.seq .set .map(映射) 2.集合分类 集合分为可变集合和不可变集合(除元组外,元组没有可变和不可变) scala.collection.immutable ...
- 再谈编码 decode和encode
1. ascii. 有: 数字, 字母, 特殊字符. 8bit 1byte 128 最前面是0 2. gbk. 包含: ascii, 中文(主要), 日文, 韩文, 繁体文字. 16bit, 2byt ...
- 【Selenium-WebDriver自学】Selenium-RC脚本编写（十）
==================================================================================================== ...
- linux 下的ssh免密登陆设置
一,原理 说明: A为linux服务器a B为linux服务器b 每台linux都有ssh的服务端和客户端,linux下的ssh命令就是一个客户端 我们常用ssh协议来进行登陆或者是文件的拷贝,都需要 ...