React Native Academy · Lekcja

Instalowanie Node, Expo CLI i symulatorów

Skonfiguruj Node.js i Expo CLI oraz skonfiguruj iOS Simulator lub Android Emulator, aby móc uruchamiać aplikacje React Native lokalnie.

Instalowanie Node, Expo CLI i symulatorów to bezpłatna lekcja React Native Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Native Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Native Academy zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

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! 🎉

Często zadawane pytania

Czy lekcja „Instalowanie Node, Expo CLI i symulatorów” jest bezpłatna?

Tak — pełny tekst „Instalowanie Node, Expo CLI i symulatorów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Native Academy, przejdź na CoddyKit PRO. Kurs React Native Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Instalowanie Node, Expo CLI i symulatorów”?

Skonfiguruj Node.js i Expo CLI oraz skonfiguruj iOS Simulator lub Android Emulator, aby móc uruchamiać aplikacje React Native lokalnie. Ćwiczysz React Native Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Native Academy?

Nie wymagamy żadnego doświadczenia. React Native Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Instalowanie Node, Expo CLI i symulatorów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Native Academy?

Tak. Każda lekcja React Native Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Instalowanie Node, Expo CLI i symulatorów
Tworzenie pierwszego projektu Expo
Uruchamianie na urządzeniu i emulatorze
Poznawanie struktury projektu

← Powrót do React Native Academy