Imparare React da zero nel 2026: guida pratica in italiano

React è la libreria più usata al mondo per costruire interfacce web, ed è tra le competenze più richieste per il lavoro da sviluppatore frontend. L'idea di fondo è semplice: costruisci l'interfaccia a componenti riutilizzabili, e React aggiorna lo schermo da solo quando i dati cambiano.

Serve una base di JavaScript prima di partire (se ti manca, vedi la guida JavaScript). Gli esempi qui sotto sono componenti React veri, eseguibili in questa pagina: premi "Prova tu" e li vedi renderizzati.

Il tuo primo componente

In React un componente è una funzione che restituisce quello che deve apparire a schermo, scritto in JSX (una sintassi che mescola HTML e JavaScript). Il componente principale si chiama App:

function App() {
  return <h2>Ciao, mondo!</h2>;
}

Sembra HTML, ma è JavaScript: quella funzione è un pezzo di interfaccia che puoi riusare.

Dati dinamici: le graffe

Dentro il JSX, le parentesi graffe { } ti fanno inserire valori JavaScript:

function App() {
  const nome = "Giulia";
  const anno = 2026;
  return <p>Benvenuta {nome}, siamo nel {anno}!</p>;
}

Tutto ciò che sta tra graffe viene calcolato da JavaScript e inserito nel testo. È il cuore di React: interfaccia + dati insieme.

Mostrare una lista

Un caso quotidiano: trasformare un array in una lista di elementi con .map:

function App() {
  const linguaggi = ["Python", "JavaScript", "SQL"];
  return (
    <ul>
      {linguaggi.map((l) => <li key={l}>{l}</li>)}
    </ul>
  );
}

.map crea un <li> per ogni elemento; key aiuta React a tenere traccia degli elementi. È il pattern che userai per liste di prodotti, messaggi, risultati.

Lo stato: interfacce che reagiscono

Qui React dà il meglio. Lo stato è un dato che, quando cambia, fa riaggiornare lo schermo da solo. Si crea con useState:

function App() {
  const [conteggio, setConteggio] = React.useState(0);
  return (
    <div>
      <p>Hai cliccato {conteggio} volte</p>
      <button onClick={() => setConteggio(conteggio + 1)}>Clicca</button>
    </div>
  );
}

Premi il pulsante: ogni clic aggiorna conteggio, e React ridisegna da solo la parte cambiata. Non tocchi mai il DOM a mano — dichiari come deve apparire l'interfaccia in base ai dati, al resto pensa React.

Un piano di studio

1. Settimana 1 — componenti, JSX, props (passare dati a un componente).
2. Settimana 2 — stato con useState, gestione eventi (click, input).
3. Settimana 3 — useEffect (caricare dati), liste e form.
4. Poi — un progetto vero (una to-do list, un mini-blog) e il routing.

Continua da qui

Il percorso React parte esattamente da qui e arriva fino a hook, form, chiamate a API e componenti complessi, con esercizi React che scrivi ed esegui nel browser come questi. I primi capitoli sono gratuiti. Vuoi solo sperimentare? Nel playground puoi provare React liberamente.