Web development con React da zero: la roadmap che uso con gli studenti

Quasi tutti quelli che mi chiedono aiuto con React arrivano con lo stesso problema: hanno seguito tre tutorial su YouTube, hanno copiato una to-do app, e alla fine si ritrovano con un progetto che “funziona” ma che non saprebbero rifare da soli. Sanno scrivere useState a memoria, ma se gli chiedi perché il componente si ri-renderizza si bloccano. È lo stesso pattern che vedo con Python e con il C: si impara a incollare, non a ragionare.

React non è difficile. È difficile saltarci dentro senza basi. La maggior parte della frustrazione che vedo non nasce da React in sé, ma dal JavaScript che sta sotto e che nessuno ha mai sistemato. In questo articolo ti do la roadmap che uso davvero nelle lezioni con chi parte quasi da zero: prima si mettono a posto le fondamenta, poi si entra in React con ordine, e alla fine costruisci un progetto che è tuo e che sai spiegare.

Prima di React: cosa deve esserci già

Questa è la parte che i tutorial saltano, ed è il motivo per cui poi non si capisce niente. React è una libreria JavaScript. Se il JavaScript è traballante, React sembrerà magia nera. Prima di scrivere il primo componente devi essere a tuo agio con quattro cose.

1. Il DOM e come lo si manipola a mano. Devi aver scritto almeno una piccola pagina in HTML/CSS/JavaScript “vanilla”, dove selezioni un elemento, ascolti un click e cambi il contenuto. Serve proprio per apprezzare cosa ti risolve React: quando avrai fatto a mano dieci volte document.querySelector e addEventListener, capirai al volo perché React esiste.
2. JavaScript ES6+. let/const (e perché non più var), le arrow function, il destructuring, lo spread operator (...), i template literal. Questi non sono dettagli stilistici: React li usa ovunque, e se non li riconosci il codice sembra scritto in un’altra lingua.
3. I metodi degli array: map, filter, reduce. In React una lista di elementi si costruisce quasi sempre con .map(). Se map non ti è chiaro, il rendering delle liste ti sembrerà incomprensibile.
4. Asincronia: le Promise, async/await, e fetch per chiamare un’API. Ogni app reale prima o poi carica dati da un server, e lì l’asincronia è inevitabile.

Se leggendo questa lista hai sentito qualche buco, il consiglio è brutale ma vero: fermati e chiudili prima di toccare React. Un pomeriggio sul destructuring ti risparmia due settimane di confusione dopo.

Settimana 1-2: fondamenta JavaScript

Le prime due settimane non si tocca React. Lo so che è frustrante, ma è l’investimento che fa la differenza tra chi poi vola e chi resta impantanato.

Esercizi concreti che assegno:

• Riscrivi un piccolo sito statico (una pagina) manipolando il DOM: un contatore con due bottoni, una lista a cui aggiungi elementi da un input, un tema chiaro/scuro con un toggle.
• Prendi un array di oggetti (per esempio una lista di studenti con nome e voto) e con map/filter/reduce calcola la media, filtra chi è sopra la sufficienza, costruisci una nuova lista di sole stringhe “Nome: voto”.
• Fai una chiamata fetch a un’API pubblica gratuita, gestisci la risposta con async/await e stampane un pezzo in pagina.

L’obiettivo non è la bellezza del codice, è la fluidità. Quando questi movimenti diventano automatici, React smette di intimidire.

Settimana 3: il primo componente e JSX

Ora si entra. Il concetto centrale di React è uno solo: l’interfaccia è una funzione dello stato. Tu descrivi come deve apparire la pagina dati certi dati, e React si occupa di aggiornare il DOM quando quei dati cambiano. Non tocchi più il DOM a mano — questa è la liberazione che hai guadagnato facendolo a mano nelle prime settimane.

I mattoni della settimana 3:

• Componenti: funzioni JavaScript che ritornano JSX. Un componente è un pezzo di interfaccia riutilizzabile (un bottone, una card, un form).
• JSX: quella sintassi che sembra HTML dentro JavaScript. Non è HTML, è zucchero sintattico che si trasforma in chiamate a funzione. Capire questo evita metà degli errori da principiante (per esempio perché si scrive className e non class).
• Props: come un componente riceve dati dal genitore. Sono di sola lettura: un componente non modifica mai le props che riceve.

Esercizio della settimana: spezza una pagina in componenti. Prendi il sito che hai fatto in vanilla nella settimana 1 e ricostruiscilo come albero di componenti React, ancora senza interattività. Solo struttura e props.

Settimana 4: stato e hooks

Qui arriva il cuore di React moderno, ed è il punto dove chi ha saltato le basi crolla. Lo stato è il dato che cambia nel tempo e che fa ri-disegnare l’interfaccia.

