【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>
相关推荐
cn_mengbei2 天前
用React Native开发OpenHarmony应用:Reanimated共享元素过渡
javascript·react native·react.js
We་ct2 天前
React 性能优化精讲
前端·javascript·react.js·性能优化·前端框架·html·浏览器
光影少年2 天前
前端在页面渲染优化和组件优化经验?
前端·vue.js·react.js·前端框架
Wect3 天前
React 性能优化精讲
前端·react.js·性能优化
光影少年3 天前
react性能优化比较好的办法有哪些?
前端·react.js·性能优化
Ww.xh3 天前
Figma设计稿转React代码:ClaudeCode+MCP实战教程
前端·react.js·figma
朝阳393 天前
react【实战】自定义下拉框、单选、多选、输入框
前端·javascript·react.js
IT枫斗者4 天前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
倾颜4 天前
React 19 源码主线拆解 04:Fiber 到底是什么,React 为什么需要 Fiber?
前端·react.js·源码阅读
老王以为4 天前
为什么 React 和 Vue 不一样?
前端·vue.js·react.js