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

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

一、简介

<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) => {
            // 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>
相关文章
|
1月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
43 0
|
4月前
|
前端开发 JavaScript CDN
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
108 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标签元素的字符串
52 0
|
3月前
|
前端开发 JavaScript
React 钩子:useState()
React 钩子:useState()
34 0
React 钩子:useState()
|
4月前
|
JavaScript 前端开发
【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM
【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM
|
前端开发
React-22:React脚手架配置axios代理
React-22:React脚手架配置axios代理
273 0
React-22:React脚手架配置axios代理
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
78 0