Node, Expo CLI und Simulatoren installieren
Richten Sie Node.js und die Expo CLI ein und konfigurieren Sie den iOS-Simulator oder Android-Emulator, damit Sie React-Native-Apps lokal ausführen können.
Node, Expo CLI und Simulatoren installieren ist eine kostenlose React Native Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Native Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.
Why Node.js Powers React Native
React Native läuft auf Node.js – dies treibt den Metro-Bundler an, der Ihr JSX in eine App umwandelt. Installieren Sie die LTS-Version für mehr Stabilität, idealerweise über den Versionsmanager nvm.
# 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.0Installing the Expo CLI
Mit der Expo CLI können Sie Apps erstellen, ausführen und kompilieren, ohne nativen Code anfassen zu müssen. Kombinieren Sie sie mit der Expo Go App, um einen QR-Code zu scannen und Ihre App sofort auf einem echten Smartphone zu sehen.
# 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 --versionSetting Up iOS Simulator on macOS
Für den iOS Simulator benötigen Sie einen Mac mit installierten Xcode. Öffnen Sie Xcode einmal, um die Lizenz zu akzeptieren, und fügen Sie dann die Befehlszeilentools hinzu. Expo kann einen Simulator mit einem Tastendruck starten.
# Install Xcode Command Line Tools
xcode-select --install
# Open a simulator from the terminal
open -a Simulator
# List available simulator devices
xcrun simctl list devicesSetting Up Android Emulator
Für Android benötigen Sie Android Studio. Installieren Sie das SDK und den Emulator, erstellen Sie ein virtuelles Pixel-Gerät und setzen Sie die Variable ANDROID_HOME, damit Expo alles finden kann. Siehe den 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 --versionUnderstanding the Metro Bundler
Das Starten eines Projekts startet Metro, den Bundler, der Ihre Dateien überwacht und mit Fast Refresh sofort neu lädt. Wenn Daten veraltet sind, leeren Sie den Cache mit dem Flag --clear.
# 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 menuJava Development Kit for Android
Android-Builds benötigen ein Java Development Kit – Expo empfiehlt JDK 17. Installieren Sie es und führen Sie dann java --version aus, um sicherzustellen, dass es sich in Ihrem PATH befindet. Der Code installiert es über 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
Sobald alles installiert ist, führen Sie npx expo-env-info (oder react-native doctor) aus, um Ihr Setup zu überprüfen. Dabei werden fehlende Komponenten erkannt. Beheben Sie diese Probleme daher vor Ihrem ersten Projekt.
# 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 watchmanWatchman: Faster File Watching
Watchman ist ein File-Watcher von Facebook, mit dem Metro Änderungen deutlich schneller erkennt, insbesondere unter macOS. Installieren Sie ihn über Homebrew, bevor Sie mit dem Erstellen beginnen.
# Install Watchman on macOS
brew install watchman
# Verify installation
watchman version
# If Metro has stale Watchman state, reset it
watchman watch-del-allEnvironment Variables and PATH
Viele Einrichtungsprobleme lassen sich auf einen fehlenden PATH-Eintrag zurückführen – Ihre Shell kann adb oder den Emulator nicht finden. Fügen Sie die Pfade zu ~/.zshrc hinzu und laden Sie diese neu. Der Code zeigt genau wie.
# 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 ~/.zshrcExpo Go App on a Real Device
Der schnellste Weg zum Testen auf einem echten Smartphone ist die Expo Go App. Starte expo start, scannen den QR-Code und deine App lädt über WLAN. Perfekt für die schnelle Entwicklung. 📱
# 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 defaultTroubleshooting Common Setup Issues
Die meisten Installationsschwierigkeiten sind vorhersehbar: ein belegter Port 8081, ein veralteter Metro-Cache, die falsche Node-Version oder ein fehlendes ANDROID_HOME. Und lesen Sie immer den roten Fehlerbildschirm sorgfältig durch.
# 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-serverQuick Check
Teste dein Verständnis der React Native Mobile Development-Konzepte aus dieser Lektion.
Lesson Recap
Du hast deine Toolchain eingerichtet: Node und nvm führen das JavaScript aus, die Expo CLI erstellt das Gerüst für deine App und stellt sie bereit, und Watchman sowie die SDKs treiben die Simulatoren an. Als Nächstes: dein erstes Projekt! 🎉
Häufig gestellte Fragen
Ist die Lektion „Node, Expo CLI und Simulatoren installieren“ kostenlos?
Ja — der vollständige Text von „Node, Expo CLI und Simulatoren installieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Native Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Node, Expo CLI und Simulatoren installieren“?
Richten Sie Node.js und die Expo CLI ein und konfigurieren Sie den iOS-Simulator oder Android-Emulator, damit Sie React-Native-Apps lokal ausführen können. Du übst React Native Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Native Academy zu starten?
Keine Vorkenntnisse erforderlich. React Native Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Node, Expo CLI und Simulatoren installieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Native Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Native Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Node, Expo CLI und Simulatoren installieren
- Ihr erstes Expo-Projekt erstellen
- Auf Gerät und Emulator ausführen
- Die Projektstruktur verstehen