【react8】如何在网页中直接引入react进行demo开发

  • babel在线cdn链接地址
bash 复制代码
https://unpkg.com/browse/@babel/[email protected]/
  • 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>
相关推荐
谢尔登12 分钟前
【React】SWR 和 React Query(TanStack Query)
前端·react.js·前端框架
市民中心的蟋蟀17 分钟前
第十一章 这三个全局状态管理库之间的共性与差异 【上】
前端·javascript·react.js
菥菥爱嘻嘻1 小时前
React---Hooks深入
前端·javascript·react.js
谢尔登1 小时前
【React】使用 useContext + useReducer 实现一个轻量的状态管理库
前端·javascript·react.js
林太白2 小时前
Next.js超简洁完整篇
前端·后端·react.js
时光足迹2 小时前
电子书阅读器之章节拆分
前端·javascript·react.js
归于尽3 小时前
用火山引擎实现语音生成的实战踩坑与优化
前端·react.js
前端大卫3 小时前
localStorage 也能监听变化?带你实现组件和标签页的同步更新!【附完整 Vue/React Hook 源码】
前端·vue.js·react.js
安心不心安4 小时前
React状态管理——zustand
javascript·react.js·ecmascript
Jolyne_4 小时前
前端发送多次请求,怎么保证请求参数与请求对应?
react.js·面试