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>
相关推荐
王林不想说话3 小时前
React自定义Hooks
前端·react.js·typescript
颜酱3 小时前
滑动窗口详解:原理+分类+场景+模板+例题(视频贼清晰)
javascript
橙某人3 小时前
LogicFlow 交互新体验:让锚点"活"起来,鼠标跟随动效实战!🧲
前端·javascript·vue.js
gustt3 小时前
React 跨层级组件通信:从 Props Drilling 到 useContext 的实战剖析
前端·react.js
程序猿的程3 小时前
Stock写给前端的股票行情 SDK: stock-sdk,终于不用再求后端帮忙了
前端·javascript·node.js
用户新3 小时前
V8引擎 精品漫游指南 -解析篇 语法解析 AST 作用域 闭包 字节码 优化 一文通关
前端·javascript
社恐的下水道蟑螂4 小时前
深入理解 React 中的 Props:组件通信的桥梁
前端·javascript·react.js
凌览4 小时前
2025年,我和AI合伙开发了四款小工具
前端·javascript·后端
留简4 小时前
从零搭建一个现代化后台管理系统:基于 React 19 + Vite + Ant Design Pro 的最佳实践
前端·react.js
然麦4 小时前
我的dify被精准攻击了(CVE-2025-55182)
人工智能·react.js