【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>
相关推荐
Lupino1 天前
烧掉 10 刀 API 费,我才明白小程序虚拟列表根本不用“库”!
react.js·微信小程序
嚴寒1 天前
前端配环境配到崩溃?这个一键脚手架让我少掉了一把头发
前端·react.js·架构
古茗前端团队1 天前
嗯…微信小程序主包又双叒叕不够用了!!!
react.js
寅时码2 天前
React 正在演变为一场不可逆的赛博瘟疫:AI 投毒、编译器迷信与装死的官方
前端·react.js·设计模式
学高数就犯困2 天前
React:一个例子讲清楚 useEffect 和 useReducer
react.js
Wect2 天前
JSX & ReactElement 核心解析
前端·react.js·面试
codingWhat3 天前
手撸一个「能打」的 React Table 组件
前端·javascript·react.js
程序员ys3 天前
前端权限控制设计
前端·vue.js·react.js
不会敲代码13 天前
从零开始用 TypeScript + React 打造类型安全的 Todo 应用
前端·react.js·typescript
小时前端4 天前
React性能优化的完整方法论,附赠大厂面试通关技巧
前端·react.js