React Native Academy · leksjon

Installere Node, Expo CLI og simulatorer

Sett opp Node.js og Expo CLI, og konfigurer iOS Simulator eller Android Emulator slik at du kan kjøre React Native-apper lokalt.

Leksjon 1 av 413 trinn

Installere Node, Expo CLI og simulatorer er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hvorfor Node.js driver React Native

React Native kjører på Node.js – det driver Metro-bundleren som gjør JSX om til en app. Installer LTS-versjonen for stabilitet, helst via versjonsbehandleren 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.0

Installere Expo CLI

Expo CLI lar Dem opprette, kjøre og bygge apper uten å røre native kode. Bruk den sammen med Expo Go-appen for å skanne en QR-kode og se appen på en ekte telefon med én gang.

# 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

Konfigurere iOS Simulator på macOS

For iOS Simulator trenger De en Mac med Xcode installert. Åpne Xcode én gang for å godta lisensen, og legg deretter til kommandolinjeverktøyene. Expo kan starte en simulator med ett tastetrykk.

# 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

Konfigurere Android Emulator

For Android trenger De Android Studio. Installer SDK-et og emulatoren, opprett en virtuell Pixel-enhet, og angi variabelen ANDROID_HOME slik at Expo finner alt. Se koden.

# 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

Forstå Metro Bundler

Når De starter et prosjekt, startes Metro, bundleren som overvåker filene og laster dem inn på nytt umiddelbart med Fast Refresh. Hvis noe blir utdatert, kan De tømme hurtigbufferet med flagget --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 menu

Java Development Kit for Android

Android-bygg trenger et Java Development Kit – Expo anbefaler JDK 17. Installer det, og kjør deretter java --version for å bekrefte at det ligger i PATH. Koden installerer det 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/

Kontrollere hele oppsettet

Når alt er installert, kjører De npx expo-env-info (eller react-native doctor) for å skanne oppsettet. Kommandoen markerer det som mangler, slik at De kan løse problemene før De oppretter det første prosjektet.

# 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: Raskere filovervåking

Watchman er en filovervåker fra Facebook som gjør at Metro oppdager endringer mye raskere, spesielt på macOS. Installer den via Homebrew før De begynner å bygge.

# Install Watchman on macOS
brew install watchman

# Verify installation
watchman version

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

Miljøvariabler og PATH

Mange problemer med oppsettet skyldes en manglende oppføring i PATH – skallet finner ikke adb eller emulatoren. Legg til banene i ~/.zshrc, og last den inn på nytt. Koden viser nøyaktig hva De skal gjøre.

# 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-appen på en ekte enhet

Den raskeste måten å teste på en ekte telefon er Expo Go-appen. Kjør expo start, skann deretter QR-koden, så lastes appen inn via Wi-Fi. Perfekt for rask utvikling. 📱

# 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

Feilsøke vanlige oppsettsproblemer

De fleste problemer med oppsettet er forutsigbare: en opptatt port 8081, en utdatert Metro-hurtigbuffer, feil Node-versjon eller en manglende ANDROID_HOME. Les alltid den røde feilmeldingen nøye.

# 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

Hurtigsjekk

Test forståelsen Deres av konseptene innen React Native Mobile Development fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

De har bygget verktøykjeden: Node og nvm kjører JavaScript, Expo CLI oppretter grunnstrukturen og leverer appen, og Watchman samt SDK-ene driver simulatorene. Neste steg: det første prosjektet! 🎉

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Installere Node, Expo CLI og simulatorer» gratis?

Ja – hele teksten i «Installere Node, Expo CLI og simulatorer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Native Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Installere Node, Expo CLI og simulatorer»?

Sett opp Node.js og Expo CLI, og konfigurer iOS Simulator eller Android Emulator slik at du kan kjøre React Native-apper lokalt. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Installere Node, Expo CLI og simulatorer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Installere Node, Expo CLI og simulatorer
Opprette ditt første Expo-prosjekt
Kjøre på enhet og emulator
Forstå prosjektstrukturen

← Tilbake til React Native Academy