React online

Scrivi, esegui e condividi snippet di codice, senza configurare nulla.

AnteprimaAnteprima automatica

Console

L'output della console appare qui.

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

Esegui codice React JS online e guardalo prendere forma

Un compilatore e playground React online gratuito. Modifica App.jsx e l'anteprima accanto si aggiorna un attimo dopo che smetti di scrivere: componenti, props, useState, useEffect e tutti gli altri hook funzionano come in una vera app. Niente npm install, nessun progetto Vite e nessun server locale da avviare.

Il tuo JSX viene compilato nel browser con esbuild, la stessa build che fa girare l'anteprima dal vivo nelle lezioni React di Coddy, su React 19. Il progetto è composto da quattro file, organizzati come un'app Vite: App.jsx, styles.css, main.jsx e index.html. Niente viene inviato a un server, quindi l'anteprima tiene il passo con quello che scrivi.

Perché questo compilatore React online è utile

Anteprima dal vivo: l'app si ricompila e si aggiorna un attimo dopo che smetti di scrivere, e il pulsante di aggiornamento (o Ctrl+Enter) la rimonta da zero per azzerarne lo stato.
Vero React 19 con tutti gli hook: useState, useEffect, useReducer, useRef, useContext, useMemo e i tuoi hook personalizzati.
Gli errori di build indicano file, riga e colonna, in una pagina di errore leggibile al posto dell'anteprima, così una parentesi graffa mancante non ti lascia mai davanti a una schermata bianca.
Una console sotto l'anteprima mostra console.log, avvisi ed errori di runtime dei tuoi componenti.
Il codice viene salvato nel browser mentre scrivi. Apri l'anteprima in una nuova scheda, oppure copia e scarica qualsiasi file per spostarlo in un vero progetto.

Cosa puoi creare nel compilatore React online

Una lista di cose da fare: un <input> controllato, useState per la lista e .map() che mostra un <li> per ogni attività con una key.
Un contatore o un timer, per vedere come si comportano useState e useEffect con una funzione di cleanup.
Componenti che comunicano tra loro: sposta lo stato verso un componente genitore e passa valori e callback verso il basso come props.
Un selettore di tema con createContext e useContext, con lo stile definito in styles.css.

Domande frequenti sul compilatore React online

Il compilatore React online è gratuito?

Sì. È gratuito e senza registrazione: apri la pagina, modifica il codice e l'anteprima si aggiorna.

Mi servono Node.js, npm o Vite per eseguire React qui?

No. Il JSX viene compilato nel browser e React è già caricato nell'anteprima, quindi non devi installare Node.js, eseguire npm create vite o avviare un server di sviluppo. Va bene qualsiasi browser moderno, su Windows, macOS, Linux o Chromebook.

Posso importare pacchetti npm?

Puoi importare react e react-dom/client, e i tuoi file con un percorso relativo come import App from './App.jsx'. Altri pacchetti npm come React Router o Axios non sono disponibili, quindi il playground è ideale per componenti, hook e stato più che per un'app completa con dipendenze.

È il React Compiler?

No. Il React Compiler è un plugin di build che aggiunge automaticamente la memoizzazione ai tuoi componenti. Qui compilare significa trasformare JSX in JavaScript, cosa che esbuild fa nel tuo browser per permettere all'anteprima di eseguirlo. Spesso chi cerca un compilatore React online intende un posto dove eseguire codice React, ed è proprio quello che offre questa pagina.

Come imparo React dopo aver provato il compilatore?

Modifica l'app di esempio e guarda cosa succede nell'anteprima. Quando vuoi un percorso strutturato, il corso di React di Coddy insegna JSX, componenti, props, stato, eventi e hook in brevi lezioni con la stessa anteprima dal vivo, poi passa a Next.js.