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>
相关推荐
leijiwen1 小时前
Web4.0本地生活商业模型:平台、商户、用户的价值边界重构
重构·生活
爱上妖精的尾巴1 小时前
8-18 WPS JS宏 正则表达式-边界匹配
开发语言·javascript·正则表达式·wps·jsa
爱上妖精的尾巴1 小时前
8-20 WPS JS宏 正则表达式-懒惰匹配
服务器·前端·javascript
网络点点滴1 小时前
组件通信props方式
前端·javascript·vue.js
aigcapi2 小时前
2026年短视频矩阵获客:从“功能叠加”到“底层重构”,矩阵系统哪家好?
人工智能·矩阵·重构
weixin_443478512 小时前
flutter组件学习之Flex / Expanded弹性布局组件
javascript·学习·flutter
九河云2 小时前
容器化与微服务:企业上云过程中的技术债务治理
大数据·微服务·云原生·重构·架构·数字化转型
无忧智库2 小时前
某省“十五五”智慧矿山一体化管控平台与井下无人驾驶系统深度解析:重构能源未来的数字基石(WORD)
重构·能源
萤丰信息2 小时前
智慧园区:数智赋能,重构城市运营新生态
人工智能·科技·安全·重构·架构·智慧城市·智慧园区
gihigo19982 小时前
SSA奇异谱分解:时频域信号成分分析与重构
数据结构·算法·重构