React Native Academy · Lezione

Installazione di Node, Expo CLI e simulatori

Configuri Node.js e Expo CLI, quindi configuri iOS Simulator o Android Emulator per poter eseguire localmente le app React Native.

Lezione 1 di 413 passaggi

Installazione di Node, Expo CLI e simulatori è una lezione React Native Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Native Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Native Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

Why Node.js Powers React Native

React Native runs on Node.js — it powers the Metro bundler that turns your JSX into an app. Install the LTS version for stability, ideally via the nvm version manager.

# Install nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Then install the latest LTS Node
nvm install --lts
nvm use --lts

# Verify installation
node --version   # e.g. v20.12.0
npm --version    # e.g. 10.5.0

Installing the Expo CLI

The Expo CLI lets you create, run, and build apps without touching native code. Pair it with the Expo Go app to scan a QR code and see your app on a real phone instantly.

# Install Expo CLI globally
npm install -g expo-cli

# Verify the installation
expo --version

# Alternatively, use npx (no global install needed)
npx create-expo-app --version

Setting Up iOS Simulator on macOS

For the iOS Simulator you need a Mac with Xcode installed. Open Xcode once to accept its license, then add the command line tools. Expo can launch a simulator with one keypress.

# Install Xcode Command Line Tools
xcode-select --install

# Open a simulator from the terminal
open -a Simulator

# List available simulator devices
xcrun simctl list devices

Setting Up Android Emulator

For Android you need Android Studio. Install the SDK and emulator, create a virtual Pixel device, and set the ANDROID_HOME variable so Expo can find everything. See the code.

# Add to ~/.zshrc or ~/.bashrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Reload shell config
source ~/.zshrc

# Verify adb is found
adb --version

Understanding the Metro Bundler

Starting a project launches Metro, the bundler that watches your files and reloads instantly with Fast Refresh. If things get stale, clear its cache with the --clear flag.

# Start Metro and clear cache
npx expo start --clear

# Metro outputs a QR code and key shortcuts:
#  i → open iOS Simulator
#  a → open Android Emulator
#  r → reload the app
#  m → toggle the developer menu

Java Development Kit for Android

Android builds need a Java Development Kit — Expo recommends JDK 17. Install it, then run java --version to confirm it's on your PATH. The code installs it via Homebrew.

# Install JDK 17 via Homebrew (macOS)
brew install --cask temurin@17

# Verify Java version
java --version
# Expected: openjdk 17.x.x

# On Windows: download installer from
# https://adoptium.net/temurin/releases/

Verifying Your Full Setup

Once everything's installed, run npx expo-env-info (or react-native doctor) to scan your setup. It flags anything missing, so fix those issues before your first project.

# Check your environment with Expo
npx expo-env-info

# Or use the React Native community CLI doctor
npx react-native doctor

# Install Watchman for better file watching (macOS)
brew install watchman

Watchman: Faster File Watching

Watchman is a file-watcher from Facebook that makes Metro detect changes much faster, especially on macOS. Install it via Homebrew before you start building.

# Install Watchman on macOS
brew install watchman

# Verify installation
watchman version

# If Metro has stale Watchman state, reset it
watchman watch-del-all

Environment Variables and PATH

Many setup headaches come down to a missing PATH entry — your shell can't find adb or the emulator. Add the paths to ~/.zshrc, then reload it. The code shows exactly what.

# Example ~/.zshrc additions for React Native
export JAVA_HOME=$(/usr/libexec/java_home -v 17)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Apply changes
source ~/.zshrc

Expo Go App on a Real Device

The fastest way to test on a real phone is the Expo Go app. Run expo start, then scan the QR code, and your app loads over Wi-Fi. Perfect for quick development. 📱

# Start Expo development server
npx expo start

# Expo prints a QR code in the terminal.
# Scan it with:
#   iOS: Camera app → tap the banner
#   Android: Expo Go app → Scan QR Code

# Or press 's' to switch to Expo Go mode
# if using a dev build by default

Troubleshooting Common Setup Issues

Most setup snags are predictable: a busy port 8081, a stale Metro cache, the wrong Node version, or a missing ANDROID_HOME. And always read the red error screen carefully.

# Common fixes

# Clear Metro cache
npx expo start --clear

# Kill process on port 8081
lsof -ti:8081 | xargs kill -9

# Check connected Android devices
adb devices

# Restart adb server if devices not showing
adb kill-server
adb start-server

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Rispondi nella lezione interattiva

Lesson Recap

You built your toolchain: Node and nvm run the JavaScript, Expo CLI scaffolds and serves your app, and Watchman plus the SDKs power simulators. Next: your first project! 🎉

Gratis per iniziare

Impara JavaScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 30
Lezioni: 120

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Installazione di Node, Expo CLI e simulatori» è gratuita?

Sì — il testo completo di «Installazione di Node, Expo CLI e simulatori» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Native Academy, passa a CoddyKit PRO. Il corso React Native Academy include 4 lezioni in totale.

Cosa imparerò in «Installazione di Node, Expo CLI e simulatori»?

Configuri Node.js e Expo CLI, quindi configuri iOS Simulator o Android Emulator per poter eseguire localmente le app React Native. Eserciti React Native Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Native Academy?

Non è richiesta alcuna esperienza precedente. React Native Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Installazione di Node, Expo CLI e simulatori»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Native Academy?

Sì. Ogni lezione React Native Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Installazione di Node, Expo CLI e simulatori
Creazione del primo progetto Expo
Esecuzione su dispositivo ed emulatore
Comprensione della struttura del progetto

← Torna a React Native Academy