Playground React

Écrivez, exécutez et partagez des extraits de code - sans installation.

AperçuAper?u automatique

Console

La sortie de la console appara?tra ici.

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

Écrivez du React en ligne et voyez le rendu

Un playground React en ligne et gratuit. Modifiez App.jsx et l'aperçu à côté se met à jour un instant après que vous arrêtez de taper : composants, props, useState, useEffect et tous les autres hooks fonctionnent comme dans une vraie application. Pas de npm install, pas de projet Vite, pas de serveur local à lancer.

Votre JSX est compilé dans votre navigateur par esbuild, le même build qui fait tourner l'aperçu en direct des leçons React de Coddy, avec React 19. Le projet compte quatre fichiers, organisés comme une application Vite : App.jsx, styles.css, main.jsx et index.html. Rien n'est envoyé à un serveur, donc l'aperçu suit le rythme de votre saisie.

Ce qui rend ce playground React utile

Aperçu en direct : l'application est recompilée et affichée de nouveau un instant après que vous arrêtez de taper, et le bouton d'actualisation (ou Ctrl+Enter) la remonte de zéro pour réinitialiser son état.
Un vrai React 19 avec tous les hooks : useState, useEffect, useReducer, useRef, useContext, useMemo et vos propres hooks personnalisés.
Les erreurs de compilation indiquent le fichier, la ligne et la colonne dans une page d'erreur lisible, à la place de l'aperçu, donc une accolade oubliée ne laisse jamais un écran blanc.
Une console sous l'aperçu affiche les console.log, les avertissements et les erreurs d'exécution de vos composants.
Votre code est enregistré dans votre navigateur pendant que vous tapez. Ouvrez l'aperçu dans un nouvel onglet, ou copiez et téléchargez n'importe quel fichier pour le reprendre dans un vrai projet.

Ce que vous pouvez créer dans le playground React

Une liste de tâches : un <input> contrôlé, useState pour la liste et .map() qui affiche un <li> par tâche avec une key.
Un compteur ou un minuteur, pour voir comment se comportent useState et useEffect avec une fonction de nettoyage.
Des composants qui communiquent entre eux : remontez l'état dans un composant parent et transmettez valeurs et callbacks vers le bas sous forme de props.
Un sélecteur de thème avec createContext et useContext, stylé depuis styles.css.

FAQ du playground React en ligne

Le playground React en ligne est-il gratuit ?

Oui. Il est gratuit et sans inscription : ouvrez la page, modifiez le code et l'aperçu se met à jour.

Faut-il Node.js, npm ou Vite pour exécuter React ici ?

Non. Le JSX est compilé dans votre navigateur et React est déjà chargé dans l'aperçu, donc vous n'installez pas Node.js, vous ne lancez pas npm create vite et vous ne démarrez aucun serveur de développement. N'importe quel navigateur récent convient, sous Windows, macOS, Linux ou sur un Chromebook.

Puis-je importer des paquets npm ?

Vous pouvez importer react et react-dom/client, ainsi que vos propres fichiers avec un chemin relatif comme import App from './App.jsx'. Les autres paquets npm, comme React Router ou Axios, ne sont pas disponibles : le playground convient donc mieux aux composants, aux hooks et à l'état qu'à une application complète avec des dépendances.

Est-ce le React Compiler ?

Non. Le React Compiler est un plugin de build qui ajoute automatiquement de la mémoïsation à vos composants. Ici, compiler veut dire transformer le JSX en JavaScript, ce que fait esbuild dans votre navigateur pour que l'aperçu puisse l'exécuter. Beaucoup de gens cherchent un compilateur React en ligne alors qu'ils veulent un endroit où exécuter du code React, et c'est exactement ce que propose cette page.

Comment apprendre React après avoir essayé le playground ?

Modifiez l'application d'exemple et regardez ce qui se passe dans l'aperçu. Quand vous voulez un parcours structuré, le cours React de Coddy enseigne JSX, les composants, les props, l'état, les événements et les hooks en leçons courtes avec le même aperçu en direct, puis passe à Next.js.