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>
相关推荐
猫猫不是喵喵.2 小时前
Vue3 Props 属性
前端·javascript·vue.js
jarvisuni6 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
先吃饱再说7 小时前
编写一个颜色选择器之后,我理解了 React 工程化的三层架构
react.js·前端框架·前端工程化
先吃饱再说8 小时前
别说你懂 useEffect:从底层机制到生命周期管理,这篇全讲透了
react.js·前端框架
先吃饱再说8 小时前
从“传事件”到“只传值”:React + TypeScript 组件 Props 设计的两次进化
react.js·前端框架·前端工程化
破z晓8 小时前
javascript 导出excel表
开发语言·javascript·excel
小罗水9 小时前
第17章 后台管理端与演示支持
javascript·vue.js·ecmascript
万少11 小时前
DeepSeek-V4-Flash 正式版上线了,但这 3 个坑我帮你提前踩了
前端·javascript·后端
宁风NF11 小时前
JavaScript:网络请求与前端通信
开发语言·前端·javascript·网络·学习·ecmascript
吾儿良辰11 小时前
Flutter 迎来重大变革:Material 设计系统拆分,迈向更开放的 UI 框架
javascript·flutter·ui