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

风清云淡_A2025-02-18 19:34

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>

上一篇：MacOS配置Homebrew

下一篇：Python实战进阶 No1: RESTful API - 基于Flask的实例说明