【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>
相关推荐
WYiQIU1 天前
11月面了7.8家前端岗,兄弟们12月我先躺为敬...
前端·vue.js·react.js·面试·前端框架·飞书
Bigger1 天前
🎨 用一次就爱上的图标定制体验:CustomIcons 实战
前端·react.js·icon
weixin79893765432...2 天前
React + Fastify + DeepSeek 实现一个简单的对话式 AI 应用
人工智能·react.js·fastify
用户600071819102 天前
【翻译】使用 React 19 操作构建可复用组件
react.js
禁止摆烂_才浅2 天前
Taro 小程序页面返回传参完整示例
react.js·微信小程序·taro
还是大剑师兰特2 天前
React面试题及详细答案150道(51-60)
react.js·react面试题·大剑师
10share2 天前
React组件间通信
react.js
是一碗螺丝粉2 天前
React Native 运行时深度解析
前端·react native·react.js
骑自行车的码农2 天前
🍂 React DOM树的构建原理和算法
javascript·算法·react.js
前端老宋Running3 天前
一次从“卡顿地狱”到“丝般顺滑”的 React 搜索优化实战
前端·react.js·掘金日报