Tutorial React con esempi dal vivo
Un tutorial gratuito di React 19: componenti, JSX, props, stato, hook e prestazioni. Ogni esempio gira nella pagina: modifica il codice e guarda aggiornarsi il componente e la sua console.
Inizia un percorso guidato di ReactPrimi passi
- Cos'è ReactReact è una libreria JavaScript per costruire interfacce utente a partire da componenti. Descrivi cosa deve mostrare lo schermo per i dati attuali, e React mantiene la pagina allineata quando quei dati cambiano.
- Installare ReactInstalla React creando un progetto con Vite: controlla Node.js, esegui un comando di creazione, installa le dipendenze e avvia il server di sviluppo. Vedi anche i file generati, la build di produzione e perché Create React App è deprecato.
- JSXJSX è un'estensione della sintassi di JavaScript che ti permette di scrivere markup simile all'HTML dentro i componenti React. Impara le sue regole: un solo elemento radice, tag chiusi, className, attributi in camelCase, parentesi graffe, stili inline, commenti e in cosa viene compilato.
- Componenti ReactUn componente React è una funzione JavaScript che restituisce JSX. Impara a scrivere e nominare i function component, a comporli in un albero, a dividerli in più file, a mantenerli puri, e la differenza tra componenti ed elementi.
- Props ReactLe props sono gli input di un componente React: valori che un genitore passa a un figlio come attributi JSX. Impara a passare e destrutturare le props, impostare valori predefiniti, passare funzioni, usare lo spread delle props e perché le props sono di sola lettura.
- Children Reactchildren è la prop che contiene tutto ciò che metti tra il tag di apertura e quello di chiusura di un componente. Impara a costruire con essa componenti wrapper e di layout, a passare più slot come props con nome, a usare children come funzione, e quando la Children API è lo strumento sbagliato.
- Fragment ReactUn React Fragment raggruppa più elementi in un unico valore restituito senza aggiungere un nodo alla pagina. Impara la sintassi breve <>...</>, quando ti serve <Fragment key> e perché i fragment contano dentro tabelle e liste.
- Rendering condizionaleIl rendering condizionale in React è semplice JavaScript: un if, un ternario o && decidono quale JSX restituisce un componente. Impara ogni schema, lo 0 di troppo che && può stampare, restituire null, e perché nascondere un componente non equivale a non renderizzarlo.
- Liste e keyPer renderizzare una lista in React chiami map() su un array e restituisci JSX per ogni elemento, dando a ciascuno una prop key. Impara filter seguito da map, da dove dovrebbero arrivare le key, e perché le key basate sull'indice dell'array confondono gli elementi quando la lista cambia.
- Eventi ReactGli eventi React sono props come onClick e onChange che ricevono una funzione, che React chiama con un oggetto evento quando l'utente agisce. Impara a passare un gestore invece di chiamarlo, passare argomenti, leggere e.target.value ed e.key, impedire il ricaricamento dei form e fermare la propagazione.
- CSS in ReactDai stile ai componenti React con className e normale CSS, con la prop style per i valori calcolati in JavaScript, con i CSS Modules per nomi di classe isolati, o con le classi di utilità di Tailwind. Impara ogni approccio, le classi condizionali e quando usare quale.
Stato e form
- useStateuseState dà a un componente un valore che sopravvive ai nuovi render e un setter che ridisegna lo schermo quando il valore cambia. Impara la sintassi, le funzioni di aggiornamento, oggetti e array nello stato, e perché un valore sembra vecchio subito dopo averlo impostato.
- Aggiornare array e oggettiPer cambiare un array o un oggetto nello stato React, costruiscine uno nuovo e passalo al setter. Impara ad aggiungere, rimuovere, sostituire, inserire e ordinare elementi, ad aggiornare oggetti annidati, e perché modificare lo stato direttamente lascia lo schermo invariato.
- Form ReactCostruisci form in React con input controllati: campi di testo, textarea, select, checkbox e radio button, un solo oggetto di stato per molti campi, invio con onSubmit, messaggi di validazione e le form action di React 19.
- Controllati vs non controllatiUn input controllato prende il suo valore dallo stato React e cambia solo tramite onChange. Un input non controllato tiene il proprio valore nel DOM, e lo leggi con un ref o con FormData. Impara la differenza, gli avvisi più comuni e quando usare ciascuno.
- Sollevare lo statoSollevare lo stato significa spostarlo da due componenti al loro genitore comune più vicino, che ripassa verso il basso il valore e un setter come props. Impara quando sollevarlo, come farlo in tre passaggi e quando invece tenere lo stato locale.
- useReduceruseReducer memorizza lo stato e sposta ogni aggiornamento in un'unica funzione reducer: invii un'azione con dispatch, e il reducer restituisce lo stato successivo. Impara la sintassi, come scrivere un reducer puro, un esempio di lista di cose da fare, l'inizializzazione lazy e quando sceglierlo al posto di useState.
Effetti e ref
- useEffectuseEffect esegue codice dopo che React ha aggiornato lo schermo, così un componente può sincronizzarsi con qualcosa al di fuori di React: un timer, una sottoscrizione, un event listener. Impara le tre forme dell'array delle dipendenze, la funzione di cleanup, i cicli infiniti e quando un effetto non serve affatto.
- Fetch dei dati in ReactRecupera i dati in React avviando la richiesta in useEffect, tenendo caricamento, errore e dati nello stato, e ignorando le risposte che arrivano dopo che gli input sono cambiati. Tratta async/await negli effetti, AbortController, race condition e quando usare invece una libreria.
- useRefuseRef dà a un componente una scatola, `{ current }`, che conserva il suo contenuto tra un rendering e l'altro senza provocare un rendering quando lo cambi. Usalo per raggiungere un nodo DOM (focus, scroll, misure) o per memorizzare l'id di un timer o qualsiasi valore che lo schermo non mostra.
- forwardRefforwardRef permette a un componente di ricevere un ref dal genitore e collegarlo a un nodo DOM al suo interno. In React 19 i function component ricevono `ref` come una prop normale, quindi il codice nuovo non ha più bisogno di forwardRef. Guarda entrambe le versioni in funzione, più useImperativeHandle e i tipi TypeScript.
- useLayoutEffectuseLayoutEffect funziona come useEffect ma viene eseguito subito dopo che React aggiorna il DOM e prima che il browser disegni la pagina. Usalo per misurare un elemento e sistemare il layout senza uno sfarfallio visibile, e tieni useEffect per tutto il resto.
Hook e context
- React HooksUn hook è una funzione il cui nome inizia con use e che permette a un componente di usare una funzionalità di React come lo stato, il context, i ref o gli effetti. Scopri tutti gli hook integrati raggruppati per scopo, le due regole che ogni hook segue e come scriverne uno tuo.
- useContextuseContext legge un valore fornito da un componente genitore, così un componente annidato in profondità lo riceve senza che ogni componente intermedio lo passi come prop. Impara createContext, i provider, aggiornare il context da un figlio e come il context influisce sui nuovi render.
- Prop drillingIl prop drilling consiste nel passare una prop attraverso componenti che non la usano, solo perché un componente più in basso possa farlo. Guardalo in un esempio eseguibile, scopri perché diventa un problema man mano che l'app cresce e le soluzioni nell'ordine in cui provarle: composizione, context, poi una libreria di stato.
- Hook personalizzatiUn hook personalizzato è una funzione il cui nome inizia con use e che chiama altri hook, così più componenti possono riutilizzare la stessa logica con stato. Costruisci useToggle, useLocalStorage, useDebounce e useWindowWidth, e scopri perché ogni chiamata riceve il proprio stato.
- Regole degli hookGli hook hanno due regole: chiamali al livello più alto di un componente, mai dentro condizioni, cicli o funzioni annidate, e chiamali solo da function component o hook personalizzati. Scopri perché React ha bisogno dello stesso ordine di chiamata a ogni rendering e come risolvere gli errori che ricevi quando cambia.
- useIduseId restituisce un id univoco e stabile per ogni istanza di un componente, così una label, un input e un suggerimento aria-describedby possono puntarsi a vicenda anche quando il componente compare molte volte. Scopri perché Math.random e i contatori si rompono con il rendering lato server, e perché useId non serve per le key delle liste.
- useSyncExternalStoreuseSyncExternalStore iscrive un componente a dati che vivono al di fuori di React, come un piccolo modulo store o un'API del browser come navigator.onLine, e lo renderizza di nuovo ogni volta che quei dati cambiano. Impara subscribe e getSnapshot, perché lo snapshot va messo in cache, e getServerSnapshot.
Rendering e prestazioni
- Rendering ReactUn componente React esegue un nuovo render quando il suo stato cambia, quando il suo genitore si renderizza o quando un context che legge cambia. Impara la differenza tra render e commit, cosa significa davvero virtual DOM e come fermare i rendering che non ti servono.
- useMemouseMemo mette in cache il risultato di un calcolo tra un rendering e l'altro e lo ricalcola solo quando le sue dipendenze cambiano. Impara la sintassi, come mantenere stabile un oggetto per un figlio con memo, e quando useMemo non vale la pena.
- useCallbackuseCallback restituisce la stessa funzione tra un rendering e l'altro finché le sue dipendenze non cambiano. Serve solo quando quella funzione viene passata a un figlio con memo o usata come dipendenza di un effetto. Impara la sintassi, la differenza da useMemo e gli errori da evitare.
- React.memomemo racchiude un componente così React salta il suo nuovo render quando le sue props sono superficialmente uguali all'ultima volta. Scopri quando aiuta, perché nuovi oggetti e funzioni nelle props lo vanificano e cosa non riesce a fermare.
- useTransitionuseTransition segna un aggiornamento di stato come non urgente, così React può mantenere la pagina reattiva mentre renderizza in background la parte lenta. Impara isPending, startTransition, le transizioni asincrone in React 19 e perché non è un debounce.
- useDeferredValueuseDeferredValue ti dà una copia di un valore a cui è permesso restare indietro durante i rendering pesanti, così un input resta reattivo mentre una lista lenta si mette in pari. Impara come funziona, il valore iniziale di React 19 e il confronto con useTransition e il debouncing.
- Suspense e lazySuspense mostra un fallback mentre i componenti al suo interno non sono pronti, e React.lazy carica il codice di un componente solo quando viene renderizzato per la prima volta. Impara il code splitting, i confini annidati, Suspense con use() in React 19 e la gestione degli errori.
React 19 e argomenti avanzati
- React 19React 19 ha aggiunto le Action, useActionState, useOptimistic, use, ref come prop e i metadati del documento, e la 19.2 ha aggiunto Activity e useEffectEvent. Guarda ogni funzionalità in esecuzione, cosa è stato rimosso e come aggiornare.
- useActionStateuseActionState racchiude un'azione asincrona, conserva il valore che ha restituito l'ultima volta e ti dice se è ancora in esecuzione. Impara la firma, le form action, la restituzione degli errori di validazione e come chiamarlo fuori da un form.
- useOptimisticuseOptimistic mostra il risultato che ti aspetti mentre un'azione asincrona è ancora in esecuzione, poi torna allo stato reale quando termina, così una richiesta fallita si annulla da sola. Impara la sintassi, la forma con reducer e perché deve essere eseguito dentro un'azione.
- Hook useuse legge il valore di una promise o di un context durante il rendering. Con una promise si sospende finché i dati non arrivano e mostra il fallback del Suspense più vicino. A differenza degli altri hook può essere eseguito dentro istruzioni if e cicli.
- Error boundaryUn error boundary è un componente che intercetta gli errori generati durante il rendering dei componenti al suo interno e mostra un fallback invece di una schermata vuota. Scopri cosa intercetta, come scriverne uno come classe, come azzerarlo e la libreria react-error-boundary.
- Portal ReactcreatePortal renderizza una parte di un componente in un nodo DOM diverso, come document.body, mentre resta nella stessa posizione dell'albero React. Usalo per modali, tooltip e menu che devono sfuggire a overflow hidden e all'impilamento dello z-index.
- Strict ModeStrictMode è un wrapper solo per lo sviluppo che renderizza i componenti due volte, esegue gli effetti come setup, cleanup, setup al montaggio, e avvisa delle API deprecate, così i rendering impuri e le funzioni di cleanup mancanti emergono presto. In produzione non fa nulla.
- Ciclo di vita dei componentiOgni componente React viene montato (compare), aggiornato (esegue un nuovo render) e smontato (viene rimosso). Scopri come ogni fase corrisponde a useEffect, i metodi del ciclo di vita delle classi e i loro equivalenti con gli hook, e le fasi di render e commit.
- Class componentUn class component è una classe JavaScript che estende React.Component e restituisce JSX da un metodo render. Impara this.props, this.state e setState, il binding dei gestori di eventi, i metodi del ciclo di vita, PureComponent e come convertire una classe in un function component.
Confronti e colloqui
- Domande colloquio ReactCirca 30 domande da colloquio su React dal livello principiante a quello avanzato, ognuna con una risposta breve che un selezionatore accetterebbe e codice dal vivo per quelle più facili da vedere che da leggere.
- React vs AngularReact è una libreria per la UI da combinare con altri strumenti; Angular è un framework completo con routing, form, HTTP e dependency injection integrati. Confronta gli stessi componenti scritti in entrambi, uno accanto all'altro.
- React vs VueReact e Vue sono entrambi strumenti JavaScript per costruire interfacce utente a partire da componenti. Differiscono nel markup (JSX vs template), nel modo in cui reagiscono ai cambiamenti (stato immutabile e nuovi render vs ref reattivi modificabili) e in quanta parte dell'ecosistema è ufficiale.
- React con TypeScriptCome tipizzare un'app React con TypeScript: props e children, useState con union e null, useRef per gli elementi DOM, gestori di eventi, context, componenti generici e props degli elementi nativi.
