Playground de React

Escribe, ejecuta y comparte fragmentos de código, sin instalaciones.

Vista previaVista previa autom?tica

Consola

La salida de la consola aparecer? aqu?.

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

Escribe React online y míralo renderizar

Un playground de React online y gratis. Edita App.jsx y la vista previa de al lado se vuelve a renderizar un instante después de que dejas de escribir: los componentes, las props, useState, useEffect y el resto de hooks funcionan igual que en una app real. No hay npm install, ni proyecto de Vite, ni servidor local que arrancar.

Tu JSX se compila en tu navegador con esbuild, el mismo build que ejecuta la vista previa en vivo de las lecciones de React de Coddy, sobre React 19. El proyecto tiene cuatro archivos, organizados como una app de Vite: App.jsx, styles.css, main.jsx e index.html. Nada se envía a un servidor, así que la vista previa sigue el ritmo de lo que escribes.

Qué hace útil a este playground de React

Vista previa en vivo: la app se reconstruye y se vuelve a renderizar un instante después de que dejas de escribir, y el botón de recargar (o Ctrl+Enter) la monta de nuevo desde cero para reiniciar su estado.
React 19 real con todos los hooks: useState, useEffect, useReducer, useRef, useContext, useMemo y tus propios hooks personalizados.
Los errores de compilación indican el archivo, la línea y la columna en una página de error legible, en el lugar de la vista previa, así que una llave olvidada nunca te deja una pantalla en blanco.
Una consola bajo la vista previa muestra console.log, las advertencias y los errores en tiempo de ejecución de tus componentes.
Tu código se guarda en el navegador mientras escribes. Abre la vista previa en una pestaña nueva, o copia y descarga cualquier archivo para llevarlo a un proyecto real.

Qué puedes crear en el playground de React

Una lista de tareas: un <input> controlado, useState para la lista y .map() que renderiza un <li> por tarea con su key.
Un contador o un temporizador, para ver cómo se comportan useState y useEffect con una función de limpieza.
Componentes que se comunican entre sí: sube el estado a un componente padre y pasa valores y callbacks hacia abajo como props.
Un selector de tema con createContext y useContext, con estilos desde styles.css.

Preguntas frecuentes sobre el playground de React online

¿El playground de React online es gratis?

Sí. Es gratis y sin registro: abre la página, edita el código y la vista previa se actualiza.

¿Necesito Node.js, npm o Vite para ejecutar React aquí?

No. El JSX se compila en tu navegador y React ya está cargado en la vista previa, así que no instalas Node.js, no ejecutas npm create vite ni arrancas un servidor de desarrollo. Funciona en cualquier navegador moderno, en Windows, macOS, Linux o un Chromebook.

¿Puedo importar paquetes de npm?

Puedes importar react y react-dom/client, y tus propios archivos con una ruta relativa como import App from './App.jsx'. Otros paquetes de npm, como React Router o Axios, no están disponibles, así que el playground es ideal para componentes, hooks y estado, no para una app completa con dependencias.

¿Esto es el React Compiler?

No. El React Compiler es un plugin de build que añade memoización a tus componentes de forma automática. Aquí, compilar significa convertir JSX en JavaScript, algo que esbuild hace en tu navegador para que la vista previa pueda ejecutarlo. Mucha gente busca un compilador de React online cuando quiere un sitio donde ejecutar código React, que es justo lo que ofrece esta página.

¿Cómo aprendo React después de probar el playground?

Cambia la app de ejemplo y observa qué pasa en la vista previa. Cuando quieras un camino estructurado, el curso de React de Coddy enseña JSX, componentes, props, estado, eventos y hooks en lecciones cortas con la misma vista previa en vivo, y después continúa con Next.js.