直接在浏览器运行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 ...
随机推荐
- OpenCV-Python基本功能
一.图像读取/保存 import cv2 img = cv2.imread("name.png") cv2.imwrite('save.jpg', img) #显示图像 cv2.i ...
- Keras 实现一个简单GAN
Keras 实现一个简单GAN 代码中需提供: Loss Function 参见Keras 或者 Tensorflow 文档 model_param_matrix 反向调整的模型参数/参数矩阵 ...
- WordPress整站轻松开启HTTPS
近两年来HTTPS取代HTTP已经成为大势所趋.早在2014年google Chromium安全团队提议将所有的HTTP协议网站标注为不安全.现在,Chrome浏览器已经开始执行这一标准了.从 Chr ...
- 用树莓派开Wifi热点
安装软件 首先设置软件源: vim /etc/apt/sources.list 查看软件源后面的版本,如果是wheezy,需要换成jessie wheezy是基于deb 7的版本 而现在是基于jess ...
- Submline Text 3插件sublimeTmpl添加新模板
1.安装 一般安装Package Control 2.插件 添加模板 1).进入Preferences->Browse Packages->SublimeTmpl->template ...
- 内存大小设置 Java heap space错误
1. 问题描述 当从数据库中查询大量的数据,每个模板取出来几百万条数据,或者是频繁的刷新项目.模板时就会占用Java虚拟机JVM的大量内存,超过内存就会出现报java.lang.OutOfMemory ...
- vue的异步组件按需加载
当build打包后,app.js过大的时候,可以考虑用异步组件的方式. import HomeHeader from "./components/Header"; import H ...
- git解决冲突插件之Beyond Compare
Beyond Compare主要作用: 1. 可以比较文件.文件夹的差异: 2. 将一个文件或文件夹的两个不同版本进行变更合并,生成一个输出. 基于以上两个特性,可以将beyond compare集成 ...
- MyBatis批量增删改查操作
前文我们介绍了MyBatis基本的增删该查操作,本文介绍批量的增删改查操作.前文地址:http://blog.csdn.net/mahoking/article/details/43673741 ...
- show processlist结果筛选(转)
在MySQL里面 show variables where variable_name like '%auto%' 这条语句可以正常执行,但是 show processlist where host ...