Corso di Sviluppo Frontend con React

Lezione 1 • Elementi Essenziali di JavaScript per React

Ripassa la sintassi ES6+ richiesta durante il corso: funzioni freccia, destrutturazione, moduli e promise. Previene la confusione sintattica nel codice React successivo.

Lezione 2 • Configurazione dell'Ambiente di Sviluppo

Installa Node.js, npm e VS Code, quindi imposta un progetto con Vite. Gli studenti concludono la sezione con un'app React in esecuzione su localhost.

Lezione 3 • Come i Browser Renderizzano le Pagine Web

Tratta il DOM, il CSSOM e la pipeline di rendering dall'analisi dell'HTML fino alla pittura. Stabilisce il modello del browser che spiega perché il DOM virtuale di React è importante.

Lezione 4 • Il Ruolo di React nell'Ecosistema

Posiziona React come libreria UI, non come framework completo, e lo contrappone ad Angular e Vue. Chiarisce cosa risolve React e quali strumenti complementari colmano le lacune.

Lezione 1 • Pattern di Composizione dei Componenti

Introduce le prop children, la composizione in stile slot e i componenti wrapper. Prepara gli studenti a costruire strutture UI flessibili e riutilizzabili nei capitoli successivi.

Lezione 2 • Renderizzare Liste e Chiavi

Utilizza Array.map per renderizzare liste dinamiche e spiega perché React richiede prop chiave stabili. Applica direttamente le espressioni JSX e le prop delle sezioni precedenti.

Lezione 3 • Scrivere e Comprendere JSX

Insegna JSX come zucchero sintattico per React.createElement e ne illustra le regole e le limitazioni. Fornisce agli studenti una base su ciò in cui JSX viene compilato prima di scrivere componenti.

Lezione 4 • Componenti Funzionali

Definisce un componente funzionale come una funzione pura che restituisce JSX e tratta la denominazione, i pattern di esportazione e le convenzioni per i file. Costituisce l'unità atomica per tutti i capitoli futuri.

Lezione 1 • useRef per DOM e Valori Mutabili

Dimostra useRef per l'accesso diretto al DOM e per mantenere valori mutabili attraverso i rendering senza attivare ri-renderizzazioni. Complementa useState per lo stato non visivo.

Lezione 2 • Gestire gli Eventi Utente

Tratta gli eventi sintetici, i pattern di gestione degli eventi e la prevenzione del comportamento predefinito del browser. Si combina con useState per produrre componenti interattivi per form e pulsanti.

Lezione 3 • Introdurre useState

Spiega lo stato come dato che attiva i ri-render e dimostra useState per valori primitivi e oggetti. Collega i cambiamenti di stato al processo di riconciliazione del Capitolo 1.

Lezione 4 • Effetti Collaterali con useEffect

Insegna useEffect per il recupero dati, le sottoscrizioni e la manipolazione del DOM dopo il rendering. Tratta l'array delle dipendenze e le funzioni di pulizia per prevenire perdite di memoria.

Lezione 1 • Stili Inline e Oggetti di Stile

Applica oggetti di stile JavaScript per uno styling dinamico guidato dalle prop e spiega i nomi delle proprietà in camelCase. Evidenzia i compromessi prestazionali rispetto agli approcci basati su classi.

Lezione 2 • CSS-in-JS con Styled Components

Crea componenti stilizzati utilizzando template literal taggati e passa prop per stili dinamici. Confronta il CSS-in-JS con i Moduli CSS per l'adattamento al team e al progetto.

Lezione 3 • CSS Utility-First con Tailwind

Integra Tailwind CSS in un progetto Vite-React e applica classi di utilità direttamente in JSX. Tratta i prefissi responsive e l'applicazione condizionale delle classi.

Lezione 4 • CSS Normale e Stili Globali

Importa fogli di stile globali e spiega le collisioni dei nomi delle classi nelle applicazioni di grandi dimensioni. Motiva le soluzioni di styling con scope introdotte nelle sezioni successive.

