Playground de React

Escreva, execute e compartilhe trechos de código. Sem instalação.

Pré-visualizaçãoPrévia automática

Console

A saída do console aparecerá aqui.

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>
    );
}

Escreva React online e veja renderizar

Um playground de React online e grátis. Edite App.jsx e a prévia ao lado renderiza de novo um instante depois que você para de digitar: componentes, props, useState, useEffect e todos os outros hooks funcionam como em um app de verdade. Não há npm install, nem projeto Vite, nem servidor local para iniciar.

Seu JSX é compilado no seu navegador com o esbuild, o mesmo build que executa a prévia ao vivo nas aulas de React da Coddy, usando React 19. O projeto tem quatro arquivos, organizados como um app Vite: App.jsx, styles.css, main.jsx e index.html. Nada é enviado a um servidor, então a prévia acompanha o que você digita.

O que torna este playground de React útil

Prévia ao vivo: o app é recompilado e renderizado de novo um instante depois que você para de digitar, e o botão de atualizar (ou Ctrl+Enter) monta tudo do zero para reiniciar o estado.
React 19 de verdade com todos os hooks: useState, useEffect, useReducer, useRef, useContext, useMemo e os seus próprios hooks personalizados.
Erros de compilação apontam o arquivo, a linha e a coluna em uma página de erro legível, no lugar da prévia, então uma chave esquecida nunca deixa a tela em branco.
Um console abaixo da prévia mostra console.log, avisos e erros de execução dos seus componentes.
Seu código é salvo no navegador enquanto você digita. Abra a prévia em uma nova aba, ou copie e baixe qualquer arquivo para levá-lo a um projeto real.

O que você pode criar no playground de React

Uma lista de tarefas: um <input> controlado, useState para a lista e .map() renderizando um <li> por tarefa com uma key.
Um contador ou um cronômetro, para ver como useState e useEffect com uma função de limpeza se comportam.
Componentes que conversam entre si: suba o estado para um componente pai e passe valores e callbacks para baixo como props.
Um seletor de tema com createContext e useContext, estilizado a partir de styles.css.

Perguntas frequentes sobre o playground de React online

O playground de React online é grátis?

Sim. É grátis e sem cadastro: abra a página, edite o código e a prévia se atualiza.

Preciso de Node.js, npm ou Vite para rodar React aqui?

Não. O JSX é compilado no seu navegador e o React já está carregado na prévia, então você não instala o Node.js, não roda npm create vite e não inicia um servidor de desenvolvimento. Qualquer navegador moderno funciona, no Windows, macOS, Linux ou em um Chromebook.

Posso importar pacotes do npm?

Você pode importar react e react-dom/client, e seus próprios arquivos com um caminho relativo como import App from './App.jsx'. Outros pacotes do npm, como React Router ou Axios, não estão disponíveis, então o playground serve melhor para componentes, hooks e estado do que para um app completo com dependências.

Isto é o React Compiler?

Não. O React Compiler é um plugin de build que adiciona memoização aos seus componentes automaticamente. Aqui, compilar significa transformar JSX em JavaScript, o que o esbuild faz no seu navegador para que a prévia possa executá-lo. Muita gente procura um compilador de React online quando quer um lugar para rodar código React, que é exatamente o que esta página oferece.

Como aprendo React depois de testar o playground?

Altere o app de exemplo e veja o que acontece na prévia. Quando quiser um caminho estruturado, o curso de React da Coddy ensina JSX, componentes, props, estado, eventos e hooks em aulas curtas com a mesma prévia ao vivo, e depois segue para Next.js.