Corso Base di React e Sviluppo Frontend

Lezione 1 • Fondamenti di JavaScript per React

Rivede la sintassi ES6+ — funzioni freccia, destrutturazione, moduli e promise — su cui il codice React si basa quotidianamente. Assicura che gli studenti leggano e scrivano JS moderno senza difficoltà.

Lezione 2 • Come i browser renderizzano le pagine web

Tratta il DOM, il CSSOM e la pipeline di rendering che i browser utilizzano per visualizzare i contenuti. Fondamenta il concetto di DOM virtuale di React sul comportamento reale del browser.

Lezione 3 • Fondamenti CSS per lo stile dei componenti

Tratta il box model, la specificità, flexbox e grid come strumenti di stile utilizzati in tutti i progetti React. Prepara gli studenti ad applicare stili ai componenti con sicurezza.

Lezione 4 • Fondamenti di HTML e markup semantico

Rivede gli elementi semantici HTML5 e la struttura del documento necessari per un output React accessibile. Collega il markup corretto alla SEO e alla compatibilità con gli screen reader.

Lezione 1 • Rendering di liste e UI condizionale

Insegna il mapping di array, la prop key e i pattern di rendering condizionale utilizzati in quasi ogni UI React. Si basa sulle espressioni JSX introdotte in precedenza nel capitolo.

Lezione 2 • Scrivere e comprendere JSX

Insegna le regole della sintassi JSX, le espressioni e come Babel trasforma JSX in chiamate React.createElement. Collega JSX alle conoscenze HTML del Capitolo 1.

Lezione 3 • Composizione dei componenti e prop children

Introduce la composizione rispetto all'ereditarietà utilizzando la prop children e pattern simili agli slot. Gli studenti costruiscono componenti wrapper flessibili che accettano contenuti figli arbitrari.

Lezione 4 • Passare e ricevere props

Spiega come i componenti genitori passano dati ai figli attraverso le props e come i figli li consumano. Rafforza il flusso di dati unidirezionale come principio fondamentale di progettazione di React.

Lezione 1 • Sollevare lo stato e condividere i dati

Spiega come sollevare lo stato a un antenato comune per condividere dati tra componenti fratelli. Rafforza il flusso di dati unidirezionale e prepara gli studenti al contesto nel prossimo capitolo.

Lezione 2 • Gestire gli eventi in React

Insegna gli eventi sintetici, i gestori di eventi e i pattern di gestione dei moduli che collegano le azioni dell'utente agli aggiornamenti di stato. Si basa su useState per creare componenti interattivi.

Lezione 3 • Comprendere lo stato e la reattività

Definisce lo stato come dato che attiva il re-rendering e lo contrappone alle props e alle variabili regolari. Stabilisce il modello mentale necessario prima di introdurre le API degli hook.

Lezione 4 • Gestire lo stato complesso con useReducer

Introduce useReducer per la logica di stato che coinvolge più sotto-valori o transizioni complesse. Gli studenti rifattorizzano esempi con useState in componenti basati su reducer.

Lezione 1 • Costruire un contesto per il tema e l'autenticazione

Applica il contesto a due casi d'uso pratici: cambio del tema e stato di autenticazione. Rafforza i pattern di contesto con scenari reali che gli studenti incontrano sul lavoro.

Lezione 2 • API Context di React per lo stato globale

Insegna createContext, Provider e useContext per condividere valori attraverso l'albero dei componenti. Risolve il problema del prop drilling identificato nel Capitolo 3.

Lezione 3 • Hook personalizzati per logica riutilizzabile

Estrae la logica ripetuta di effetti e stato in hook personalizzati seguendo la convenzione del prefisso use. Gli studenti producono hook condivisibili come useFetch e useLocalStorage.

Lezione 4 • Recuperare dati dalle API

Tratta i pattern fetch e async all'interno di useEffect, gli stati di caricamento e la gestione degli errori. Gli studenti costruiscono un componente che recupera e visualizza dati JSON remoti.

