【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 + ts + react-webcam + CamSplitter 实现虚拟摄像头解决win摄像头独占的问题
前端·react.js·前端框架
小喷友1 小时前
第 6 章:API 路由(后端能力)
前端·react.js·next.js
代码的余温3 小时前
React核心:组件化与虚拟DOM揭秘
前端·react.js·前端框架
小螺号dididi吹3 小时前
【React】状态管理
前端·javascript·react.js
代码的余温3 小时前
React Refs:直接操作DOM的终极指南
前端·javascript·react.js
前端小咸鱼一条7 小时前
React组件化的封装
前端·javascript·react.js
南方kenny7 小时前
TypeScript + React:让前端开发更可靠的黄金组合
前端·react.js·typescript
CF14年老兵8 小时前
✅ Next.js 渲染速查表
前端·react.js·next.js
dyb8 小时前
开箱即用的Next.js SSR企业级开发模板
前端·react.js·next.js
zzywxc7879 小时前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript