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>
相关文章
|
9月前
|
前端开发 JavaScript
深入理解并实践React Hooks —— useEffect与useState
深入理解并实践React Hooks —— useEffect与useState
261 1
|
7月前
|
前端开发
深入探索React Hooks:从useState到useEffect
深入探索React Hooks:从useState到useEffect
78 3
|
7月前
|
前端开发 JavaScript
深入探索React Hooks:从useState到useEffect
深入探索React Hooks:从useState到useEffect
|
7月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
122 2
|
7月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
99 0
|
8月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
8月前
|
前端开发 JavaScript CDN
React 安装(CDN)
10月更文挑战第6天
157 2
|
9月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
141 6
|
9月前
|
前端开发
React中函数式Hooks之useState的使用
本文介绍了React中函数式组件的Hooks——`useState`的使用方法。`useState`允许在函数式组件中使用状态,它返回一个数组,其中包含当前状态的值和更新该状态的函数。文章通过示例代码展示了如何声明状态变量和更新状态变量,包括对数值和对象状态的更新。此外,还展示了如何通过点击按钮触发状态更新,实现交互功能。
79 1
|
9月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
268 0
react字符串转为dom标签,类似于Vue中的v-html