【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>
相关推荐
知识分享小能手5 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
蓝瑟8 小时前
React 项目实现拖拽排序功能,如何在众多库中选对 “它”
前端·javascript·react.js
小刘不知道叫啥9 小时前
React 源码揭秘 | 合成事件
前端·javascript·react.js
冰万森10 小时前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
千码君201614 小时前
React Native:关于react自定义css属性的位置
css·react native·react.js·前端框架·ecmascript·组件嵌套
小小前端_我自坚强15 小时前
React Hooks 使用详解
前端·react.js·redux
右子15 小时前
React 编程的优雅艺术:从设计到实现
前端·react.js·mobx
Dcc19 小时前
@tanstack/react-query详解 🔥🔥🔥React的异步数据管理神器
前端·react.js
多啦C梦a2 天前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js