Node, Expo CLI en simulators installeren
Installeer Node.js en de Expo CLI en configureer iOS Simulator of Android Emulator, zodat u React Native-apps lokaal kunt uitvoeren.
Node, Expo CLI en simulators installeren is een gratis React Native Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Waarom Node.js React Native aandrijft
React Native draait op Node.js — het verzorgt de Metro-bundelaar die uw JSX omzet in een app. Installeer de LTS-versie voor stabiliteit, bij voorkeur via de versiebeheerder 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.0De Expo CLI installeren
Met de Expo CLI kunt u apps maken, uitvoeren en bouwen zonder native code aan te raken. Gebruik deze samen met de Expo Go-app om een QR-code te scannen en uw app direct op een echte telefoon te bekijken.
# 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 --versionDe iOS Simulator instellen op macOS
Voor de iOS Simulator hebt u een Mac met Xcode nodig. Open Xcode eenmaal om de licentie te accepteren en voeg daarna de opdrachtregelprogramma's toe. Expo kan met één toetsaanslag een simulator 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 devicesDe Android Emulator instellen
Voor Android hebt u Android Studio nodig. Installeer de SDK en emulator, maak een virtueel Pixel-apparaat aan en stel de variabele ANDROID_HOME in zodat Expo alles kan vinden. Bekijk de 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 --versionDe Metro-bundelaar begrijpen
Wanneer u een project start, wordt Metro gestart: de bundelaar die uw bestanden controleert en ze direct opnieuw laadt met Fast Refresh. Als er verouderde gegevens blijven staan, wist u de cache met de vlag --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 voor Android
Voor Android-builds is een Java Development Kit nodig — Expo raadt JDK 17 aan. Installeer deze en voer daarna java --version uit om te controleren of deze op uw PATH staat. De code installeert deze 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/Uw volledige installatie controleren
Voer zodra alles is geïnstalleerd npx expo-env-info (of react-native doctor) uit om uw installatie te scannen. Het programma markeert alles wat ontbreekt, zodat u die problemen kunt oplossen voordat u aan uw eerste project begint.
# 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: sneller bestanden controleren
Watchman is een bestandsbewaker van Facebook waarmee Metro wijzigingen veel sneller detecteert, vooral op macOS. Installeer deze via Homebrew voordat u begint met bouwen.
# Install Watchman on macOS
brew install watchman
# Verify installation
watchman version
# If Metro has stale Watchman state, reset it
watchman watch-del-allOmgevingsvariabelen en PATH
Veel installatieproblemen komen neer op een ontbrekende vermelding in PATH — uw shell kan adb of de emulator niet vinden. Voeg de paden toe aan ~/.zshrc en laad het bestand daarna opnieuw. De code laat precies zien wat u moet doen.
# 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 ~/.zshrcDe Expo Go-app op een echt apparaat
De snelste manier om op een echte telefoon te testen is de Expo Go-app. Voer expo start uit, scan daarna de QR-code en uw app wordt via wifi geladen. Ideaal voor snelle ontwikkeling. 📱
# 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 defaultVeelvoorkomende installatieproblemen oplossen
De meeste installatieproblemen zijn voorspelbaar: een bezette poort 8081, een verouderde Metro-cache, de verkeerde Node-versie of een ontbrekende ANDROID_HOME. Lees het rode foutscherm altijd zorgvuldig.
# 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-serverKorte controle
Test uw begrip van de concepten uit deze les over mobiele ontwikkeling met React Native.
Samenvatting van de les
U hebt uw toolchain opgebouwd: Node en nvm voeren de JavaScript uit, Expo CLI maakt de basis van uw app en levert deze aan, en Watchman plus de SDK's verzorgen de simulators. Hierna: uw eerste project! 🎉
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Node, Expo CLI en simulators installeren” gratis?
Ja — de volledige tekst van “Node, Expo CLI en simulators installeren” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Native Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Node, Expo CLI en simulators installeren”?
Installeer Node.js en de Expo CLI en configureer iOS Simulator of Android Emulator, zodat u React Native-apps lokaal kunt uitvoeren. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Node, Expo CLI en simulators installeren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Node, Expo CLI en simulators installeren
- Uw eerste Expo-project maken
- Uitvoeren op apparaat en emulator
- De projectstructuur begrijpen