Corso React Native per Sviluppo App Android e iOS

Lezione 1 • Creazione del Suo primo progetto

Utilizza la CLI di React Native e la Expo CLI per generare template di progetto e confronta i loro trade-off. Gli studenti eseguono un'app Hello World sia su emulatore Android che su simulatore iOS.

Lezione 2 • Comprendere l'architettura di React Native

Tratta il bridge JavaScript, i moduli nativi e il nuovo renderer Fabric. Fornisce il modello mentale necessario per il debug e l'ottimizzazione durante tutto il corso.

Lezione 3 • Debug e strumenti per sviluppatori

Introduce Flipper, React DevTools e il menu sviluppatore in-app per ispezionare lo stato e le chiamate di rete. Le competenze di debug acquisite qui si applicano a ogni capitolo successivo.

Lezione 1 • Componenti funzionali e JSX

Ripassa la sintassi JSX, la composizione dei componenti e il passaggio delle props in un contesto React Native. Stabilisce la mentalità orientata ai componenti necessaria per tutto il lavoro sull'UI successivo.

Lezione 2 • Gestione dello stato con gli Hook

Tratta useState, useReducer e useRef per la gestione dello stato locale dei componenti e degli effetti collaterali. Questi hook alimentano le funzionalità interattive costruite durante tutto il corso.

Lezione 3 • API Context per lo stato condiviso

Implementa il React Context con useContext per condividere lo stato di tema e autenticazione tra i componenti. Fornisce una soluzione di stato globale leggera prima dell'introduzione di Redux.

Lezione 4 • Effetti collaterali e ciclo di vita con useEffect

Spiega l'array delle dipendenze di useEffect, le funzioni di cleanup e le insidie comuni come le stale closure. Un uso corretto degli effetti è critico per il recupero dei dati trattato nei capitoli successivi.

Lezione 1 • Sistema di layout Flexbox

Spiega flexDirection, justifyContent, alignItems e il dimensionamento flex come applicati in React Native. La padronanza di questo argomento consente layout cross-platform coerenti in tutto il lavoro di progetto.

Lezione 2 • Tecniche di design responsivo

Utilizza l'API Dimensions, l'hook useWindowDimensions e il dimensionamento percentuale per layout adattivi. Assicura che le UI appaiano corrette su telefoni e tablet con schermi di varie dimensioni.

Lezione 3 • API StyleSheet e tematizzazione

Insegna StyleSheet.create, gli stili inline e la composizione dinamica degli stili. Gli studenti costruiscono un oggetto tema riutilizzabile utilizzato durante tutto il progetto del corso.

Lezione 1 • Navigazione a Tab e Drawer

Implementa navigatori a tab inferiori e a drawer laterale con icone e supporto per badge. Questi pattern forniscono la struttura di livello superiore dell'app utilizzata nel progetto del corso.

Lezione 2 • Deep linking e gestione degli URL

Configura schemi URL e link universali per aprire schermate specifiche da fonti esterne. Il deep linking è necessario per la navigazione delle notifiche push trattata più avanti.

Lezione 3 • Setup di React Navigation e concetti

Installa le dipendenze di React Navigation e spiega la gerarchia di navigatore, schermata e percorso. Questo fondamento è necessario prima di poter implementare qualsiasi pattern di navigazione.

Lezione 4 • Pattern di flusso di autenticazione

Implementa stack di navigazione condizionali che commutano tra schermate di autenticazione e schermate principali dell'app in base allo stato del token. Questo pattern è riutilizzato nel progetto completo del corso.

Lezione 1 • Recupero dei dati con l'API Fetch

Utilizza l'API Fetch e Axios per effettuare richieste GET, POST, PUT e DELETE con una corretta gestione degli errori. Le chiamate di rete alimentano il contenuto dinamico nel progetto del corso.

Lezione 2 • SQLite e dati locali strutturati

Integra una libreria SQLite per creare tabelle, eseguire query e gestire dati relazionali sul dispositivo. Lo storage strutturato è necessario per la funzionalità offline-first nel progetto.

Lezione 3 • Strategie di caching e offline

Implementa il caching stale-while-revalidate e il rilevamento dello stato di rete per un'UX offline. Queste strategie assicurano che l'app rimanga utilizzabile senza una connessione di rete.

Lezione 4 • Pattern Async/Await e Promise

Applica la sintassi async/await, Promise.all e i pattern di cancellazione per gestire richieste concorrenti. Un codice asincrono pulito previene le race condition nelle schermate con molti dati.

Lezione 1 • Geolocalizzazione e integrazione delle mappe

Recupera la posizione del dispositivo con l'API Geolocation e visualizza le mappe utilizzando react-native-maps. Le funzionalità di posizione alimentano la schermata della mappa nel progetto del corso.

Lezione 2 • Accesso alla fotocamera e alla libreria multimediale

Integra react-native-vision-camera e l'API della libreria multimediale per l'acquisizione e la selezione di foto. Le funzionalità della fotocamera sono utilizzate nelle schermate del profilo e di caricamento dei contenuti del progetto.

Lezione 3 • Setup delle notifiche push

Configura Firebase Cloud Messaging per Android e APNs per iOS per inviare notifiche push. La gestione delle notifiche si collega ai pattern di deep linking del Capitolo 4.

Lezione 4 • Sensori, biometria e feedback aptico

Accede alle API di accelerometro, autenticazione biometrica e feedback aptico per un'UX migliorata. Queste funzionalità differenziano le app native mobile dalle alternative basate su web.

Lezione 1 • React Query per lo stato del server

Utilizza gli hook useQuery e useMutation di React Query per separare lo stato del server dallo stato dell'UI. Questo approccio semplifica la sincronizzazione dei dati rispetto ai thunk manuali di Redux.

Lezione 2 • Thunk asincroni e RTK Query

Gestisce il recupero asincrono dei dati con createAsyncThunk e il livello di recupero dati di RTK Query. RTK Query sostituisce la logica di fetch manuale e il caching del Capitolo 5.

Lezione 3 • Zustand per uno stato globale leggero

Implementa store Zustand per lo stato dell'UI che non appartiene alle librerie di stato del server. L'API minimale di Zustand completa React Query in un'architettura dello stato moderna.

Lezione 4 • Fondamenti di Redux Toolkit

Crea slice, reducer e azioni con le API createSlice e configureStore di Redux Toolkit. RTK elimina il codice boilerplate ed è l'approccio Redux standard del settore.

Lezione 1 • Profilazione e ottimizzazione delle performance

Utilizza il motore Hermes, il pannello delle performance di Flipper e il tracciamento dei re-render per identificare i colli di bottiglia. Le tecniche di ottimizzazione qui si applicano a tutte le schermate costruite nel progetto del corso.

Lezione 2 • Test di unità e integrazione

Scrive test dei componenti con Jest e React Native Testing Library e test di integrazione per i flussi di navigazione. Una codebase testata riduce il rischio di regressione durante la fase di distribuzione.

Lezione 3 • Test end-to-end con Detox

Automatizza flussi utente completi su simulatori reali utilizzando Detox per una copertura E2E affidabile. I test E2E rilevano problemi di integrazione che i test di unità non possono individuare.

Lezione 4 • Animazioni con Animated API e Reanimated

Costruisce animazioni UI fluide utilizzando l'API Animated e React Native Reanimated 3 sul thread UI. Le animazioni fluide sono un elemento chiave di differenziazione per le app mobile di alta qualità.