React 在 html 中 CDN 引入（包含 antd、axios ....）
一、简介
-
cdn获取推荐 https://unpkg.com，unpkg是一个快速的全球内容交付网络，适用于npm上所有内容。 -
【必备】
react相关cdn。附：github 官方文档获取、现阶段官方文档 CDN 网址。<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -
【必备】
babel相关cdn。<!-- v6或稳定版 --> <!-- <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> -
【可选】其他辅助库相关
cdn。<!-- axios --> <script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- react-router --> <script type="text/javascript" src="https://unpkg.com/browse/react-router@6.14.2/dist/react-router.production.min.js"></script><!-- antd --> <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css">
二、案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- react 相关 --><script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- axios --><script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- antd --><script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css"><!-- 样式 --><style>.title {color: red;}</style>
</head>
<body><!-- React 容器 --><div id="app"></div><!-- 告诉 babel 转哪些，只需要在 script 标签写 type="text/babel" 就可以了 --><script type="text/babel">// 组件内容const Text = (props) => {return (<div className="title">组件内容</div>)}// 页面内容const Page = (props) => {const touchClick = () => {console.log('点击 + 1')}return (<div><Text /><antd.Button type="primary" onClick={touchClick}>Primary Button</antd.Button></div>)}// 将页面内容渲染到指定容器ReactDOM.render(<Page />, document.querySelector("#app"))</script>
</body>
</html>
相关文章：
React 在 html 中 CDN 引入（包含 antd、axios ....）
一、简介 cdn 获取推荐 https://unpkg.com，unpkg 是一个快速的全球内容交付网络，适用于 npm 上所有内容。 【必备】react 相关 cdn。附：github 官方文档获取、现阶段官方文档 CDN 网址。 <script crossorigin src"https://unpkg.com…...
数据结构----异或
数据结构----异或 一.何处用到了异或 1. 运算符 //判断是否相同 用到了异或，看异或结果如果是0就是相同，不是0就是不同//注意： 不能给小数用，小数没有相等的概念，所以小数判断是否相同都是进行相减判断2.找一堆数中…...
PHP Smarty模板的语法规则是怎样的？
首先，你要知道Smarty模板是以模板格式来编写的。模板格式类似于HTML，但它的语法更加简洁明了。 以下是PHP Smarty模板的语法规则和代码例子： 变量：在Smarty模板中，你可以使用变量来显示动态内容。变量通常以“{$”符…...
Socks IP轮换：为什么是数据挖掘和Web爬取的最佳选择？
在数据挖掘和Web爬取的过程中，IP轮换是一个非常重要的概念。数据挖掘和Web爬取需要从多个网站或来源获取数据，而这些网站通常会对来自同一IP地址的请求进行限制或封锁。为了避免这些问题，数据挖掘和Web爬取过程中需要使用Socks IP轮换技术。在…...
优化｜当机器学习上运筹学：PyEPO与端对端预测后优化
分享者：唐博 编者按： 这篇文章我想要写已经很久了，毕竟“端对端预测后优化”（End-to-End Predict-then-Optimize）正是我读博期间的主要研究方向，但我又一直迟迟没能下笔。想说自己杂事缠身（实…...
Cocos Creator的 Cannot read property ‘applyForce‘ of undefined报错
序： 1、博主是看了这个教程操作的时候出的bug>游戏开发 | 17节课学会如何用Cocos Creator制作3D跑酷游戏 | P9 代码控制对象移动_哔哩哔哩_bilibili 2、其实问题不是出在代码上，但是发现物体就是不平移 3、node全栈的资料》node全栈框架 正文…...
纯css实现九宫格图片
本篇文章所分享的内容主要涉及到结构伪类选择器，不熟悉的小伙伴可以了解一下，在常用的css选择器中我也有分享相关内容。 话不多说，接下来我们直接上代码： <!DOCTYPE html> <html lang"en"><head>&l…...
【MySQL】数据库的增删查改+备份与恢复
文章目录 一、创建数据库create二、数据库所使用的编码2.1 查询字符集和校验集2.2 指定编码创建数据库2.3 不同的校验集对比 三、删除数据库drop四、查看数据库show五、修改数据库alter六、数据库的备份与恢复6.1 备份 mysqldump6.2 恢复source6.3 仅备份几张表或备份多个数据库…...
Docker 部署 redis 举例
1、搜索镜像，也可以访问 https://hub.docker.com/ 搜索镜像，查看所有版本。 $ docker search redis2、拉取镜像 $ docker pull redis:5.03、启动镜像，并配置相关映射与绑定（附：Docker 常用命令与指令参数）…...
通过HandlerMethodArgumentResolver实现统一添加接口入参参数
背景：项目中有些接口的入参需要用户id信息，最简单的做法在每个Controller方法调用的时候获取登录信息然后给入参设置用户id，但是这样就会有很多重复性的工作。另一个可行的也更好的方案可以使用HandlerMethodArgumentResolver来实现。 部分示…...
JAVA-spring boot 2.4.X报错Unable to find GatewayFilterFactory with name Hystrix
网关升级spring boot项目后，启动网关报错，具体报错信息如下: 2021-12-06 09:06:25.335 ERROR 45102 --- [oundedElastic-3] reactor.core.publisher.Operators : Operator called default onErrorDropped reactor.core.Exceptions$ErrorCallback…...
运输层---UDP协议
目录 一. 无连接运输：UDP1.1 定义1.2 特点1.3 应用 二. UDP报文段结构三. UDP检验和3.1 定义3.2 检验和计算实例3.2 UDP检验和的局限 一. 无连接运输：UDP 1.1 定义 UDP（User Datagram Protocol）用户数据报协议：由 [RF…...
【LeetCode】剑指 Offer Ⅱ 第3章：字符串（7道题） -- Java Version
题库链接：https://leetcode.cn/problem-list/e8X3pBZi/ 题目解决方案剑指 Offer II 014. 字符串中的变位词双指针 数组模拟哈希表 ⭐剑指 Offer II 015. 找到字符串中所有字母异位词双指针 数组模拟哈希表 ⭐剑指 Offer II 016. 不含重复字符的最长子字符串双指针…...
【python】绘图代码模板
【python】绘图代码模板 pandas.DataFrame.plot( )画图函数Seaborn绘图 -数据可视化必备主题样式导入数据集可视化统计关系散点图抖动图箱线图小提琴图Pointplot群图 可视化数据集的分布绘制单变量分布柱状图直方图 绘制双变量分布Hex图KDE 图可视化数据集中的成对关系 好看的图…...
RTT学习笔记12-KConfig 语法学习
KConfig 语法学习 RTT 官方教程 https://www.rt-thread.org/document/site/#/development-tools/build-config-system/Kconfig 我自己写的IIC配置 menuconfig BSP_USING_I2C # I2C 菜单bool "Enable I2C BUS" # 提示I2C 菜单default n # 默认不使能I2C 菜单…...
基于Mediapipe的姿势识别并同步到Unity人体模型中
如题，由于是商业项目，无法公开源码，这里主要说一下实现此功能的思路。 人体关节点识别 基于Mediapipe Unity插件进行开发，性能比较低的CPU主机，无法流畅地运行Mediapipe，这个要注意一下。 Mediapipe33个人体…...
Linux下进程的特点与环境变量
目录 进程的特点 进程特点的介绍 进程时如何实现并发性的 进程间如何切换 概念铺设 PC指针 上下文 环境变量 PATH 修改PATH HOME SHELL env 命令行参数 什么是命令行参数？ 打印命令行参数 通过函数获得环境变量 getenv 命令行参数 env 修改环境变…...
以Llama-2为例，在生成模型中使用自定义LogitsProcessor
以Llama-2为例，在生成模型中使用自定义LogitsProcessor 1. 前言2. 场景介绍3. 解决方法4. 结语 1. 前言 在上一篇文章 以Llama-2为例，在生成模型中使用自定义StoppingCriteria中，介绍了怎样在生成的过程中，使用stopping criteria…...
python 计算图片hash 缓存图片为key
python，有时希望缓存图片作为key，怎么办？缓存整张突破占用内存太多，不妨缓存hash值： Fast way to Hash Numpy objects for Caching import hashlib import numpy a numpy.random.rand(10, 100) b a.view(numpy.uin…...
制造型企业如何实现车间设备生产数据的实时采集？需要5G网络吗？
引言 在制造业数字化转型的浪潮下，实时采集车间设备生产数据变得尤为重要。工业边缘网关HiWoo Box作为一款专为工业应用而设计的智能设备，具备工业级设计和多种联网方式，为制造型企业提供了高性能的车间设备数据实时采集解决方案。本文将重点…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）
本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
AxureRP-Pro-Beta-Setup_114413.exe （6.0.0.2887）
Name：3ddown Serial：FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名：Axure 序列号：8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...