Corso di React Native

Lezione 1 • Strumenti per sviluppatori e basi del debug

Introduce il debugger di React Native, Flipper e il menu sviluppatore in-app. Fornisce agli studenti strumenti di feedback immediato su cui faranno affidamento per tutto il corso.

Lezione 2 • Che cos'è React Native

Illustra il ruolo di React Native nello sviluppo mobile multipiattaforma e in che modo si differenzia da React per il web. Stabilisce la base concettuale per tutti i capitoli successivi.

Lezione 3 • Creazione del primo progetto

Utilizza la CLI di React Native ed Expo per creare una nuova app ed esplorare la struttura dei file generati. Collega le conoscenze sugli strumenti alla creazione pratica del progetto.

Lezione 4 • Configurazione dell'ambiente di sviluppo

Installa e configura tutti gli strumenti necessari per lo sviluppo iOS e Android. Garantisce che ogni studente disponga di un ambiente locale funzionante e riproducibile.

Lezione 1 • Componenti Text, View e Image

Tratta i tre componenti fondamentali di React Native e le loro proprietà essenziali. Gli studenti realizzano layout statici combinando testo, contenitori e immagini.

Lezione 2 • Componenti di input e moduli

Tratta TextInput, Switch e Picker per la cattura dell'input dell'utente. Stabilisce le conoscenze sui componenti necessarie prima di introdurre la gestione dello stato.

Lezione 3 • Fondamenti di JSX in React Native

Spiega la sintassi JSX, l'incorporamento di espressioni e come JSX viene compilato in chiamate native all'interfaccia utente. Fornisce le basi sintattiche per tutto il lavoro sui componenti che seguirà.

Lezione 4 • Componenti Touchable e Pressable

Introduce i componenti per la gestione del tocco e i loro comportamenti di feedback. Collega i layout statici agli elementi interattivi che gli studenti utilizzeranno in ogni app.

Lezione 1 • API StyleSheet e stili inline

Confronta StyleSheet.create con gli oggetti di stile inline e spiega le implicazioni in termini di prestazioni. Stabilisce pattern di stile coerenti utilizzati in tutto il corso.

Lezione 2 • Modello di layout Flexbox

Spiega come il modello Flexbox di React Native differisca dai CSS e come controllare l'allineamento degli assi. Gli studenti acquisiscono la competenza di layout principale utilizzata in ogni schermata.

Lezione 3 • Tematizzazione e pattern di stile riutilizzabili

Introduce oggetti tema, costanti di stile e incapsulamento dello stile a livello di componente. Prepara gli studenti a mantenere sistemi di design coerenti in app di grandi dimensioni.

Lezione 4 • Spaziatura, bordi e ombre

Applica le proprietà di margine, padding, bordo e ombra per perfezionare la gerarchia visiva. Collega le conoscenze di layout a un aspetto dei componenti curato e di qualità professionale.

Lezione 1 • useState per lo stato locale

Introduce l'hook useState per la gestione dello stato a livello di componente e l'attivazione dei re-render. Consente agli studenti di costruire elementi UI interattivi e dotati di stato.

Lezione 2 • useEffect ed effetti collaterali

Tratta useEffect per il recupero dati, le sottoscrizioni e la pulizia allo smontaggio. Collega i concetti del ciclo di vita del componente alle operazioni asincrone pratiche.

Lezione 3 • Pattern dei componenti e best practice

Tratta i componenti contenitore vs. presentazionali, la memoizzazione e come evitare render non necessari. Prepara gli studenti a scrivere alberi di componenti performanti e manutenibili.

Lezione 4 • Proprietà e comunicazione tra componenti

Spiega come le proprietà passano dati e callback tra componenti genitori e figli. Stabilisce il pattern di flusso dati unidirezionale centrale per le app React Native.

Lezione 1 • Stack Navigator per flussi di schermate

Costruisce flussi di schermate push e pop utilizzando il navigatore stack nativo. Tratta il pattern di navigazione più comune nelle app mobili.

Lezione 2 • Navigatori Tab e Drawer

Aggiunge navigatori a tab inferiore e drawer laterale per le sezioni principali dell'app. Consente agli studenti di costruire i gusci di navigazione primari utilizzati nella maggior parte delle app.

Lezione 3 • Flussi di autenticazione e rotte protette

Implementa la navigazione condizionale basata sullo stato di autenticazione utilizzando il cambio di navigatore. Prepara gli studenti a costruire una navigazione dell'app sicura e consapevole del ruolo.

Lezione 4 • Configurazione e concetti di React Navigation

Installa React Navigation e spiega il modello di navigatore, schermata e rotta. Fornisce la mappa concettuale di cui gli studenti hanno bisogno prima di costruire qualsiasi flusso di navigazione.

Lezione 1 • API Fetch e pattern asincroni

Utilizza l'API Fetch integrata con async/await per effettuare richieste HTTP da React Native. Stabilisce il pattern di recupero dati asincrono utilizzato in tutte le sezioni successive.

Lezione 2 • React Query per lo stato del server

Utilizza React Query per memorizzare nella cache, ricaricare e sincronizzare automaticamente i dati del server. Riduce il codice boilerplate e migliora la freschezza dei dati in tutta l'app.

Lezione 3 • Axios per richieste HTTP

Introduce Axios per una sintassi di richiesta più pulita, intercettori e configurazione dell'URL di base. Fa progredire gli studenti verso il client HTTP più utilizzato nelle app React Native di produzione.

Lezione 4 • Archiviazione locale con AsyncStorage

Persiste dati chiave-valore localmente utilizzando AsyncStorage per funzionalità offline-first. Prepara gli studenti a memorizzare token, preferenze e risposte nella cache sul dispositivo.

Lezione 1 • Fotocamera e selettore di immagini

Cattura foto e seleziona immagini dalla galleria utilizzando react-native-image-picker. Consente agli studenti di creare funzionalità multimediali comuni nelle app social e di utilità.

Lezione 2 • Gestione dei permessi

Richiede e controlla i permessi di runtime per le funzionalità sensibili del dispositivo su iOS e Android. Stabilisce il pattern di autorizzazione necessario prima di accedere a qualsiasi API nativa.

Lezione 3 • Geolocalizzazione e mappe

Recupera la posizione del dispositivo e visualizza mappe interattive utilizzando react-native-maps. Collega i dati di posizione a esperienze visive su mappa che gli studenti possono rilasciare in app reali.

Lezione 4 • Notifiche push

Configura le notifiche push locali e remote utilizzando Expo Notifications o Firebase. Insegna l'intero ciclo di vita delle notifiche, dalla pianificazione all'interazione con l'utente.

Lezione 1 • Test unitari e di integrazione

Scrive test di componenti e hook utilizzando Jest e React Native Testing Library. Stabilisce una base di test che individua le regressioni prima della distribuzione.

Lezione 2 • Build e rilascio sugli store

Genera build di rilascio firmate per Android e iOS e le invia ai rispettivi store. Completa l'intero ciclo di vita dallo sviluppo alla produzione per gli studenti.

Lezione 3 • Profilazione e ottimizzazione delle prestazioni

Utilizza Flipper e il Performance Monitor per identificare i colli di bottiglia del thread JS e del rendering. Fornisce agli studenti gli strumenti per diagnosticare e risolvere i problemi di prestazioni più comuni di React Native.

Lezione 4 • Test end-to-end con Detox

Automatizza flussi utente completi su simulatori e dispositivi utilizzando Detox. Convalida percorsi critici come login e checkout prima di ogni rilascio.