【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>
相关推荐
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
虫虫rankourin11 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
开心不就得了12 小时前
React 状态管理
react.js·typescript
天天进步201513 小时前
掌握React状态管理:Redux Toolkit vs Zustand vs Context API
linux·运维·react.js
冷冷的菜哥13 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
用户76787977373213 小时前
后端转全栈之Next.js文件约定
react.js·next.js
却尘16 小时前
React useMemo 依赖陷阱:组件重挂载,状态无限复原
前端·javascript·react.js
遂心_20 小时前
React useState:20分钟彻底掌握这个让你"状态满满"的Hook
前端·javascript·react.js
江城开朗的豌豆21 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
江城开朗的豌豆21 小时前
解密DVA:React应用的状态管理利器
前端·javascript·react.js