【react8】如何在网页中直接引入react进行demo开发

  • babel在线cdn链接地址
bash 复制代码
https://unpkg.com/browse/@babel/standalone@7.26.9/
  • unpkg在线cdn链接地址
bash 复制代码
https://unpkg.com/

项目工程

代码实现

js 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.js"></script>
  <script src="./js/react-dom.js"></script>
  <script src="./js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function MyButton() {
          return <div>
                <button onClick={ () => {console.log("click")}}>Click me</button>
            </div>
        }

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(React.createElement(MyButton));

    </script>
</body>
</html>
相关推荐
向下的大树1 小时前
React 环境搭建 + 完整 Demo 教程
前端·react.js·前端框架
2501_916007471 小时前
React Native 混淆在真项目中的方式,当 JS 和原生同时暴露
javascript·react native·react.js·ios·小程序·uni-app·iphone
用户8168694747253 小时前
Context API 的订阅机制与性能优化
前端·react.js
异界蜉蝣3 小时前
React Fiber架构:Diff算法的演进
前端·react.js·前端框架
T___T3 小时前
从 0 搭建 React 待办应用:状态管理、副作用与双向绑定模拟
前端·react.js·面试
xiaoxue..3 小时前
单向数据流不迷路:用 Todos 项目吃透 React 通信机制
前端·react.js·面试·前端框架
qq_463408424 小时前
React Native跨平台技术在开源鸿蒙中使用WebView来加载鸿蒙应用的网页版或通过一个WebView桥接本地代码与鸿蒙应用
javascript·算法·react native·react.js·开源·list·harmonyos
全马必破三4 小时前
React虚拟Dom
前端·javascript·react.js
AAA阿giao4 小时前
拼乐高式开发:深入剖析 React 组件通信、弹窗设计与样式管理
开发语言·前端·javascript·react.js·前端框架·props·components
qq_463408425 小时前
React Native跨平台技术在开源鸿蒙中查找最长回文子串的算法,使用中心扩展法(Center Expansion Algorithm)来实现这个功能
算法·react native·react.js·开源·harmonyos