RN Lez 01: Setup, Node.js e JavaScript Base

Docs ufficiali: Environment Setup

Obiettivi

• Installare Node.js e npm
• Creare il primo progetto Expo
• Vedere l’app sul telefono con Expo Go
• Scrivere variabili e tipi in JavaScript

---

1. Cos’è React Native?

React Native è un framework per creare app mobili vere (Android e iOS) usando JavaScript/TypeScript.

Codice JavaScript
      ↓
 Bridge React Native
      ↓
Componenti NATIVI (Button Android, Label iOS, ...)

Expo è il tool consigliato ufficialmente per iniziare:

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

---

2. Installazione

Node.js

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

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

Crea il primo progetto

npx create-expo-app@latest MiaPrimaApp
cd MiaPrimaApp
npx expo start

App sul telefono! 🎉

1. Installa Expo Go dal Play Store
2. Scansiona il QR code (stessa rete WiFi)
3. Vedi l’app sul telefono!

Ogni modifica al codice si vede istantaneamente (hot reload).

---

3. JavaScript per Pythonisti — Variabili e Tipi

Dichiarazione: const e let

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

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

Regola d’oro: usa const sempre. Solo se devi riassegnare, usa let. Mai var.

Tipi di dati

const testo = "Ciao";              // string
const numero = 42;                 // number (intero O decimale, stesso tipo!)
const decimale = 3.14;             // number
const vero = 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 = valore assente
const indefinito = undefined;      // undefined = non ancora assegnato

console.log

# Python
print("Ciao", nome)
print(f"Età: {eta}")

// JavaScript
console.log("Ciao", nome);
console.log("Età:", eta);

---

4. Template Literals (f-string)

# Python
msg = f"Ciao {nome}, hai {eta} anni!"

// JavaScript — usa BACKTICK (`)
const msg = `Ciao ${nome}, hai ${eta} anni!`;

---

5. Hello World — Prima app React Native

Apri App.tsx e sostituisci il contenuto:

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}>Prima app React Native</Text>
      <Text style={styles.testo}>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',
  },
  sottotitolo: {
    fontSize: 16,
    color: 'grey',
    marginBottom: 20,
  },
  testo: {
    fontSize: 18,
    color: '#333',
  },
});

Spiegazione

import { View, Text, StyleSheet } from 'react-native';
//      ↑       ↑       ↑
//    contenitore |    stili separati
//              testo

---

6. Tabella riassuntiva Python → JavaScript

Python	JavaScript
x = 1	const x = 1 o let x = 1
def f(x):	const f = (x) => {}
f"Ciao {x}"	`Ciao ${x}`
print(x)	console.log(x)
len(lista)	array.length
if x > 0:	if (x > 0) { }
None	null o undefined
True / False	true / false

---

7. Esercizio autonomo

🎯 “Chi sono”

Crea un’app che mostri su schermo:

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

Usa StyleSheet.create() e flex: 1, justifyContent: 'center', alignItems: 'center'.