React-Playground

Code-Snippets schreiben, ausführen und teilen - keine Einrichtung nötig.

VorschauAutomatische Vorschau

Konsole

Konsolenausgaben erscheinen hier.

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

Schreib React online und sieh zu, wie es rendert

Ein kostenloser Online-Playground für React. Bearbeite App.jsx, und die Vorschau daneben rendert neu, kurz nachdem du aufhörst zu tippen: Komponenten, Props, useState, useEffect und alle anderen Hooks funktionieren wie in einer echten App. Kein npm install, kein Vite-Projekt und kein lokaler Server, den du starten musst.

Dein JSX wird in deinem Browser mit esbuild für React 19 kompiliert, mit demselben Build, der die Live-Vorschau in Coddys React-Lektionen antreibt. Das Projekt besteht aus vier Dateien, aufgebaut wie eine Vite-App: App.jsx, styles.css, main.jsx und index.html. Nichts wird an einen Server geschickt, deshalb hält die Vorschau mit deinem Tippen Schritt.

Was diesen React-Playground nützlich macht

Live-Vorschau: Die App wird neu gebaut und neu gerendert, kurz nachdem du aufhörst zu tippen, und der Aktualisieren-Button (oder Ctrl+Enter) mountet sie komplett neu, um ihren State zurückzusetzen.
Echtes React 19 mit allen Hooks: useState, useEffect, useReducer, useRef, useContext, useMemo und deine eigenen Custom Hooks.
Build-Fehler nennen Datei, Zeile und Spalte auf einer gut lesbaren Fehlerseite an der Stelle der Vorschau, sodass eine fehlende Klammer nie einen leeren Bildschirm hinterlässt.
Eine Konsole unter der Vorschau zeigt console.log, Warnungen und Laufzeitfehler deiner Komponenten.
Dein Code wird beim Tippen in deinem Browser gespeichert. Öffne die Vorschau in einem neuen Tab, oder kopiere und lade jede Datei herunter, um sie in ein echtes Projekt zu übernehmen.

Was du im React-Playground bauen kannst

Eine To-do-Liste: ein kontrolliertes <input>, useState für die Liste und .map(), das pro Aufgabe ein <li> mit einem key rendert.
Einen Zähler oder einen Timer, um zu sehen, wie sich useState und useEffect mit einer Cleanup-Funktion verhalten.
Komponenten, die miteinander kommunizieren: Hebe den State in eine Elternkomponente und gib Werte und Callbacks als Props nach unten weiter.
Einen Theme-Umschalter mit createContext und useContext, gestylt über styles.css.

FAQ zum Online-React-Playground

Ist der Online-React-Playground kostenlos?

Ja. Er ist kostenlos und ohne Anmeldung: Seite öffnen, Code bearbeiten, und die Vorschau aktualisiert sich.

Brauche ich Node.js, npm oder Vite, um React hier auszuführen?

Nein. Das JSX wird in deinem Browser kompiliert und React ist in der Vorschau bereits geladen, du installierst also kein Node.js, führst kein npm create vite aus und startest keinen Dev-Server. Jeder moderne Browser funktioniert, unter Windows, macOS, Linux oder auf einem Chromebook.

Kann ich npm-Pakete importieren?

Du kannst react und react-dom/client importieren, dazu deine eigenen Dateien über einen relativen Pfad wie import App from './App.jsx'. Andere npm-Pakete wie React Router oder Axios sind nicht verfügbar. Der Playground eignet sich deshalb besser für Komponenten, Hooks und State als für eine vollständige App mit Abhängigkeiten.

Ist das der React Compiler?

Nein. Der React Compiler ist ein Build-Plugin, das deinen Komponenten automatisch Memoization hinzufügt. Hier heißt kompilieren, JSX in JavaScript umzuwandeln. Das erledigt esbuild in deinem Browser, damit die Vorschau den Code ausführen kann. Viele suchen nach einem Online-Compiler für React, wenn sie eigentlich einen Ort meinen, an dem sie React-Code ausführen können, und genau das ist diese Seite.

Wie lerne ich React, nachdem ich den Playground ausprobiert habe?

Ändere die Beispiel-App und beobachte, was in der Vorschau passiert. Wenn du einen strukturierten Weg willst, bringt dir Coddys React-Kurs JSX, Komponenten, Props, State, Events und Hooks in kurzen Lektionen mit derselben Live-Vorschau bei und geht danach zu Next.js über.