03_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>
    
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
        let message = "Hello World"

        function btnClick(){
            message = "Hello React"
            rootRender() 
        }

        const root = ReactDOM.createRoot(document.querySelector("#root"))


        function rootRender() {
            
            root.render((
                <div>
                    <h2>{message}</h2>
                    <button onClick={btnClick}>修改文本</button>    
                </div>

            ))
        }

        rootRender() 
    </script>
</body>
</html>
相关推荐
matlab_xiaowang2 小时前
Redux 入门:JavaScript 可预测状态管理库
开发语言·javascript·其他·ecmascript
IT观测3 小时前
大眼橙R3 Ultra发布,以技术突破重构1LCD投影体验标准
重构
前端摸鱼匠4 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
REDcker4 小时前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
Linsk6 小时前
Java和JavaScript的关系真是雷峰和雷峰塔的关系吗?
java·javascript·oracle
当时只道寻常6 小时前
浏览器文本复制到剪贴板:企业级最佳实践
javascript
jinanwuhuaguo6 小时前
(第二十九篇)OpenClaw 实时与具身的跃迁——从异步孤岛到数字世界的“原住民”
前端·网络·人工智能·重构·openclaw
Alice-YUE7 小时前
【js高频八股】防抖与节流
开发语言·前端·javascript·笔记·学习·ecmascript
科研前沿8 小时前
镜像孪生VS视频孪生核心技术产品核心优势
大数据·人工智能·算法·重构·空间计算
是上好佳佳佳呀8 小时前
【前端(十一)】JavaScript 语法基础笔记(多语言对比)
前端·javascript·笔记