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

  • babel在线cdn链接地址
bash 复制代码
https://unpkg.com/browse/@babel/[email protected]/
  • 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 小时前
6 个常见的 React 反模式,正在损害你的代码质量
react.js
拉不动的猪12 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试
Ada_疯丫头13 小时前
「React」React Router v7 framework qiankun window is not defined
react.js
CreatorRay13 小时前
受控组件和非受控组件的区别
前端·javascript·react.js
来碗螺狮粉15 小时前
CSR mode下基于react+i18next实践国际化多语言解决方案
react.js
Alang16 小时前
记一次错误使用 useEffect 导致电脑差点“报废”
前端·react.js
关山月16 小时前
🌟 正确管理深层嵌套的 React 组件
react.js
lisw0517 小时前
排序算法可视化工具——基于React的交互式应用
算法·react.js·排序算法
__不想说话__17 小时前
面试官问我React Router原理,我掏出了平底锅…
前端·javascript·react.js
DevinJohw17 小时前
为什么我选择[email protected]
react.js·vite