React 在 html 中 CDN 引入(包含 useState、antd、axios ....)

简介: React 在 html 中 CDN 引入(包含 useState、antd、axios ....)

一、简介

  • cdn 获取推荐 https://unpkg.comunpkg 是一个快速的全球内容交付网络,适用于 npm 上所有内容。
  • 【必备】react 相关 cdn。附:github 官方文档获取现阶段官方文档 CDN 网址
    ```html
    ```
  • 【必备】babel 相关 cdn
    ```html
    ```
  • 【可选】其他辅助库相关 cdn
    ```html
    rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css"> ```

二、案例

html <!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) => { // useState 使用 const [name, setName] = React.useState('张三') // 渲染 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>

相关文章
|
17天前
|
前端开发 数据处理 开发者
React的useState:开启组件状态管理的新篇章
React的useState:开启组件状态管理的新篇章
|
1月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
46 0
|
1月前
|
前端开发 JavaScript 架构师
react+typescript+umi+dva+antd
react+typescript+umi+dva+antd
24 0
|
2月前
|
前端开发 JavaScript 测试技术
React Hooks之useState、useRef
React Hooks之useState、useRef
|
2月前
|
存储 前端开发 JavaScript
React Hooks的useState、useRef使用
React Hooks的useState、useRef使用
22 2
|
2月前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
54 0
|
3月前
|
前端开发 JavaScript
React 钩子:useState()
React 钩子:useState()
36 0
React 钩子:useState()
|
4月前
|
JavaScript 前端开发
【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM
【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM
|
3天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
7天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
15 1