直接在浏览器运行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 ...
随机推荐
- （转）Linux系统-tcpdump常用抓包命令
序言 单独总结tcpdump抓包的常用命令 主要语法 过滤主机/IP: tcpdump -i eth1 host 172.16.7.206 抓取所有经过网卡1,目的IP为172.16.7.206的网络 ...
- jquery事件及插件
jquery事件 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 chan ...
- JS+Ajax+Servlet:记录页面访问时间
1.前端JS记录页面访问时间 1.1JQuery版本: <script type="text/javascript" src="js/jquery.min.js&q ...
- 为什么使能RPS/RFS, 或者RSS/网卡多队列后，QPS反而下降？
http://laoar.github.io/blog/2017/05/07/rps/ TL;DR RPS 即receive side steering,利用网卡的多队列特性,将每个核分别跟网卡的一个 ...
- Solr之精确、匹配、排序、模糊查询-yellowcong
Solr查询数据,其实下面一堆的参数,我也没有做测试,只是转载过来了,我大概只用了高亮.排序.查询.分页,其他的好像没有用过,以后用再来查 一.基本查询 参数 意义 q 查询的关键字,此参数最为重要, ...
- solr 请求参数过长报错，Solr配置maxBooleanClauses属性不生效原因分析
博客分类: 上次已经写过一篇关于solr中,查询条件过多的异常的文章,这次在总结扩展一下: 有时候我们的查询条件会非常多,由于solr的booleanquery默认设置的条件数为1024,所以超过 ...
- oi造数据
#include<cstdio> #include<cstdlib> #include<cstring> #include<ctime> #includ ...
- python初探 socket
1.什么是socket? Socket中文译作:套接字,但是大家一般约定俗称的都用:socket.我想在解释socket是什么之前,先说它是用来干嘛的:socket是来建立‘通信’的基础,建立连接,传 ...
- swt text 回车 defaultSelected
今天试了一下SWT控件 TEXT 中的回车事件,使用 defaultSelected 进行处理,结果怎么也不能触发事件. 经过仔细排查,发现是TEXT选中了 wrap 的原因,毕竟如果是多行的话,肯定 ...
- mybatis foreach 循环 list(map)
直接上代码: 整体需求就是: 1.分页对象里面有map map里面又有数组对象 2.分页对象里面有list list里面有map map里面有数组对象. public class Page { pri ...