Flowing
Dev
更多工具
添加到项目
项目模式
搜索工具和命令…
⌘ K
简体中文
React Playground
免费
用 JSX/TSX 编写 React 组件和 hooks，实时查看它们是如何渲染的。 你的代码在浏览器里独立的沙盒中运行，绝不会被上传。
基础知识
App.tsx
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useState } from "react"; import { createRoot } from "react-dom/client"; function App() { const [count, setCount] = useState(0); return ( <main style={{ fontFamily: "system-ui", padding: 24 }}> <h1>React playground ⚛️</h1> <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button> </main> ); } createRoot(document.getElementById("root")!).render(<App />);
运行
边写边自动运行
运行时: React 19 + Sucrase
控制台
控制台输出会显示在这里。