Lezione 1 • Route Dinamiche e Parametri URL

Definisce segmenti di route parametrizzati e li legge con useParams. Abilita pagine di dettaglio guidate da ID di dati, un pattern utilizzato nella maggior parte delle applicazioni reali.

Lezione 2 • Route Annidate e Layout

Utilizza elementi Route annidati e il componente Outlet per condividere layout persistenti tra route figlie. Riduce la duplicazione del layout nelle applicazioni con più sezioni.

Lezione 3 • Configurare React Router v6

Installa React Router, avvolge l'app in BrowserRouter e definisce le route con i componenti Routes e Route. Produce un esempio funzionante di navigazione a due pagine.

Lezione 4 • Route Protette e Guardie di Navigazione

Costruisce un componente wrapper che reindirizza gli utenti non autenticati utilizzando Navigate. Introduce lo stato di autenticazione come una questione di routing senza implementare un sistema di autenticazione completo.

Lezione 1 • Introduzione alle Librerie di Stato Esterne

Esamina Zustand e Redux Toolkit come alternative a Context per applicazioni di grandi dimensioni. Tratta quando lo stato integrato di React è insufficiente e come differiscono gli store esterni.

Lezione 2 • Stato Complesso con useReducer

Modella le transizioni di stato come funzioni reducer pure e invia azioni tipizzate. Si abbina a Context per costruire un pattern di stato globale leggero.

Lezione 3 • React Context API

Crea un contesto, fornisce un valore alla radice dell'albero e lo consuma con useContext. Tratta la suddivisione del contesto per prevenire ri-renderizzazioni non necessarie.

Lezione 4 • Costruire Hook Personalizzati

Estrae la logica stateful riutilizzabile in hook personalizzati con prefisso use. Dimostra hook per il recupero dati, la gestione dei form e la sincronizzazione con la memorizzazione locale.

Lezione 1 • Paginazione e Scorrimento Infinito

Implementa il caricamento dei dati basato su pagine e cursori utilizzando useInfiniteQuery di React Query. Tratta i pattern UI per i pulsanti "carica altro" e il recupero attivato dallo scorrimento.

Lezione 2 • Recuperare Dati con useEffect e Fetch API

Implementa il pattern di recupero al montaggio all'interno di useEffect e gestisce lo stato di caricamento ed errore con useState. Stabilisce la baseline prima di introdurre astrazioni.

Lezione 3 • Axios per Richieste HTTP

Sostituisce fetch con Axios per una sintassi più pulita, il parsing JSON automatico e gli intercettori. Tratta la creazione di un'istanza Axios con URL di base e header predefiniti.

Lezione 4 • Aggiornamenti Ottimistici e Ripristino degli Errori

Aggiorna l'UI prima della conferma del server e annulla in caso di errore utilizzando i callback di mutazione di React Query. Migliora la velocità percepita per le funzionalità con molte scritture.

Lezione 1 • Suddivisione del Codice e Caricamento Lazy

Suddivide il bundle per route e componente utilizzando React.lazy e Suspense. Riduce il tempo di caricamento iniziale rimandando il JavaScript non critico.

Lezione 2 • Identificare i Colli di Bottiglia Prestazionali

Utilizza il Profiler di React DevTools e gli strumenti di performance del browser per individuare ri-renderizzazioni non necessarie e componenti lenti. Stabilisce un flusso di lavoro di ottimizzazione basato sulla misurazione.

Lezione 3 • Build di Produzione e Distribuzione

Esegue la build di produzione di Vite, analizza l'output e distribuisce su una piattaforma di hosting statico. Tratta le variabili d'ambiente e la configurazione in fase di build.

Lezione 4 • Callback Stabili con useCallback

Stabilizza i riferimenti alle funzioni passati come prop utilizzando useCallback per prevenire ri-renderizzazioni dei figli. Si abbina a React.memo per completare il toolkit di memoizzazione.