RN Lez 05: Props e Composizione

Docs: Props

Obiettivi

• Passare dati tra componenti con props
• Usare children per contenuto annidato
• Comporre componenti piccoli in UI complesse

---

1. Props — parametri dei componenti

Le props sono come parametri di funzione per i componenti.

// Definizione — riceve props
const Card = (props) => {
    return (
        <View style={style.card}>
            <Text>{props.titolo}</Text>
            <Text>{props.descrizione}</Text>
        </View>
    );
};

// Uso — passa dati come attributi
<Card titolo="Python" descrizione="Linguaggio di programmazione" />
<Card titolo="JavaScript" descrizione="Il linguaggio del web" />

Destrutturazione (pattern raccomandato)

// ✅ Preferito
const Card = ({ titolo, descrizione, autore = 'Anonimo' }) => {
    //                              ↑ valore di default
    return (
        <View>
            <Text>{titolo}</Text>
            <Text>{descrizione}</Text>
            <Text>Autore: {autore}</Text>
        </View>
    );
};

---

2. TypeScript per le props

type CardProps = {
    titolo: string;
    descrizione: string;
    autore?: string;       // ← opzionale
    prezzo?: number;
};

const Card = ({ titolo, descrizione, autore = 'Anonimo' }: CardProps) => {
    return (
        <View style={styles.card}>
            <Text style={styles.titolo}>{titolo}</Text>
            <Text>{descrizione}</Text>
            <Text>Autore: {autore}</Text>
        </View>
    );
};

Vantaggi delle props tipizzate

• Autocompletamento in VS Code
• Errori se passi il tipo sbagliato
• Documentazione leggendo i tipi

---

3. Children — contenuto annidato

children contiene tutto ciò che sta tra i tag di apertura e chiusura.

type ContainerProps = {
    children: React.ReactNode;
    style?: object;
};

const Container = ({ children, style }: ContainerProps) => {
    return (
        <View style={[styles.container, style]}>
            {children}
        </View>
    );
};

// Uso
<Container style={{ backgroundColor: '#e3f2fd' }}>
    <Text>Questo è dentro il container</Text>
    <Text>Anche questo</Text>
</Container>

---

4. Composizione — assembrare UI complesse

// 1. Componente piccolo: Badge
const Badge = ({ testo, colore }: { testo: string; colore: string }) => (
    <View style={[styles.badge, { backgroundColor: colore + '20' }]}>
        <Text style={[styles.badgeTesto, { color: colore }]}>{testo}</Text>
    </View>
);

// 2. Componente medio: CardProfilo (USA Badge)
const CardProfilo = ({ nome, ruolo, skill }: {
    nome: string; ruolo: string; skill: string[];
}) => (
    <View style={styles.card}>
        <Text style={styles.nome}>{nome}</Text>
        <Text style={styles.ruolo}>{ruolo}</Text>
        <View style={styles.badgeRow}>
            {skill.map((s, i) => <Badge key={i} testo={s} colore="#3498db" />)}
        </View>
    </View>
);

// 3. Componente principale: App (USA CardProfilo)
export default function App() {
    return (
        <View style={styles.container}>
            <CardProfilo
                nome="Mario Rossi"
                ruolo="Sviluppatore"
                skill={['React', 'Python', 'TypeScript']}
            />
        </View>
    );
}

---

5. StyleSheet.compose

// Stile base + stile condizionale
const styles = StyleSheet.create({
    card: {
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 10,
        marginBottom: 10,
    },
    evidenziato: {
        borderWidth: 2,
        borderColor: '#3498db',
    },
});

// Uso: unisci stili
<View style={[styles.card, isSelected && styles.evidenziato]}>
    <Text>Card</Text>
</View>

---

6. Tabella riassuntiva

Concetto	Codice
Props	const Card = ({ titolo }: { titolo: string }) => {}
Default	({ titolo = 'Default' })
Children	{children}
Fragment	<> ... </>
Style array	style={[base, cond && extra]}
TypeScript props	type Props = { ... }

---

7. Esercizio

🎯 “Lista competenze”

Crea:

1. Componente SkillBadge: props { nome: string; livello: 'base' | 'intermedio' | 'avanzato' }
   • Base = sfondo verde chiaro
   • Intermedio = giallo
   • Avanzato = rosso
2. Componente SkillCard: props { nome: string; skills: Skill[] }
   • Nome in grassetto
   • Badge delle skill in riga
3. App: mostra 3 SkillCard con competenze diverse