直接在浏览器运行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 ...
随机推荐
- CyclicBarrier循环屏障相关
简介 CyclicBarrier 的字面意思是可循环使用(Cyclic)的屏障(Barrier).它要做的事情是,让一组线程到达一个屏障(也可以叫同步点)时被阻塞,直到最后一个线程到达屏障时,屏障才会 ...
- http note
http 多媒体传输协议 HyperText Transfer Protocol 超文本传输协议 https Hyper Text Transfer Protocol over Secure Sock ...
- C# DataGirdview手动添加数据，导出txt文件并自动对齐
//DataGirdview手动添加数据 private void btnDataGirdView_Click(object sender,EventArgs e) { dataGridV ...
- C#语言基础知识
一. string i_str = "321"; string 型,强制转换成 int 型 int i_int1 = int.parse(i_str); string 型,强制转换 ...
- Android Studio将项目打包成apk
Android Studio将项目打包成apk 第一种方法:适合自己调试用. (1)直接在项目中生成: (2)位置是在你的项目中 第二种方法:适合发布应用. (1)找到Generate Signed ...
- HDFS高级功能
HDFS的六大高级特性: 安全模式 安全模式是HDFS所处的一种特殊状态,在这种状态下,文件系统只接受读数据请求,而不接受删除.修改等变更请求.在NameNode主节点启动时,HDFS首先进入安全模式 ...
- tp5 计算两个日期之间相差的天数
//两个日期之间相差的天数 function diffBetweenTwoDays ($day1, $day2) { $second1 = strtotime($day1); $second2 = s ...
- CS229 1 .线性回归与特征归一化(feature scaling)
线性回归是一种回归分析技术,回归分析本质上就是一个函数估计的问题(函数估计包括参数估计和非参数估计),就是找出因变量和自变量之间的因果关系.回归分析的因变量是应该是连续变量,若因变量为离散变量,则问题 ...
- python+selenium+PhantomJS批量投递智联简历(不要用自己的账号进行测试，请使用小号，很烦人的，哈哈哈)
1.环境python2.7+selenium+PhantomJS(软件安装和库的安装网上都有教程我们跳过,so easy) 2.原理 绕过首页登录需要验证码,直接进入搜索栏,输入搜索的职位+地区搜索出 ...
- TableStore：单行操作
说明: 首先需要添加TableStore的依赖 <dependency> <groupId>com.aliyun.openservices</groupId> &l ...