当前位置： 首页 > news >正文

React 在 html 中 CDN 引入（包含 antd、axios ....）

news 2025/12/21 16:52:18

一、简介

  • 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">

二、案例

image.png

<!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&#xff0c;unpkg 是一个快速的全球内容交付网络&#xff0c;适用于 npm 上所有内容。 【必备】react 相关 cdn。附&#xff1a;github 官方文档获取、现阶段官方文档 CDN 网址。 <script crossorigin src"https://unpkg.com…...

编程日记 2023/8/5 21:59:37

数据结构----异或

数据结构----异或 一.何处用到了异或 1. 运算符 //判断是否相同 用到了异或&#xff0c;看异或结果如果是0就是相同&#xff0c;不是0就是不同//注意&#xff1a; 不能给小数用&#xff0c;小数没有相等的概念&#xff0c;所以小数判断是否相同都是进行相减判断2.找一堆数中…...

编程日记 2023/8/5 21:58:32

PHP Smarty模板的语法规则是怎样的？

首先&#xff0c;你要知道Smarty模板是以模板格式来编写的。模板格式类似于HTML&#xff0c;但它的语法更加简洁明了。 以下是PHP Smarty模板的语法规则和代码例子&#xff1a; 变量&#xff1a;在Smarty模板中&#xff0c;你可以使用变量来显示动态内容。变量通常以“{$”符…...

编程日记 2023/8/5 21:57:30

Socks IP轮换：为什么是数据挖掘和Web爬取的最佳选择？

在数据挖掘和Web爬取的过程中&#xff0c;IP轮换是一个非常重要的概念。数据挖掘和Web爬取需要从多个网站或来源获取数据&#xff0c;而这些网站通常会对来自同一IP地址的请求进行限制或封锁。为了避免这些问题&#xff0c;数据挖掘和Web爬取过程中需要使用Socks IP轮换技术。在…...

编程日记 2023/8/5 21:56:29

优化｜当机器学习上运筹学：PyEPO与端对端预测后优化

分享者&#xff1a;唐博 编者按&#xff1a;​ 这篇文章我想要写已经很久了&#xff0c;毕竟“端对端预测后优化”&#xff08;End-to-End Predict-then-Optimize&#xff09;正是我读博期间的主要研究方向&#xff0c;但我又一直迟迟没能下笔。想说自己杂事缠身&#xff08;实…...

编程日记 2023/8/5 21:55:27

Cocos Creator的 Cannot read property ‘applyForce‘ of undefined报错

序&#xff1a; 1、博主是看了这个教程操作的时候出的bug>游戏开发 | 17节课学会如何用Cocos Creator制作3D跑酷游戏 | P9 代码控制对象移动_哔哩哔哩_bilibili 2、其实问题不是出在代码上&#xff0c;但是发现物体就是不平移 3、node全栈的资料》node全栈框架 正文…...

编程日记 2023/8/5 21:54:26

纯css实现九宫格图片

本篇文章所分享的内容主要涉及到结构伪类选择器&#xff0c;不熟悉的小伙伴可以了解一下&#xff0c;在常用的css选择器中我也有分享相关内容。 话不多说&#xff0c;接下来我们直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"><head>&l…...

编程日记 2023/8/5 21:53:24

【MySQL】数据库的增删查改+备份与恢复

文章目录 一、创建数据库create二、数据库所使用的编码2.1 查询字符集和校验集2.2 指定编码创建数据库2.3 不同的校验集对比 三、删除数据库drop四、查看数据库show五、修改数据库alter六、数据库的备份与恢复6.1 备份 mysqldump6.2 恢复source6.3 仅备份几张表或备份多个数据库…...

编程日记 2023/8/5 21:52:22

Docker 部署 redis 举例

1、搜索镜像&#xff0c;也可以访问 https://hub.docker.com/ 搜索镜像&#xff0c;查看所有版本。 $ docker search redis2、拉取镜像 $ docker pull redis:5.03、启动镜像&#xff0c;并配置相关映射与绑定&#xff08;附&#xff1a;Docker 常用命令与指令参数&#xff09…...

编程日记 2023/8/5 21:51:21

通过HandlerMethodArgumentResolver实现统一添加接口入参参数

背景&#xff1a;项目中有些接口的入参需要用户id信息&#xff0c;最简单的做法在每个Controller方法调用的时候获取登录信息然后给入参设置用户id&#xff0c;但是这样就会有很多重复性的工作。另一个可行的也更好的方案可以使用HandlerMethodArgumentResolver来实现。 部分示…...

