RN Extra — 15 Esercizi di Ripasso

Livello Base (1-5)

1. Variabili e template

Dichiarare tre variabili (nome, eta, citta) e stampare un messaggio con template literal.

2. Arrow function

Scrivi una arrow function calcolaArea che prende base e altezza e restituisce l’area del triangolo.

3. Array map

const numeri = [5, 10, 15, 20, 25];
// Usa map per ottenere: [10, 20, 30, 40, 50]

4. Array filter

const voti = [4, 7, 8, 5, 9, 6];
// Usa filter per ottenere solo i voti >= 6

5. Destrutturazione

const film = { titolo: 'Inception', anno: 2010, regista: 'Nolan' };
// Estrai titolo e regista in variabili separate

---

Livello Intermedio (6-10)

6. Contatore con incremento personalizzato

Crea un componente con:

• Un TextInput per inserire un numero (quanto incrementare)
• Tre bottoni: +valore, -valore, Reset
• Visualizza il contatore

7. Form login con validazione

Crea un form login con:

• Email (valida che contenga @)
• Password (min 6 caratteri)
• Mostra errori specifici per campo
• Bottone “Accedi” che mostra Alert se valido

8. Card prodotto con stile condizionale

Crea un componente CardProdotto:

• Props: { nome, prezzo, sconto }
• Se sconto > 0, mostra il prezzo barrato e lo sconto in rosso
• Se sconto = 0, mostra solo il prezzo normale

9. FlatList con sezioni

Crea una lista di film raggruppati per genere usando SectionList.

10. Todo con modifica

Partendo dalla Todo List di lezione 8, aggiungi:

• Bottone “Modifica” su ogni task
• Schermata/ActionSheet per modificare il testo
• Salva la modifica su AsyncStorage

---

Livello Avanzato (11-15)

11. App Meteo con preferiti

Partendo dall’App Meteo di lezione 12, aggiungi:

• Bottone “Aggiungi ai preferiti” sulla città corrente
• Schermata “Preferiti” con lista città salvate
• Clicca su preferito → mostra meteo

12. Multi-step form

Crea un form di registrazione a 3 step:

• Step 1: Nome, Email
• Step 2: Password, Conferma password
• Step 3: Riassunto dati + “Conferma”
• Navigazione tra step con stato

13. Ricerca con debounce

Crea una lista di personaggi Rick & Morty con:

• TextInput di ricerca
• Chiamata API mentre l’utente digita (dopo 500ms di pausa)
• Risultati filtrati in FlatList

// Hint: setTimeout per debounce
useEffect(() => {
    const timer = setTimeout(() => {
        if (search) fetchCharacters(search);
    }, 500);
    return () => clearTimeout(timer);
}, [search]);

14. Tema chiaro/scuro

Aggiungi toggle tema all’app:

• Bottone/badge per switchare tra tema chiaro e scuro
• Colori definiti in un oggetto temi
• Persisti la scelta con AsyncStorage

const TEMI = {
    chiaro: { bg: '#fff', text: '#333', card: '#f5f5f5' },
    scuro: { bg: '#1a1a2e', text: '#eee', card: '#16213e' },
};

15. App completa “Blocco Note”

Crea un’app note con:

• FlatList di note (titolo, testo, data, colore)
• Aggiungi con form (titolo, testo, colore)
• Dettaglio con testo completo
• Modifica nota esistente
• Elimina con conferma
• AsyncStorage persistenza
• Cerca per titolo con TextInput
• Categorie o tag per organizzare