【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>
相关推荐
前端小趴菜058 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~9 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
ohMyGod_12315 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜0515 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界15 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
骑自行车的码农16 小时前
React短文系列 遍历fiber树 App的创建
前端·react.js
爱学习的茄子17 小时前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
Spider_Man17 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
10年前端老司机18 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
安替-AnTi19 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林