• useState: dichiara una variabile di stato. Quando la aggiorni con la funzione che ti restituisce, React ri-renderizza il componente. Il punto che quasi tutti sbagliano: lo stato in React è immutabile. Non modifichi l’array esistente, ne crei uno nuovo (ecco perché lo spread operator della settimana 1 era importante).
• useEffect: esegui codice come effetto collaterale — tipicamente una chiamata API — dopo il render. È l’hook più frainteso: serve per sincronizzare il componente con qualcosa di esterno (un server, un timer, il localStorage), non per ogni logica che ti viene in mente.
• Il render: capisci quando e perché un componente si ri-renderizza. Se sai rispondere a questa domanda, hai capito React. Se non lo sai, stai indovinando.

Esercizio: aggiungi l’interattività al progetto della settimana 3. Un form controllato (l’input è legato allo stato), una lista che cresce, un dato caricato da API dentro useEffect con la gestione di caricamento ed errore.

Settimana 5: mettere insieme un’app vera

Adesso si passa da “esercizi” a “applicazione”. Gli argomenti che aggiungo:

• Sollevare lo stato (lifting state up): quando due componenti devono condividere un dato, lo stato vive nel loro genitore comune. Capire questo evita di duplicare dati che poi vanno fuori sincrono.
• Rendering condizionale e liste con key: mostrare o nascondere pezzi di UI, e dare a ogni elemento di una lista una key stabile (non l’indice dell’array, se la lista cambia ordine).
• Un minimo di routing, se serve navigare tra più pagine.

Non serve strafare con le librerie. Uno degli errori più comuni è buttarsi su Redux, Next.js e mille dipendenze prima di aver capito lo stato locale. Come dico sempre: prima i fondamentali, poi gli strumenti.

Settimana 6: il progetto che resta

Come per la roadmap di Python, la settimana finale è dedicata a un progetto tuo, concreto, sceglierlo tu. Esempi che ho seguito con studenti:

• Un’app per tracciare le ore di studio con grafico settimanale.
• Un piccolo gestionale di flashcard per ripassare (utile per chi prepara un test di ammissione).
• Un’app meteo che pesca i dati da un’API pubblica.
• Una dashboard che mostra e filtra una lista di dati caricati da un file JSON.

Il progetto è la parte che ti resta in mano e che discuti a un esame o mostri in un colloquio. Le sei settimane di esercizi servono ad arrivare qui con basi solide, non a produrre codice da buttare.

Gli errori che vedo più spesso

Dopo tante lezioni su React, gli inciampi sono quasi sempre gli stessi:

• Partire da React senza JavaScript. Il numero uno. Se il destructuring e map non sono automatici, React sembrerà incomprensibile e darai la colpa a React.
• Mutare lo stato direttamente. Fare array.push(...) e aspettarsi il re-render. Non succede: devi creare un nuovo array. Da qui nascono i bug più insidiosi per un principiante.
• Abusare di useEffect. Metterci dentro logica che non è un effetto collaterale, o dimenticare l’array delle dipendenze e creare loop infiniti.
• Copiare senza ricostruire. Vale per React ancora più che altrove: se prendi un componente da un tutorial o da un assistente AI, riscrivilo riga per riga finché non sapresti rifarlo a occhi chiusi.
• Framework troppo presto. Next.js, TypeScript, librerie di stato: tutti utili, nessuno al primo mese. Prima lo stato locale e i componenti, poi il resto.

Quanto ci vuole, davvero

Con una base di JavaScript decente, sei settimane con costanza ti portano a costruire da solo un’app React piccola ma completa. Se parti dal DOM e dall’ES6+, mettici due settimane in più per le fondamenta — e non consideralo tempo perso, è il contrario. I tempi “tre giorni per diventare React developer” che girano online sono marketing: ci si arriva, ma non in tre giorni e non copiando.

Come lavoriamo nelle lezioni

Quando seguo qualcuno su React non scrivo io il progetto al suo posto. Lavoriamo insieme: io correggo gli esercizi, ti spiego perché un componente si ri-renderizza e un altro no, debughiamo insieme gli errori (il messaggio di React quasi sempre ti dice dove guardare), e strutturiamo l’architettura dell’app. Così, quando lo discuti all’esame o lo mostri a qualcuno, sai esattamente cosa hai fatto e perché.

Vale lo stesso approccio che uso per tutta l’informatica: MATLAB, Python, C e web development. L’obiettivo non è farti finire il progetto, è farti diventare autonomo.

Se vuoi seguire questa roadmap con qualcuno che corregge i tuoi esercizi e ti aiuta a costruire il progetto finale, prenota una diagnosi gratuita: capiamo insieme il tuo livello di partenza e costruiamo un percorso adatto ai tempi che hai.