React 在线编译器

编写、运行和分享代码片段，无需任何配置。

预览自动预览

控制台

控制台输出会显示在这里。

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);
    return (
        <button className="counter" onClick={() => setCount(count + 1)}>
            {label}: {count}
        </button>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Try useState']);
    const [text, setText] = useState('');

    const addTask = () => {
        if (!text.trim()) return;
        setTasks([...tasks, text.trim()]);
        console.log('Added:', text.trim());
        setText('');
    };

    return (
        <main className="app">
            <h1>Hello, React!</h1>
            <Counter label="Clicks" />
            <div className="row">
                <input
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && addTask()}
                    placeholder="Add a task"
                />
                <button onClick={addTask}>Add</button>
            </div>
            <ul>
                {tasks.map((task, i) => (
                    <li key={i}>{task}</li>
                ))}
            </ul>
        </main>
    );
}

在线运行 React JS 代码，实时看到渲染结果

这是一个免费的 React 在线编译器和编辑器。修改 App.jsx，你一停下输入，旁边的预览就会重新渲染：组件、props、useState、useEffect 以及其他所有 Hook，都和在真实应用里一样工作。不需要 npm install，不需要 Vite 项目，也不用启动本地服务器。

你的 JSX 由 esbuild 在浏览器中编译，使用的是 React 19，和 Coddy React 课程里实时预览用的是同一套构建。项目共有四个文件，结构和 Vite 应用一样：App.jsx、styles.css、main.jsx 和 index.html。代码不会发送到服务器，所以预览能跟上你的输入速度。

这个 React 在线编译器好用在哪里

实时预览：停止输入片刻后，应用会自动重新构建并渲染；点击刷新按钮（或按 Ctrl+Enter）会从头重新挂载应用，重置它的状态。
真正的 React 19，所有 Hook 都能用：useState、useEffect、useReducer、useRef、useContext、useMemo，以及你自己写的自定义 Hook。
构建错误会指出具体的文件、行号和列号，并在预览区域显示清晰的错误页面，少写一个大括号也不会只留下一片空白。
预览下方的控制台会显示组件中的 console.log、警告和运行时错误。
代码会在你输入时保存在浏览器中。你可以在新标签页中打开预览，也可以复制或下载任意文件，把它搬进真实项目。

可以在 React 在线编译器里做什么

待办事项列表：一个受控的 <input>，用 useState 保存列表，再用 .map() 为每个任务渲染一个带 key 的 <li>。
计数器或计时器，看看 useState 和带清理函数的 useEffect 是怎样工作的。
相互通信的组件：把状态提升到父组件，再通过 props 向下传递值和回调函数。
用 createContext 和 useContext 做一个主题切换器，样式写在 styles.css 里。

React 在线编译器常见问题

React 在线编译器免费吗？

免费，而且无需注册：打开页面，修改代码，预览就会更新。

在这里运行 React 需要 Node.js、npm 或 Vite 吗？

不需要。JSX 在浏览器中编译，预览里已经加载好了 React，所以你不用安装 Node.js，不用运行 npm create vite，也不用启动开发服务器。任何现代浏览器都可以，无论是 Windows、macOS、Linux 还是 Chromebook。

可以导入 npm 包吗？

可以导入 react 和 react-dom/client，也可以用相对路径导入你自己的文件，例如 import App from './App.jsx'。React Router、Axios 等其他 npm 包无法使用，所以这个在线编辑器最适合练习组件、Hook 和状态，而不是搭建带依赖的完整应用。

这是 React Compiler 吗？

不是。React Compiler 是一个构建插件，会自动为组件添加记忆化（memoization）。这里的编译是指把 JSX 转换成 JavaScript，由 esbuild 在浏览器中完成，这样预览才能运行它。很多人搜索“React 在线编译器”，其实想找的是一个能运行 React 代码的地方，这个页面正是如此。

试用编译器之后，怎样学习 React？

修改示例应用，观察预览中的变化。想系统学习时，Coddy 的 React 课程会通过一节节短课讲解 JSX、组件、props、状态、事件和 Hook，课程里有同样的实时预览，之后还会继续讲 Next.js。