01_Hello_React案例

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="root"></div>
    <div id="app"></div>

    <!-- 添加依赖 -->
    <!-- 依赖三个包 -->
    <!-- CDN引入 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> 
    <!-- babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- 下载引入 -->

<!-- npm下载引入(脚手架) -->
<script type="text/babel">

    //编写React代码(jsx语法)
    //jsx语法 -> 普通的JavaScript代码 - > babel

    //渲染Hello world
    //React18之前:ReactDOM.render
    // ReactDOM.render(<h2>Hello World</h2>,document.querySelector("#root"));

    //React18之后
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<h2>Hello World</h2>)

    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<h2>你好啊,李银河</h2>)


</script>
</body>
</html>
相关推荐
是上好佳佳佳呀40 分钟前
【前端(十一)】JavaScript 语法基础笔记(多语言对比)
前端·javascript·笔记
莎士比亚的文学花园1 小时前
Linux驱动开发(3)——设备树
开发语言·javascript·ecmascript
CDN3601 小时前
排查实录:网站偶发502/504错误?360CDN回源超时配置与日志分析技巧
前端·数据库
之歆2 小时前
Day07_CSS盒子模型 · 样式继承 · 用户代理样式
前端·css
01漫游者2 小时前
JavaScript函数与对象增强知识
开发语言·javascript·ecmascript
DanCheOo2 小时前
AI 应用的安全架构:Prompt 注入、数据泄露、权限边界
前端·人工智能·prompt·安全架构
We་ct3 小时前
深度剖析浏览器跨域问题
开发语言·前端·浏览器·跨域·cors·同源·浏览器跨域
weixin_427771613 小时前
前端调试隐藏元素
前端
threelab3 小时前
Three.js 代码云效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
爱上好庆祝4 小时前
学习js的第五天
前端·css·学习·html·css3·js