1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width">
  7.     <script type='text/javascript' src="./dist/React.js"></script>
  8.     <style>
  9.         .aaa {
  10.             width: 200px;
  11.             height: 200px;
  12.             background: red;
  13.         }
  14.     </style>
  15.     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  16.     <script type="text/babel">
  17.         class A extends React.Component {
  18.             constructor() {
  19.                 super()
  20.                  this.state = {
  21.                     aaa: 111
  22.                 }
  23.             }
  24.             click() {
  25.                 console.log('click')
  26.                 this.setState({
  27.                     aaa: this.state.aaa + 1
  28.                 })
  29.             }
  30.             componentDidMount() {
  31.                 console.log('componentDidMount')
  32.                  this.click()
  33.             }
  34.             componentDidUpdate() {
  35.                 console.log('componentDidUpdate')
  36.             }
  37.             render() {
  38.                 return React.createElement('div', {
  39.                     id: 'id',
  40.                     style: {
  41.                         height: this.state.aaa
  42.                     },
  43.                     onClick: this.click.bind(this),
  44.                     className: 'aaa'
  45.                 }, this.state.aaa)
  46.             }
  47.         }
  48.         var a
  49.         window.onload = function () {
  50.             a = React.render(<A />, document.body)
  51.             console.log(a)
  52.         }
  53.     </script>
  54. </head>
  56. <body>
  57.     <div>这个默认会被清掉</div>
  59. </body>
  61. </html>

你如果将babel改成国内的

  1.     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

变成

  1. <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代码的更多相关文章

  1. 解决WIN7无法安装高版本Node.js问题

    网上很多文章都让去安装低版本node 由于业务需求,低版本node npm 有一些包支持的不好 npm出cb() never call 本着更新npm 顺带弄个高版本的node 单独更新npm npm ...

  2. 如何编写高质量的js代码--底层原理

    转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇   本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...

  3. 兼容所有浏览器的设为首页收藏本站js代码

    大家发现传统的收藏本站按钮在360浏览器下面没有效果了,但是360浏览器用户群却非常之大.所以我们在网上找到一个兼容所有浏览器的收藏本站解决方案,具体功能如下: 设为首页 和 收藏本站js代码 兼容I ...

  4. 通过input上传图片，判断不同浏览器及图片类型和大小的js代码

    1.jsp页面代码 <form id="userPhoto" name="userPhoto" method="post" actio ...

  5. 区分IE版本的js代码

    function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgen ...

  6. 在Chrome、Firefox等高版本浏览器中实现低延迟播放海康、大华RTSP

    一.背景 现在到处是摄像头的时代,随着带宽的不断提速和智能手机的普及催生出火热的网络直播行业,新冠病毒的大流行又使网络视频会议系统成为商务会议的必然选择,因此RTSP实时视频流播放及处理不再局限于安防 ...

  7. 解决Safari高版本浏览器中默认禁用第三方COOKIE（含demo）

    前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方co ...

  8. 如何让VMware低版本运行VMware高版本创建的虚拟机

    如何让VMware低版本运行VMware高版本创建的虚拟机 问题描述: 本机安装的VMware Workstation是10版本,之前VMware Workstation 11版本创建的虚拟机,在运行 ...

  9. html5调用本机摄像头兼容谷歌浏览器高版本,谷歌浏览器低版本,火狐浏览器

    做这个功能的时候在网上查了一些资料,代码如下,在这个代码在谷歌浏览器46版本是没问题的,在火狐浏览器也行,但是在谷歌浏览器高版本下是不兼容的 <div id="body"&g ...

随机推荐

  1. mvc5总结(1)

    1.Global.asax 全局的启动项,初始化相关配置 2.路由,按照默认规定请求就行,没必要扩展太多 3.区域路由,当我们想命名相同的controller和action时,结合命名空间使用 pub ...

  2. 00012 - ps命令详解

    使用权限:所有使用者使用方式:ps [options] [--help]说明:显示瞬间行程 (process) 的动态参数:ps的参数非常多, 在此仅列出几个常用的参数并大略介绍含义-A    列出所 ...

  3. 成功设置open live writer

    mark一下,哈哈哈 https://www.cnblogs.com/chrisrockdl/

  4. 第11章 拾遗1：网络地址转换(NAT)和端口映射

    1. 网络地址转换(NAT) 1.1 NAT的应用场景 (1)应用场景:允许将私有IP地址映射到公网地址,以减缓IP地址空间的消耗 ①需要连接Internet,但主机没有公网IP地址 ②更换了一个新的 ...

  5. JavaScript基础知识点学习记录

    一.简介: JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如相应用户的各种操作. J ...

  6. 『MySQL』时间戳转换

    1 NOW() //当前时间 2 SYSDATE() //当前时间 3 CURRENT_TIMESTAMP 4 以'YYYY-MM-DD HH:MM:SS'或YYYYMMDDHHMMSS格式返回当前的 ...

  7. Python并发编程一（多进程）

    1.背景知识(进程.多道技术) 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一 ...

  8. WPF简单数据绑定

    XAML: <!--#region 数据绑定控件--> <DataGrid x:Name="dataGrid" Grid.Column="2" ...

  9. Angularjs中的Controller

    概念:一个应用(APP,本身也是一个大模块)是由若干个模块(module)组成的,每个模块实现一个功能.利于代码的复用. 书写格式: <!DOCTYPE html> <html ng ...

  10. LeetCode 11. [👁] Container With Most Water & two pointers

    盛最多水的容器 给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找 ...