RN Lez 04: Componenti e JSX

Docs: Intro React Native Components, Intro React

Obiettivi

• Conoscere i Core Components: View, Text
• Scrivere JSX correttamente
• Creare componenti funzione

---

1. Core Components

React Native fornisce componenti che corrispondono a vere View native:

Componente	Android View	iOS View	Web Analog	Uso
<View>	ViewGroup	UIView	<div>	Contenitore
<Text>	TextView	UITextView	<p>	Testo
<Image>	ImageView	UIImageView	<img>	Immagini
<ScrollView>	ScrollView	UIScrollView	<div>	Scroll
<TextInput>	EditText	UITextField	<input>	Input

import { View, Text } from 'react-native';

export default function App() {
    return (
        <View>
            <Text>Ciao mondo!</Text>
            <Text>React Native usa componenti NATIVI</Text>
        </View>
    );
}

---

2. JSX — JavaScript XML

JSX è un’estensione di JavaScript che sembra HTML ma è JavaScript.

Regole JSX

Regola 1: Un solo elemento radice

// ✅ Corretto
return (
    <View>
        <Text>Ciao</Text>
        <Text>Mondo</Text>
    </View>
);

// ✅ Corretto (Fragment <>)
return (
    <>
        <Text>Ciao</Text>
        <Text>Mondo</Text>
    </>
);

// ❌ ERRORE: due elementi radice
return (
    <Text>Ciao</Text>
    <Text>Mondo</Text>
);

Regola 2: {} per JavaScript nel markup

const nome = 'Mario';
const ora = new Date().getHours();

return (
    <View>
        <Text>Ciao, {nome}!</Text>
        <Text>{2 + 2}</Text>
        <Text>{nome.toUpperCase()}</Text>
        <Text>{ora >= 18 ? 'Buonasera' : 'Buongiorno'}</Text>
    </View>
);

Regola 3: camelCase per attributi CSS

// ❌ HTML: background-color, font-size
// ✅ JSX:  backgroundColor, fontSize
<Text style={{ backgroundColor: 'blue', fontSize: 20 }}>Testo</Text>

Regola 4: Commenti

{/* Questo è un commento JSX */}

---

3. Componenti Funzione

Un componente è una funzione che ritorna JSX:

// Componente più piccolo: Avatar
const Avatar = () => {
    return (
        <View style={{ width: 50, height: 50, borderRadius: 25, backgroundColor: 'blue' }} />
    );
};

// Componente medio: Card
const Card = () => {
    return (
        <View style={{ padding: 20, backgroundColor: 'white', borderRadius: 10 }}>
            <Avatar />
            <Text>Mario Rossi</Text>
        </View>
    );
};

// Componente principale
export default function App() {
    return (
        <View style={{ flex: 1, padding: 20 }}>
            <Card />
            <Card />
        </View>
    );
}

Convenzioni

Regola	Esempio
Nome MAIUSCOLO	const Card = ... ✅
Una funzione = un componente	const Card = () => {}
Esportare per usare altrove	export default Card

---

4. Esempio: Schermata Benvenuto

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
    const nome = 'Mario';
    const oggi = new Date().toLocaleDateString('it-IT');

    return (
        <View style={styles.container}>
            <Text style={styles.titolo}>Benvenuto, {nome}!</Text>
            <Text style={styles.data}>Oggi è {oggi}</Text>
            <Text style={styles.testo}>
                React Native ti permette di creare app mobile
                con JavaScript e componenti nativi.
            </Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 30,
        backgroundColor: '#f5f5f5',
    },
    titolo: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 10,
    },
    data: {
        fontSize: 16,
        color: 'grey',
        marginBottom: 20,
    },
    testo: {
        fontSize: 16,
        color: '#555',
        textAlign: 'center',
        lineHeight: 24,
    },
});

---

5. Tabella riassuntiva

Concetto	Regola
Root unico	Un <View> o <> tutto intorno
JS in JSX	{variabile} o {funzione()}
camelCase	backgroundColor, non background-color
Nome componente	MAIUSCOLO: Card ✅, card ❌

---

6. Esercizio

🎯 “Scheda informativa”

Crea un componente App che mostra:

1. Un titolo “La mia scuola”
2. Il nome della scuola (grassetto, grande)
3. L’indirizzo (grigio)
4. Il numero di studenti (con icona emoji)
5. Tre materie in punti separati

Usa solo View e Text, con StyleSheet.create().