【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>
相关推荐
晴空雨2 小时前
💥 React 容器组件深度解析:从 Props 拦截到事件改写
前端·react.js·设计模式
阿虎儿4 小时前
React 引用(Ref)完全指南
前端·javascript·react.js
阿虎儿4 小时前
React 事件类型完全指南:深入理解合成事件系统
前端·javascript·react.js
梨子同志5 小时前
React18中setState
react.js
golang学习记5 小时前
🔥 从0死磕全栈:以React为起点,开启我的全栈之旅
前端·react.js
Fez7116 小时前
Momentjs对象可变性导致DatePicker异常(React+Antd)
react.js·ant design
浩星9 小时前
react+taro打包到不同小程序
react.js·小程序·taro
秋秋小事13 小时前
React Hooks useEffect的使用
react.js
北海几经夏20 小时前
React自定义Hook
前端·react.js
sorryhc1 天前
【AI解读源码系列】ant design mobile——Space间距
前端·javascript·react.js