📱 React Native ed Expo: Installazione, Setup e Prima app

Introduzione 🚀

Nel primo articolo abbiamo visto cos’è React Native e perché è una delle tecnologie più importanti per creare app mobile moderne.

Ora è il momento di passare alla pratica 💻

In questa guida installeremo tutto il necessario per iniziare a sviluppare con React Native + Expo + TypeScript, e alla fine avrai la tua prima app avviata sul telefono 📱

⚙️ Perché usare Expo?

Quando inizi con React Native hai due strade:

• React Native “puro”
• Expo (consigliato per iniziare)

👉 In questa serie useremo Expo

Expo ti permette di:

• ⚡ creare progetti in pochi secondi
• 📱 testare subito sul telefono
• 📦 evitare configurazioni complicate
• 🔌 usare API native (camera, notifiche, GPS)
• 🚀 sviluppare più velocemente

👉 In breve: Expo ti semplifica la vita.

🧰 Cosa devi installare

Prima di iniziare assicurati di avere:

• 🟢 Node.js
• 🟣 Visual Studio Code

🟢 Installare Node.js

Node.js è il motore che esegue JavaScript fuori dal browser.

👉 Serve per far funzionare React Native ed Expo.

Installazione

• Vai sul sito ufficiale Node.js
• Scarica la versione LTS
• Installa tutto come un normale programma

🔍 Verifica installazione

Apri il terminale e scrivi:

node -v

Poi:

npm -v

Se vedi dei numeri → tutto ok ✅

🟣 Installare Visual Studio Code

VS Code è l’editor che useremo per scrivere codice.

Scaricalo qui:

Visual Studio Code

🔌 Estensioni consigliate

Installa queste per lavorare meglio:

• ✨ ESLint → controlla errori nel codice
• 🎨 Prettier → formatta automaticamente il codice
• 🚨 Error Lens → mostra errori in tempo reale
• 📱 Expo Tools → supporto React Native
• ✨ ES7+ React/Redux/React-Native snippets -> crea lo snippets

📦 Creare il primo progetto Expo

Apri il terminale e scrivi:

npx create-expo-app@latest my-first-app

👉 Questo comando crea automaticamente un progetto React Native pronto all’uso.

📁 Entra nel progetto

cd my-first-app

🚀 Avviare l’app

Ora avvia il server:

npx expo start

📱 Cosa succede?

Vedrai:

• un QR code
• un server attivo
• un link Expo

📲 Installare Expo Go

Per vedere l’app sul telefono:

• Android → Play Store
• iPhone → App Store

Cerca:📱 Expo Go

🔗 Collegare il telefono

• Apri Expo Go
• Scansiona il QR code
• L’app si apre automaticamente 🎉

📁 Struttura del progetto

Dentro VS Code vedrai qualcosa del genere:

my-first-app/
├── app/
├── assets/
├── node_modules/
├── package.json
└── tsconfig.json

📂 Cartelle importanti

📱 app/

Contiene le schermate dell’app

🖼 assets/

Immagini, icone, font

📦 package.json

Dipendenze del progetto

⚙️ tsconfig.json

Configurazione TypeScript

✏️ Modifichiamo la prima schermata

Apri il file principale e scrivi:

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

export default function HomeScreen() {
  return (
    <View>
      <Text>Ciao React Native 🚀</Text>
    </View>
  );
}

⚡ Risultato

Appena salvi:

👉 l’app si aggiorna automaticamente sul telefono

🔄 Cos’è il Fast Refresh?

Il Fast Refresh è una funzione che:

• ⚡ aggiorna l’app subito
• 🔁 senza riavviare tutto
• 💡 velocizza lo sviluppo

🎯 Riassunto

In questo episodio hai imparato a:

• 🟢 installare Node.js
• 🟣 installare VS Code
• 📦 creare un progetto Expo
• 🚀 avviare l’app
• 📱 testarla sul telefono
• ✏️ modificare la prima schermata

👉 Prossimo passo

Nel prossimo articolo vedremo:

📱 I componenti fondamentali di React Native

• View
• Text
• Image
• Button

👉 sono i “mattoni” per costruire qualsiasi app mobile