使用React实现一个简洁的单页面功能

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

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.25.9/babel.min.js"></script>

<script type="text/babel">
    function App() {
        const [text, setText] = React.useState("");

        const handleChange = (event) => {
            setText(event.target.value);
        };

        return (
            <div style={{ textAlign: "center", marginTop: "50px" }}>
                <h1>Text Display</h1>
                <label>aa
                    <input type="text" value={text} onChange={handleChange} />
                </label>
                <p>{text}</p>
            </div>
        );
    }

    ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
相关推荐
D_C_tyu2 分钟前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After6 分钟前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好111 分钟前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式
dwedwswd17 分钟前
技术速递|从 0 到 1:用 Playwright MCP 搭配 GitHub Copilot 搭建 Web 应用调试环境
前端·github·copilot
2501_9387742931 分钟前
Leaflet 弹出窗实现:Spring Boot 传递省级旅游口号信息的前端展示逻辑
前端·spring boot·旅游
meichaoWen1 小时前
【CSS】CSS 面试知多少
前端·css
我血条子呢1 小时前
【预览PDF】前端预览pdf
前端·pdf·状态模式
90后的晨仔1 小时前
报错 找不到“node”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "node" 的入口点 。
前端
90后的晨仔1 小时前
5分钟搭建你的第一个TypeScript项目
前端·typescript
专注前端30年2 小时前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue