【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>
相关推荐
火星思想42 分钟前
React如何实现时间切片
前端·react.js
qq_25249639964 小时前
react 子组件暴露,父组件接收
前端·javascript·react.js
zwjapple5 小时前
React 的 useEffect 清理函数详解
前端·react.js·前端框架
前端大白话6 小时前
前端必看!10个React实战技巧让你代码起飞,附超详细注释
前端·javascript·react.js
bigyoung6 小时前
使用 Arco Design 的 Table 组件实现可编辑列
前端·react.js·arco design
谦谦橘子6 小时前
手写react-router,理解react-router原理
前端·javascript·react.js
Aphasia3116 小时前
React 中ref的三种形式
前端·react.js
egghead263167 小时前
react常用hooks,超细~
react.js
张开心_kx7 小时前
面试官又问我是否了解React的单向数据流
前端·javascript·react.js
天狗精灵7 小时前
从节点重排看React 与 Vue3 的 Diff 算法
前端·vue.js·react.js