Corso per Sviluppatore React

Lezione 1 • Classi e Prototipi

Presenta la sintassi delle classi, l'ereditarietà e la catena dei prototipi. Fornisce il contesto per comprendere i componenti React basati su classi e i metodi del ciclo di vita.

Lezione 2 • Promise e Async/Await

Spiega l'esecuzione asincrona, il concatenamento delle promise e la sintassi async/await. Prepara gli studenti al recupero dei dati all'interno dei componenti React.

Lezione 3 • Elementi essenziali della sintassi ES6

Tratta let/const, funzioni freccia, template literal e destrutturazione. Questi schemi compaiono in ogni codebase React.

Lezione 4 • Moduli e Import/Export

Insegna gli export con nome e predefiniti, la risoluzione dei moduli e le aspettative dei bundler. Abilita direttamente l'organizzazione dei file dei componenti nei progetti React.

Lezione 1 • Configurazione di un progetto React

Guida attraverso lo scaffolding del progetto con Vite e Create React App, la struttura delle cartelle e l'uso del server di sviluppo. Gli studenti terminano con un ambiente locale funzionante.

Lezione 2 • Cos'è React e perché

Spiega il DOM virtuale, l'UI dichiarativa e il ruolo di React nell'ecosistema front-end. Stabilisce le basi concettuali per tutto il lavoro successivo con React.

Lezione 3 • Rendering di liste e condizionali

Tratta il rendering di liste basato su key e gli schemi di rendering condizionale. Sono le tecniche più comuni per UI dinamiche in React.

Lezione 4 • Sintassi e regole JSX

Tratta la transpilazione JSX, l'incorporamento di espressioni e le regole specifiche di JSX come className e i tag a chiusura automatica. Collega JSX al JavaScript in cui viene compilato.

Lezione 1 • Sollevamento dello stato

Spiega la condivisione dello stato tra componenti fratelli spostandolo in un genitore comune. Rafforza il principio del flusso di dati unidirezionale.

Lezione 2 • Aggiornamenti immutabili dello stato

Spiega perché React richiede aggiornamenti immutabili e come applicarli a oggetti e array. Previene i bug comuni causati dalla mutazione diretta.

Lezione 3 • Componenti form controllati

Insegna gli input controllati dove lo stato React guida i valori del form. Abilita una validazione e una gestione dell'invio affidabili.

Lezione 4 • Fondamenti dell'hook useState

Spiega l'inizializzazione dello stato, la funzione setter e i trigger di re-render. useState è lo strumento principale per l'interattività locale nei componenti funzionali.

Lezione 1 • Funzioni di pulizia

Insegna a restituire funzioni di pulizia per annullare sottoscrizioni e timer. Previene le perdite di memoria nei componenti a lunga durata.

Lezione 2 • Meccanica dell'hook useEffect

Tratta la sintassi dell'effetto, l'array delle dipendenze e la tempistica di esecuzione. Gli studenti ottengono un controllo preciso su quando gli effetti vengono eseguiti.

Lezione 3 • Panoramica del ciclo di vita dei componenti a classe

Mappa componentDidMount, componentDidUpdate e componentWillUnmount agli equivalenti useEffect. Prepara gli studenti a leggere codebase legacy.

Lezione 4 • Comprendere gli effetti collaterali

Definisce gli effetti collaterali in React e spiega perché devono essere isolati dal rendering. Motiva la necessità di useEffect.

Lezione 1 • useMemo e useCallback

Spiega la memoizzazione di valori e funzioni per prevenire ricalcoli e re-render non necessari. Introduce una mentalità orientata all'ottimizzazione delle prestazioni.

Lezione 2 • useContext per dati condivisi

Insegna a creare e consumare context per evitare il prop drilling. Si collega agli schemi di stato globale introdotti nel capitolo sulla gestione dello stato.

Lezione 3 • useReducer per stato complesso

Introduce lo schema reducer per gestire logica di stato con azioni multiple. Prepara gli studenti a un approccio in stile Redux all'interno di un singolo componente.

Lezione 4 • useRef e il DOM

Tratta useRef per l'accesso al DOM e la persistenza di valori mutabili attraverso i render. Abilita la gestione del focus, le animazioni e l'integrazione con librerie di terze parti.

Lezione 1 • Navigazione e Link

Insegna Link, NavLink e la navigazione programmatica con useNavigate. Abilita sia schemi di navigazione dichiarativi che imperativi.

Lezione 2 • Configurazione e nozioni di base di React Router

Tratta BrowserRouter, Routes e i componenti Route per definire l'albero di navigazione di un'app. Stabilisce il modello di routing dichiarativo.

Lezione 3 • Route annidate e layout

Spiega gli alberi di Route annidati e il componente Outlet per layout condivisi. Riduce la duplicazione del layout tra pagine correlate.

Lezione 4 • Route protette e controlli di autenticazione

Implementa controlli di route che reindirizzano gli utenti non autenticati. Applica insieme le conoscenze di context e routing in uno schema realistico.

Lezione 1 • Fondamenti di Redux Toolkit

Presenta lo store, gli slice e i reducer di Redux Toolkit come approccio moderno a Redux. Sostituisce gli schemi classici di Redux ricchi di codice boilerplate.

Lezione 2 • Scegliere la giusta soluzione di stato

Confronta stato locale, Context, Redux e Zustand per complessità e casi d'uso. Fornisce agli studenti gli strumenti per prendere decisioni architetturali su progetti reali.

Lezione 3 • Context API su larga scala

Estende gli schemi di useContext allo stato a livello di app con context multipli e ottimizzazioni delle prestazioni. Tratta quando il Context è sufficiente.

Lezione 4 • Lettura e scrittura dello stato Redux

Tratta gli hook useSelector e useDispatch per l'interazione con lo store a livello di componente. Abilita i componenti a leggere slice e inviare azioni.

Lezione 1 • Build e distribuzione di app React

Guida attraverso build di produzione, configurazione dell'ambiente e distribuzione su piattaforme di hosting statico. Completa l'intero ciclo di vita dello sviluppo.

Lezione 2 • Tecniche di ottimizzazione delle prestazioni

Tratta React.memo, lazy loading e code splitting per ridurre la dimensione del bundle e il costo di rendering. Migliora direttamente le prestazioni percepite dall'utente.

Lezione 3 • Test dei componenti React

Presenta React Testing Library e Jest per test unitari e di integrazione. Tratta il rendering, l'interrogazione e la simulazione dell'interazione utente.

Lezione 4 • Confini di errore e resilienza

Insegna i confini di errore basati su classi e le UI di fallback per prevenire crash completi dell'app. Aggiunge resilienza di produzione agli alberi dei componenti.