浏览器直接运行react_空山与新雨-编程思维

平时想写一个简单的react demo,需要使用create-react-app来初始一个项目,或者使用其他脚手架初始项目,属实有些小题大做;而使用vue的时候,新建一个html文件,然后外链vue包文件,立马就能像使用jquery一样开始写vue组件,非常的方便;

那么是否可以在html中直接引用react.js,然后写demo呢? 答案是可以的。

vue 组件中的template部分能够直接在html中运行使用,其原因是vue官方提供模板编译功能,按照文档,只要选择完整版的vue版本,就可以直接在浏览器中允许了。

对比之下浏览器不能运行jsx,react包内部也没有提供编译器; 好在babell和babel插件处理提供了这样的工具,所以问题就变成了如何在浏览器端运行babel;babel的官方文档提供了在线使用playground, 看看它是怎么做到的,直接参照来就行了。

通过查看network发现了这个js文件https://unpkg.com/@babel/standalone@7.17.11/babel.min.js, 看名字就能猜到正是我们需要的,接下来就是看怎么用了。

在babel官网查到使用文档 https://babeljs.io/docs/en/babel-standalone, 看起来蛮简单,于是就有了下面的代码,在html文件中直接运行

<div id="root"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.18.4/babel.min.js"></script>
<script type="text/babel">
  class App extends React.Component {
    constructor() {
      super()
      this.state = {
        num:1
      }
    }
    add=()=> {
      this.setState({
        num: this.state.num + 1
      })
    }
    render() {
      return <button onClick={this.add}  >
        {this.state.num}
      </button>
    }
  }
  window.onload = function () {
    ReactDOM.render(<App />, document.querySelector('#root'))
  }
</script>

需要注意到script中的 type="text/babel"是为了给babel使用的,所以不能省略。

最后在浏览器的截图如下:

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/walkermag/p/16228065.html

vue中key使用的问题_空山与新雨-编程思维

前言 在vue要求在遍历的时候最好加上key,在使用过程中总有些疑问,在这里做下分析 1.不使用key的时候vue是怎么处理的 在vue2.x文档中有如下描述 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一

前端资源公共cdn哪里找_空山与新雨-编程思维

写一些demo的时候使用vue/react脚手架来初始项目太小题大做,直接在html中写代码需要找到一些框架和库的cdn,这里做下推荐,仅限在测试环境用。 bootcdn 优点:是国内速度快,使用简单。 缺点:是资源有限,比如vue目前只有3.x版本,没有2.x版本 unpkg 缺点: 优势网络会中断 优点:和npm保

嘿,vue中keep-alive有个「大坑」你可能还不知道 - 编程思维

背景背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未必会造成缓存过多卡顿的问题。自然,就使用上了<keep-alive>提供的max属性

ts泛型进阶 - 编程思维

拿下泛型,TS 还有什么难的吗?大家好,我是沐华,本文将剖析 TS 开发中常见工具类型的源码实现及使用方式,并且搭配与内容结合的练习,方便大家更好的理解和掌握。本文目标:更加深入的理解和掌握泛型更加熟练这些内置工具类型在项目中的运用ExcludeExclude<T, U>:作用简单说就是把 T 里面的 U

vue中key使用的问题_空山与新雨-编程思维

前言 在vue要求在遍历的时候最好加上key,在使用过程中总有些疑问,在这里做下分析 1.不使用key的时候vue是怎么处理的 在vue2.x文档中有如下描述 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一

前端资源公共cdn哪里找_空山与新雨-编程思维

写一些demo的时候使用vue/react脚手架来初始项目太小题大做,直接在html中写代码需要找到一些框架和库的cdn,这里做下推荐,仅限在测试环境用。 bootcdn 优点:是国内速度快,使用简单。 缺点:是资源有限,比如vue目前只有3.x版本,没有2.x版本 unpkg 缺点: 优势网络会中断 优点:和npm保

博客园开通打赏功能及https下打赏失效的探究_赫山老妖-编程思维

博客园开通打赏功能以及HTTPS打赏失效的探究-玩转打赏功能 摘要        使用打赏脚本插件开通自己博客的打赏功能,研究并解决了打赏功能插件在https下失效的问题。 引言       长期混迹于博客园,最近在博客园开通了自己的博客,看到许多大佬博客都有打赏功能,虽然自己注册较晚,发的博文还不多,但每篇都是用心之

leetcode 39. 组合总和 js实现_蓓蕾心晴-编程思维

给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ,并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重复被选取 。如果至少一个数字的被选数