直接在浏览器运行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 ...
随机推荐
- T-SQL 带参数存储过程
创建带参数的存储过程 use StudentManager go if exists(select * from sysobjects where name='usp_ScoreQuery4') dr ...
- Linux下rz，sz与ssh的配合使用
Linux下rz,sz与ssh的配合使用 一般来说,linux服务器大多是通过ssh客户端来进行远程的登陆和管理的,使用ssh登陆linux主机以后,如何能够快速的和本地机器进行文件的交互呢,也就是上 ...
- SAS ODS GRAPHICS SGPLOT 画图 指存放定路径、名称、指定格式
OPTION NOCENTER LS=MAX PS=MAX NODATE; LIBNAME S 'E:\00@Data'; PROC FREQ DATA=S.DATA00; TABLES CLE_DA ...
- dropdownlist 绑定方法
this.ddlUnit.SelectedValue = id; //注意大小写,如果选中失败会显示默认值. ListItem item=ddlUnit.Items.FindByValue(id); ...
- SpringBoot在Kotlin中的实现（二）
根据现在的开发模式和网上的一些资料,SpringBoot需要对业务和操作进行分层,通常分为controller.entity.service.respository等结构.下面以Kotlin官网的例子 ...
- Python源码文件中带有中文时，输出乱码
Python源码文件中带有中文时,文件头应加注释: #!/usr/bin/env python # -*- coding: utf-8 -*- 第一行注释是为了告诉Linux/OS X系统,这是一个P ...
- 初步认识Angulajs
Angulajs是一个MVC前段框架,项目中使用Angulajs必须按照框架的写法编写代码,可以统一代码规范易于后期代码的维护. M Model 模型-数据,V View 视图-表现层 HTML/C ...
- Laravel-初体验笔记
一直想学Laravel却动不了手,刚好需要研究一个workflow之类的功能,有个Laravel项目一个登陆就把我搞晕,看Laravel文档看的也不能看进去,直接新建个Laravel仿一个,动手搞起来 ...
- [转]IISExpress配置使其能通过IP访问方法
转自http://www.cnblogs.com/liujh/p/4315927.html 环境说明: 本机IP:192.168.2.100:Web端口:11843 步骤一 打开[我的文档]\IISE ...
- eclipse创建maven组合项目
创建普通maven项目作为父项目: packaging类型选择pom. 创建子项目即可(需要mvn eclipse:eclipse构建为eclipse项目)