编程日记 2023/8/5 21:50:19

JAVA-spring boot 2.4.X报错Unable to find GatewayFilterFactory with name Hystrix

网关升级spring boot项目后&#xff0c;启动网关报错&#xff0c;具体报错信息如下: 2021-12-06 09:06:25.335 ERROR 45102 --- [oundedElastic-3] reactor.core.publisher.Operators : Operator called default onErrorDropped reactor.core.Exceptions$ErrorCallback…...

编程日记 2023/8/5 21:49:18

运输层---UDP协议

目录 一. 无连接运输&#xff1a;UDP1.1 定义1.2 特点1.3 应用 二. UDP报文段结构三. UDP检验和3.1 定义3.2 检验和计算实例3.2 UDP检验和的局限 一. 无连接运输&#xff1a;UDP 1.1 定义 UDP&#xff08;User Datagram Protocol&#xff09;用户数据报协议&#xff1a;由 [RF…...

编程日记 2023/8/5 21:48:17

【LeetCode】剑指 Offer Ⅱ 第3章：字符串（7道题） -- Java Version

题库链接&#xff1a;https://leetcode.cn/problem-list/e8X3pBZi/ 题目解决方案剑指 Offer II 014. 字符串中的变位词双指针 数组模拟哈希表 ⭐剑指 Offer II 015. 找到字符串中所有字母异位词双指针 数组模拟哈希表 ⭐剑指 Offer II 016. 不含重复字符的最长子字符串双指针…...

编程日记 2023/8/5 21:47:15

【python】绘图代码模板

【python】绘图代码模板 pandas.DataFrame.plot( )画图函数Seaborn绘图 -数据可视化必备主题样式导入数据集可视化统计关系散点图抖动图箱线图小提琴图Pointplot群图 可视化数据集的分布绘制单变量分布柱状图直方图 绘制双变量分布Hex图KDE 图可视化数据集中的成对关系 好看的图…...

编程日记 2023/8/5 21:46:15

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 菜单…...

编程日记 2023/8/5 21:45:13

基于Mediapipe的姿势识别并同步到Unity人体模型中

如题&#xff0c;由于是商业项目&#xff0c;无法公开源码&#xff0c;这里主要说一下实现此功能的思路。 人体关节点识别 基于Mediapipe Unity插件进行开发&#xff0c;性能比较低的CPU主机&#xff0c;无法流畅地运行Mediapipe&#xff0c;这个要注意一下。 Mediapipe33个人体…...

编程日记 2023/8/5 21:44:12

Linux下进程的特点与环境变量

目录 进程的特点 进程特点的介绍 进程时如何实现并发性的 进程间如何切换 概念铺设 PC指针 上下文 环境变量 PATH 修改PATH HOME SHELL env 命令行参数 什么是命令行参数&#xff1f; 打印命令行参数 通过函数获得环境变量 getenv 命令行参数 env 修改环境变…...

编程日记 2023/8/5 21:43:11

以Llama-2为例，在生成模型中使用自定义LogitsProcessor

以Llama-2为例&#xff0c;在生成模型中使用自定义LogitsProcessor 1. 前言2. 场景介绍3. 解决方法4. 结语 1. 前言 在上一篇文章 以Llama-2为例&#xff0c;在生成模型中使用自定义StoppingCriteria中&#xff0c;介绍了怎样在生成的过程中&#xff0c;使用stopping criteria…...

编程日记 2023/8/5 21:42:09

python 计算图片hash 缓存图片为key

python&#xff0c;有时希望缓存图片作为key&#xff0c;怎么办&#xff1f;缓存整张突破占用内存太多&#xff0c;不妨缓存hash值&#xff1a; Fast way to Hash Numpy objects for Caching import hashlib import numpy a numpy.random.rand(10, 100) b a.view(numpy.uin…...

编程日记 2023/8/5 21:41:08

制造型企业如何实现车间设备生产数据的实时采集？需要5G网络吗？

引言 在制造业数字化转型的浪潮下&#xff0c;实时采集车间设备生产数据变得尤为重要。工业边缘网关HiWoo Box作为一款专为工业应用而设计的智能设备&#xff0c;具备工业级设计和多种联网方式&#xff0c;为制造型企业提供了高性能的车间设备数据实时采集解决方案。本文将重点…...

编程日记 2023/8/5 21:40:06

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2025/12/8 14:57:15

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/12/9 3:19:35

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/12/17 11:51:51

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/12/15 1:25:04

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/12/15 17:56:55

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2025/12/17 15:56:26