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

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

news 2026/4/6 17:01:14

一、简介

  • 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

LAN Chat Room：如何在没有互联网的环境中实现高效局域网通讯？

LAN Chat Room&#xff1a;如何在没有互联网的环境中实现高效局域网通讯&#xff1f; 【免费下载链接】LAN-Chat-Room &#x1f609;基于QT开发的局域网聊天室 项目地址: https://gitcode.com/gh_mirrors/la/LAN-Chat-Room 在当今高度依赖互联网的通讯环境中&#xff0c…...

编程新知 2026/4/6 14:31:57

网络安全应用初探：使用Qwen1.5-1.8B GPTQ分析日志与生成安全报告

网络安全应用初探&#xff1a;使用Qwen1.5-1.8B GPTQ分析日志与生成安全报告 想象一下这个场景&#xff1a;凌晨两点&#xff0c;安全运营中心的告警大屏上&#xff0c;成千上万条日志和告警信息像瀑布一样滚动。值班的安全分析师强打精神&#xff0c;试图从这片信息的海洋里分…...

编程新知 2026/4/6 14:01:42

终极指南：如何快速提升QuaggaJS在低分辨率图像下的条形码识别能力

终极指南&#xff1a;如何快速提升QuaggaJS在低分辨率图像下的条形码识别能力 【免费下载链接】quaggaJS An advanced barcode-scanner written in JavaScript 项目地址: https://gitcode.com/gh_mirrors/qu/quaggaJS QuaggaJS是一款强大的JavaScript条形码扫描库&#…...

编程新知 2026/4/6 13:27:03

【配网故障恢复+重构】主动配电网故障恢复的重构与孤岛划分统一模型Matlab实现

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f447; 关注我领取海量matlab电子书和数学建模资料&#x1f34a;个人信条&#xff1a;格物致知,完整Matl…...

编程新知 2026/4/6 13:08:28

Kandinsky-5.0-I2V-Lite-5s社区作品精选：看看其他开发者创造了什么

Kandinsky-5.0-I2V-Lite-5s社区作品精选&#xff1a;看看其他开发者创造了什么 1. 开篇&#xff1a;一场视觉创意的盛宴 Kandinsky-5.0-I2V-Lite-5s作为当前最热门的开源图像转视频模型&#xff0c;正在全球开发者社区掀起创作热潮。短短5秒就能将静态图片转化为富有生命力的…...

编程新知 2026/4/6 12:40:00

大模型微调实战：从SFT到RLHF的保姆级指南（含数据量建议）

大模型微调实战&#xff1a;从SFT到RLHF的保姆级指南&#xff08;含数据量建议&#xff09; 1. 为什么需要微调大模型&#xff1f; 想象一下&#xff0c;你刚拿到一台全新的智能手机&#xff0c;系统自带的功能已经足够强大&#xff0c;但如果你想让它更好地适应你的个人习惯—…...

编程新知 2026/4/6 12:11:33

抖音下载器技术解构：多策略协同架构与智能反爬机制深度剖析

抖音下载器技术解构&#xff1a;多策略协同架构与智能反爬机制深度剖析 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback …...

编程新知 2026/4/6 11:49:21

专业Steam创意工坊下载解决方案：WorkshopDL跨平台多引擎架构指南

专业Steam创意工坊下载解决方案&#xff1a;WorkshopDL跨平台多引擎架构指南 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL WorkshopDL是一款专为技术爱好者和进阶用户设计的跨…...

编程新知 2026/4/6 10:06:21

一键生成爆炸图：Nano-Banana拆解引擎在产品说明书制作中的应用

一键生成爆炸图&#xff1a;Nano-Banana拆解引擎在产品说明书制作中的应用 1. 产品拆解可视化的行业痛点 在产品说明书、维修手册和教育材料的制作过程中&#xff0c;清晰展示产品内部结构和组件关系是至关重要的。传统方法通常面临三大挑战&#xff1a; 3D建模成本高&#…...

编程新知 2026/4/6 9:03:02

interactive-deep-colorization与Adobe Photoshop Elements对比分析：免费AI上色工具如何超越专业软件？

interactive-deep-colorization与Adobe Photoshop Elements对比分析&#xff1a;免费AI上色工具如何超越专业软件&#xff1f; 【免费下载链接】interactive-deep-colorization Deep learning software for colorizing black and white images with a few clicks. 项目地址: …...

编程新知 2026/4/6 6:12:43