Corso React Native + Hooks

Lezione 1 • JSX e il DOM virtuale

Spiega la compilazione di JSX, la riconciliazione delle prop key e come l'algoritmo di diffing di React riduca al minimo gli aggiornamenti nativi. Collega il comportamento del DOM virtuale alle prestazioni.

Lezione 2 • Approfondimento sui componenti funzionali

Contrappone i componenti classe ai componenti funzionali e spiega perché gli hook richiedono componenti funzionali. Stabilisce il modello mentale per le funzioni UI senza stato.

Lezione 3 • Ripasso della sintassi JavaScript moderna

Tratta la destrutturazione, spread/rest, le arrow function e async/await così come vengono utilizzati nei codebase React Native. Riduce la confusione sintattica negli esempi successivi con gli hook.

Lezione 1 • Che cos'è React Native

Spiega l'architettura a ponte, il thread JavaScript e il sistema di moduli nativi. Posiziona React Native rispetto a React per il web e allo sviluppo nativo.

Lezione 2 • Creare il primo progetto

Utilizza la CLI di React Native per generare un progetto e spiega la struttura dei file generata. Collega il layout delle cartelle alla pipeline di build.

Lezione 3 • Componenti built-in principali

Introduce View, Text, Image, ScrollView e TextInput come blocchi primitivi per la costruzione dell'interfaccia utente. Dimostra come ciascuno si associ a un widget nativo.

Lezione 4 • Configurazione dell'ambiente di sviluppo

Installa Node, Watchman, Xcode e Android Studio con le versioni SDK corrette. Convalida la toolchain eseguendo un progetto vuoto su entrambe le piattaforme.

Lezione 1 • Gestire lo stato con useState

Introduce la firma di useState, l'inizializzazione dello stato e i pattern della funzione di aggiornamento. Tratta le insidie comuni come le closure obsolete e gli aggiornamenti in batch.

Lezione 2 • Costruire un'app Contatore e Timer

Applica useState e useEffect insieme in un contatore e un timer per il conto alla rovescia pratici. Rafforza gli aggiornamenti di stato, gli intervalli e la pulizia in un componente reale.

Lezione 3 • Effetti collaterali con useEffect

Spiega l'array delle dipendenze, le funzioni di pulizia e la tempistica di esecuzione relativa al rendering. Sostituisce tutti e tre i metodi del ciclo di vita delle classi con un unico hook.

Lezione 4 • Recuperare dati remoti con gli Hook

Costruisce un pattern di recupero dati utilizzando useState per gli stati dati/caricamento/errore e useEffect per la chiamata fetch. Introduce gli stati UI di caricamento ed errore.

Lezione 1 • Hook di prestazione: useMemo e useCallback

Memoizza calcoli costosi con useMemo e stabilizza i riferimenti alle funzioni con useCallback per prevenire re-render non necessari dei componenti figli.

Lezione 2 • API imperative con useImperativeHandle

Espone un'API imperativa controllata da un componente figlio a un ref genitore utilizzando useImperativeHandle e forwardRef. Utile per componenti di input personalizzati.

Lezione 3 • Fare riferimento a valori con useRef

Usa useRef per persistere valori mutabili attraverso i render senza attivare re-render e per accedere alle istanze dei componenti nativi. Contrapposto a useState per dati non UI.

Lezione 4 • Stato complesso con useReducer

Implementa una funzione reducer e un pattern dispatch per macchine a stati multi-azione. Confronta useReducer con useState per scenari di form e carrello.

Lezione 1 • useForm: Hook per la gestione dello stato dei form

Costruisce un hook useForm che gestisce i valori dei campi, gli errori di validazione e lo stato di invio. Sostituisce la logica ripetitiva dei form su più schermate.

Lezione 2 • Testare gli Hook personalizzati

Utilizza React Native Testing Library e renderHook per test unitari degli hook personalizzati in isolamento. Tratta act, async act e il mocking delle dipendenze esterne.

Lezione 3 • useFetch: Hook per il recupero dati

Estrae il pattern fetch-caricamento-errore in un hook useFetch riutilizzabile con URL e opzioni configurabili. Dimostra come gli hook personalizzati riducano il boilerplate dei componenti.

Lezione 4 • useLocalStorage e useAsyncStorage

Incapsula AsyncStorage in un hook che rispecchia l'API di useState per dati chiave-valore persistenti. Gestisce serializzazione, deserializzazione e casi di errore.

Lezione 1 • Pattern del Navigatore Stack

Crea un navigatore stack nativo con transizioni push, pop e replace. Passa parametri tra le schermate e li legge con useRoute.

Lezione 2 • Navigatori Tab e Drawer

Aggiunge navigatori bottom tab e drawer e li annida all'interno dello stack. Personalizza le icone delle tab e il contenuto del drawer con stato guidato dagli hook.

Lezione 3 • Flusso di autenticazione con Navigazione

Implementa un navigatore condizionale che passa tra stack di autenticazione e app in base allo stato del token memorizzato nel contesto. Dimostra il routing protetto nel mondo reale.

Lezione 4 • Hook di navigazione in profondità

Utilizza useNavigation, useRoute, useFocusEffect e useIsFocused per controllare il comportamento di navigazione dai componenti. Sostituisce il prop-drilling degli oggetti di navigazione.

Lezione 1 • Stato del server con React Query

Utilizza gli hook useQuery e useMutation di React Query per gestire lo stato del server, la cache e il refetch in background. Elimina la gestione manuale dello stato di caricamento/errore.

Lezione 2 • Integrazione di Redux Toolkit

Configura uno store Redux con createSlice, RTK Query per il recupero dati e il wrapper Provider. Connette i componenti utilizzando useSelector e useDispatch.

Lezione 3 • Pattern dell'API Context su larga scala

Suddivide il contesto in provider di stato e dispatch per prevenire re-render non necessari in alberi di grandi dimensioni. Combina useReducer con il contesto per un pattern simile a Redux.

Lezione 4 • Stato globale con Zustand

Crea uno store Zustand con azioni e selettori, quindi lo consuma con una singola chiamata hook. Confronta l'API minimale di Zustand con il boilerplate del Contesto.

Lezione 1 • Profilazione e diagnosi delle prestazioni

Utilizza Flipper, il profiler React DevTools e il Performance Monitor per identificare rendering lenti e scatti del thread JS. Stabilisce un flusso di lavoro di ottimizzazione basato sulla misurazione.

Lezione 2 • Ottimizzare Liste e Immagini

Applica le proprietà di ottimizzazione di FlatList, la cache delle immagini e il caricamento differito per eliminare gli scatti nello scorrimento. Tratta windowSize, initialNumToRender e getItemLayout.

Lezione 3 • Testare Componenti e Hook

Scrive test unitari e di integrazione con Jest e React Native Testing Library, coprendo le interazioni utente e il comportamento asincrono. Ottiene una copertura significativa senza testare i dettagli implementativi.

Lezione 4 • Animazione con Animated e Reanimated

Costruisce animazioni fluide utilizzando l'API Animated e passa a Reanimated 2 per animazioni sul thread UI. Tratta spring, timing e movimento guidato dai gesti.