Lezione 1 • Rotte protette e guardie di navigazione

Implementa la protezione delle rotte utilizzando il contesto di autenticazione del Capitolo 4 e il componente Navigate. Gli studenti reindirizzano gli utenti non autenticati a una pagina di login.

Lezione 2 • Concetti di routing lato client

Spiega come le applicazioni a pagina singola simulano la navigazione senza ricaricamenti completi della pagina utilizzando l'API History. Contrappone i modelli di routing lato client e lato server.

Lezione 3 • Definire rotte e link di navigazione

Tratta i componenti BrowserRouter, Routes, Route e Link per mappare gli URL ai componenti. Gli studenti costruiscono un layout multi-pagina di base con una barra di navigazione persistente.

Lezione 4 • Rotte dinamiche e parametri URL

Insegna le rotte parametrizzate e l'hook useParams per visualizzare pagine di dettaglio da segmenti URL. Si basa sul rendering di liste del Capitolo 2 per creare UI master-detail.

Lezione 1 • CSS Modules e stili con ambito limitato

Insegna la sintassi dei CSS Modules e come Vite genera nomi di classe con ambito locale per prevenire conflitti. Gli studenti convertono un foglio di stile globale in stili modulari per componenti.

Lezione 2 • CSS utility-first con Tailwind

Introduce il modello di classi utility di Tailwind, la configurazione e i prefissi di design responsivo. Gli studenti ricostruiscono un componente utilizzando solo classi utility per confrontare gli approcci.

Lezione 3 • Animazioni e transizioni in React

Tratta le transizioni CSS, le animazioni keyframe e la libreria Framer Motion per animazioni a livello di componente. Gli studenti aggiungono animazioni di entrata e uscita alle pagine instradate.

Lezione 4 • CSS-in-JS con Styled-Components

Tratta i template literal taggati, gli stili dinamici basati su props e la tematizzazione con styled-components. Si collega al contesto del tema costruito nel Capitolo 4.

Lezione 1 • Profilazione e misurazione delle prestazioni

Applica il Profiler di React DevTools e il pannello delle prestazioni del browser per individuare i colli di bottiglia. Gli studenti producono un report delle prestazioni prima e dopo per un componente reale.

Lezione 2 • Comprendere il comportamento di rendering di React

Spiega quando e perché React esegue il re-rendering dei componenti e come il riconciliatore decide cosa aggiornare. Fornisce il modello mentale necessario prima di applicare qualsiasi ottimizzazione.

Lezione 3 • Memoization con React.memo e useMemo

Insegna React.memo per la memoization dei componenti e useMemo per calcoli costosi. Gli studenti applicano entrambi a un componente lista lento e misurano il miglioramento.

Lezione 4 • Riferimenti stabili con useCallback

Tratta useCallback per stabilizzare i riferimenti alle funzioni passati come props a componenti figli memoizzati. Si basa direttamente sulla conoscenza di React.memo della sezione precedente.

Lezione 1 • Testare le interazioni utente e il comportamento asincrono

Utilizza userEvent e waitFor per simulare click, invio di moduli e caricamento dati asincrono. Si collega ai pattern di gestione eventi e fetch dei Capitoli 3 e 4.

Lezione 2 • Test di unità con Vitest e React Testing Library

Tratta la configurazione di Vitest, le utilità di rendering e le query di React Testing Library per testare i componenti in isolamento. Gli studenti scrivono test per i componenti costruiti nei capitoli precedenti.

Lezione 3 • Fondamenti e strategia di test

Introduce la piramide dei test, i tipi di test e la filosofia di testare il comportamento invece dell'implementazione. Definisce la strategia che gli studenti applicano in tutto il capitolo.

Lezione 4 • Build e distribuzione in produzione

Tratta le build di produzione con Vite, le variabili d'ambiente e la distribuzione su una piattaforma di hosting statico con una pipeline CI/CD. Gli studenti rilasciano un'applicazione live e pubblicamente accessibile.