交互式示例
直接在浏览器中运行和编辑 React 代码,体验实时预览的强大功能!
基础示例
从一个简单的计数器开始,了解 React 的状态管理。
💡 试试看:
- 点击按钮增加或减少计数
- 修改代码中的初始值
- 改变按钮的文字或样式
待办事项应用
构建一个完整的待办事项列表,学习状态更新和列表渲染。
表单处理
实现一个联系表单,学习如何处理受控组件和表单提交。
功能说明
🖥️ 实时预览
代码修改后立即显示结果,无需刷新页面
✏️ 自由编辑
直接修改代码,实验不同的实现方式
📱 响应式设计
移动端自动降级为只读模式,优化体验
⚡ 懒加载
滚动到视口时才加载编辑器,提升性能
技术细节
交互式示例使用 Sandpack 实现, 它提供了完整的 React 运行环境,包括:
- 代码编辑器(基于 CodeMirror)
- 实时预览窗口
- 错误提示和调试
- 完整的 React 生态支持
所有示例都在浏览器中运行,不会影响您的系统。 您可以随意修改代码,不用担心破坏任何东西!