【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>
相关推荐
张元清6 小时前
React useIntersectionObserver Hook:懒加载与可见性检测(2026)
javascript·react.js
用户2986985301410 小时前
在 React 中使用 JavaScript 将 Excel 转换为 PDF
javascript·react.js·webassembly
木木剑光12 小时前
我开源了一个 React 组件库,沉淀了多个高频组件和实用 Hooks
前端·javascript·react.js
Csvn13 小时前
React 19 `use()` 来了:以后数据加载可以不用 useEffect?
前端·react.js
许我半盏清茶14 小时前
前端路由:理解 hash 路由和 history 路由原理
前端·react.js
老王以为1 天前
React Renderer 分离的多平台架构
前端·react native·react.js
张元清2 天前
React useDebounce Hook:给状态和回调做防抖(2026)
javascript·react.js
YFF菲菲兔2 天前
useState 源码解析
react.js
Flynt3 天前
我的Next.js项目升级到16之后,dev倒是快了,但build差点让我回退
react.js·next.js·turbopack
光影少年4 天前
HashRouter 和 BrowserRouter 区别、底层原理、部署差异
前端·react.js·nestjs