【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>
相关推荐
outstanding木槿37 分钟前
react中安装依赖时的问题 【集合】
前端·javascript·react.js·node.js
霸王蟹1 小时前
React中useState中更新是同步的还是异步的?
前端·javascript·笔记·学习·react.js·前端框架
霸王蟹1 小时前
React Hooks 必须在组件最顶层调用的原因解析
前端·javascript·笔记·学习·react.js
Coding的叶子5 小时前
React Flow 节点事件处理实战:鼠标 / 键盘事件全解析(含节点交互代码示例)
react.js·交互·鼠标事件·fgai·react agent
it_remember11 小时前
新建一个reactnative 0.72.0的项目
javascript·react native·react.js
ZHOU_WUYI16 小时前
使用 Docker 部署 React + Nginx 应用教程
nginx·react.js·docker
互联网搬砖老肖20 小时前
React组件(一):生命周期
前端·javascript·react.js
小马哥编程20 小时前
React和Vue在前端开发中, 通常选择哪一个
前端·vue.js·react.js
OK_boom1 天前
React-useRef
javascript·react.js·ecmascript
GISer_Jing1 天前
React底层架构深度解析:从虚拟DOM到Fiber的演进之路
前端·react.js·架构