当前位置: 首页 > article >正文

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

  • babel在线cdn链接地址
https://unpkg.com/browse/@babel/standalone@7.26.9/
  • unpkg在线cdn链接地址
https://unpkg.com/

项目工程

在这里插入图片描述

代码实现

<!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>

在这里插入图片描述


http://www.kler.cn/a/550753.html

相关文章:

  • OS-Genesis:基于逆向任务合成的 GUI 代理轨迹自动化生成
  • 若依Flowable工作流版本监听器使用方法
  • JSX和JS有什么区别
  • 从入门到精通:Postman 实用指南
  • SpringBoot3.x整合WebSocket
  • ES常用查询
  • 基于Dify、Ollama与DeepSeek的私有化AI知识库构建:工具作用、场景与优势分析
  • pythonrsa加密与sha256加密
  • 【亚马逊开发者账号02】终审问题SA+review_Pre-review+Doc.xlsx
  • 串的基本操作--数据结构
  • Copilot基于企业PPT模板生成演示文稿
  • AI前端开发赋能自主创业:ScriptEcho助你乘风破浪
  • 【kafka系列】Kafka如何保证消息不丢失?
  • Leetcode 3458. Select K Disjoint Special Substrings
  • qt实现文字跑马灯效果
  • 【CVE-2025-1094】 影响 SQL 注入的 PostgreSQL
  • CMS DTcms 靶场(弱口令、文件上传、tasklist提权、开启远程桌面3389、gotohttp远程登录控制)
  • 基于SSM框架的童装购买平台微信小程序(ssm论文源码调试讲解)
  • 矩阵系统源码搭建之多种剪辑功能技术开发,支持OEM
  • 通俗诠释 DeepSeek-V3 模型的 “671B” ,“37B”与 “128K”,用生活比喻帮你理解模型的秘密!