RN Lezione 1: Setup, Expo e JavaScript per Pythonisti

Obiettivi

• Installare Node.js e creare un progetto Expo
• Vedere l’app sul telefono con Expo Go (QR code)
• Imparare variabili, tipi, funzioni e template literals in JS

---

1. Cos’è React Native?

React Native è un framework di Meta per creare app mobile cross-platform con JavaScript/TypeScript.

Il tuo codice JavaScript (React Native)
        │
        ▼
  Bridge nativo  ← traduce JS in componenti nativi
        │
        ▼
  Componenti UI NATIVI (Android Button, iOS Label, ...)

A differenza di Flet/Flutter che disegnano tutto da soli, RN usa i veri componenti nativi del telefono.

Expo — il tool che semplifica tutto

Expo è il toolkit ufficiale consigliato per React Native:

Senza Expo:    Configurare Android Studio + Gradle + SDK... = ❌ giorni
Con Expo:      npx create-expo-app + QR code + Expo Go    = ✅ 5 minuti

Vantaggio	Spiegazione
Zero configurazione	Nessun IDE nativo richiesto
Expo Go	App sul telefono in 30 secondi con QR code
Hot reload	Ogni modifica → ricarica istantanea
SDK completo	API per camera, file, notifiche già pronte

---

2. Installazione

Step 1: Node.js

Scarica e installa Node.js (versione LTS, es. v22.x) da nodejs.org.

Verifica nel terminale:

node --version   # es. v22.14.0
npm --version    # es. 10.x

Step 2: Crea il primo progetto Expo

npx create-expo-app@latest MiaPrimaApp
cd MiaPrimaApp

Step 3: Avvia il server

npx expo start

Vedrai comparire un QR code nel terminale.

Step 4: App sul telefono! 🎉

1. Installa Expo Go dal Play Store o App Store
2. Scansiona il QR code con l’app (stessa rete WiFi)
3. 🎉 L’app è in esecuzione sul telefono!

Ora ogni modifica al codice si vede istantaneamente sul telefono.

---

3. JavaScript per Pythonisti — Le basi

Se sai Python, sai già programmare. Impariamo la sintassi JS.

Variabili: let e const

# Python
nome = "Mario"
eta = 17
MAX_STUDENTI = 30

// JavaScript
let nome = "Mario";   // let = PUÒ cambiare
const eta = 17;       // const = NON può cambiare
const MAX = 30;       // const = costante (maiuscolo per convenzione)

Regola d’oro: usa sempre const. Solo se devi riassegnare, usa let. Mai usare var (vecchio stile, oggi evitato).

Tipi di dati

const testo = "Ciao";             // stringa (come Python)
const numero = 42;                // number (intero o decimale, STESSO tipo!)
const decimale = 3.14;            // anche questo è number
const veroFalso = true;           // boolean (true/false, minuscolo!)
const lista = [1, 2, 3];           // array (come le liste Python)
const oggetto = { nome: "Mario" }; // oggetto (come i dict Python)
const nulla = null;               // null (assenza intenzionale)
const nonDefinito = undefined;    // undefined (non ancora assegnato)

Console.log (stampare)

# Python
print("Ciao", nome)
print(f"L'utente {nome} ha {eta} anni")

// JavaScript
console.log("Ciao", nome);
console.log(`L'utente ${nome} ha ${eta} anni`);

Nota: ` (backtick) è il template literal, equivalente alle f-string!

Esercizio rapido

Converti in JavaScript:

studente = "Luca"
voti = [8, 7, 9]
info = {"nome": "Luca", "classe": "4A"}
print(f"Studente: {studente}, voti: {voti}")

---

4. Funzioni: arrow functions

# Python — funzione tradizionale
def saluta(nome):
    return f"Ciao {nome}!"

def somma(a, b):
    return a + b

// JavaScript — arrow function
const saluta = (nome) => {
    return `Ciao ${nome}!`;
};

const somma = (a, b) => {
    return a + b;
};

// Versione compatta (una riga, return implicito)
const saluta2 = (nome) => `Ciao ${nome}!`;
const somma2 = (a, b) => a + b;

Python	JavaScript
def f(x):	const f = (x) => { }
def f(x, y):	const f = (x, y) => { }
def f():	const f = () => { }
return x*2	return x * 2
lambda x: x*2	(x) => x * 2

Parametri di default

const saluta = (nome = "Anonimo") => {
    return `Ciao ${nome}!`;
};

console.log(saluta());        // Ciao Anonimo!
console.log(saluta("Mario")); // Ciao Mario!

---

5. Hello World — la prima app React Native

Apri il file App.js (o app/index.js) e scrivi:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.titolo}>Ciao, mondo!</Text>
      <Text style={styles.sottotitolo}>
        La mia prima app React Native
      </Text>
      <Text style={styles.testo}>
        Ciao, mi chiamo Mario e ho 17 anni!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f8ff',
  },
  titolo: {
    fontSize: 28,
    fontWeight: 'bold',
    color: 'blue',
    marginBottom: 10,
  },
  sottotitolo: {
    fontSize: 16,
    color: 'grey',
    marginBottom: 20,
  },
  testo: {
    fontSize: 18,
    color: '#333',
  },
});

Spiegazione:

import { View, Text, StyleSheet } from 'react-native';
//                    ↑
//          Importa i componenti base di RN (come import in Python)

export default function App() {
//     ↑
//  Un componente React è una funzione che ritorna JSX (markup)

return (
    <View style={styles.container}>   {/* View = contenitore */}
      <Text style={styles.titolo}>Ciao!</Text>
    </View>
);

const styles = StyleSheet.create({
  flex: 1,                // Occupa tutto lo schermo
  justifyContent: 'center',  // Centra verticalmente
  alignItems: 'center',      // Centra orizzontalmente
});

---

6. Tabella riassuntiva Python → JavaScript

Python	JavaScript
x = 1	const x = 1 o let x = 1
def f(x):	const f = (x) => { }
f"testo {x}"	`testo ${x}`
print(x)	console.log(x)
len(lista)	array.length
if x > 0:	if (x > 0) { }
for x in lista:	lista.forEach(x => ...) o for (let x of lista)
None	null o undefined
True / False	true / false
import modulo	import { cosa } from 'modulo'

---

7. Esercizio autonomo

🎯 Esercizio: “Chi sono”

Crea un’app che mostri su schermo:

1. Nome e cognome (28px, grassetto, blu)
2. Età (18px, nero)
3. Classe e scuola (16px, grigio)
4. Almeno 3 hobby in un testo separato
5. Sfondo colorato a piacere

Requisiti tecnici

• Tutto in un unico componente App
• Usa StyleSheet.create() per separare gli stili
• Usa flex: 1, justifyContent: 'center', alignItems: 'center' per centrare tutto

Output atteso

        ┌──────────────────────┐
        │                      │
        │    Mario Rossi       │  ← 28px, bold, blue
        │     17 anni          │  ← 18px
        │                      │
        │  4A Informatica      │  ← 16px, grey
        │  ITI Fermi           │
        │                      │
        │  I miei hobby:       │
        │  Calcio, Musica,     │
        │  Videogiochi         │
        │                      │
        └──────────────────────┘