Node, Expo CLI ve Simülatörleri Yükleme
Node.js'i ve Expo CLI'yi kurun, yerel olarak React Native uygulamaları çalıştırabilmek için iOS Simulator veya Android Emulator'ı yapılandırın.
Node, Expo CLI ve Simülatörleri Yükleme, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.
Neden Node.js React Native'i Güçlendirir
React Native, Node.js üzerinde çalışır; JSX kodunuzu bir uygulamaya dönüştüren Metro paketleyicisine güç sağlar. Kararlılık için, ideal olarak nvm sürüm yöneticisi aracılığıyla LTS sürümünü yükleyin.
# 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.0Expo CLI Kurulumu
Expo CLI, yerel koda dokunmadan uygulama oluşturmanıza, çalıştırmanıza ve derlemenize olanak tanır. Bir QR kodu taramak ve uygulamanızı gerçek bir telefonda anında görmek için bunu Expo Go uygulamasıyla eşleştirin.
# 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 --versionmacOS'ta iOS Simulator Kurulumu
iOS Simülatörü için Xcode kurulu bir Mac gerekir. Lisansını kabul etmek için Xcode'u bir kez açın, ardından komut satırı araçlarını ekleyin. Expo, tek tuşla bir simülatör başlatabilir.
# Install Xcode Command Line Tools
xcode-select --install
# Open a simulator from the terminal
open -a Simulator
# List available simulator devices
xcrun simctl list devicesAndroid Emulator Kurulumu
Android için Android Studio gereklidir. SDK ve emülatörü yükleyin, sanal bir Pixel cihazı oluşturun ve Expo'nun her şeyi bulabilmesi için ANDROID_HOME değişkenini ayarlayın. Koda bakın.
# 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 --versionMetro Bundler'ı Anlamak
Bir proje başlattığınızda, dosyalarınızı izleyen ve Fast Refresh ile anında yeniden yükleyen bundler olan Metro çalışır. Eğer sistemde bir aksaklık olursa, önbelleğini `--clear` bayrağı ile temizleyebilirsiniz.
# 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 menuAndroid için Java Development Kit
Android derlemeleri için bir Java Development Kit (JDK) gerekir; Expo, JDK 17'yi önerir. Kurulumu yaptıktan sonra, `java --version` komutunu çalıştırarak PATH'inizde olup olmadığını doğrulayın. Kod, kurulumu Homebrew aracılığıyla gösteriyor.
# 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/Kurulumunuzu Doğrulama
Her şey yüklendikten sonra, kurulumunuzu taramak için npx expo-env-info (veya react-native doctor) komutunu çalıştırın. Eksik olan her şeyi işaretleyecektir, bu yüzden ilk projenizden önce bu sorunları giderin.
# 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: Daha Hızlı Dosya İzleme
Watchman, Facebook'tan gelen bir dosya izleyicidir ve özellikle macOS'ta Metro'nun değişiklikleri çok daha hızlı algılamasını sağlar. Derlemeye başlamadan önce Homebrew aracılığıyla kurun.
# Install Watchman on macOS
brew install watchman
# Verify installation
watchman version
# If Metro has stale Watchman state, reset it
watchman watch-del-allOrtam Değişkenleri ve PATH
Birçok kurulum sorunu, eksik bir PATH girdisinden kaynaklanır; kabuğunuz adb veya emulator'ü bulamaz. Yolları ~/.zshrc'ye ekleyin, sonra yeniden yükleyin. Kod, tam olarak ne yapmanız gerektiğini gösterir.
# 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 ~/.zshrcGerçek Cihazda Expo Go Uygulaması
Gerçek bir telefonda test yapmanın en hızlı yolu Expo Go uygulamasıdır. `expo start` komutunu çalıştırın, ardından QR kodu tarayın ve uygulamanız Wi-Fi üzerinden yüklenir. Hızlı geliştirme için mükemmel. 📱
# 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 defaultYaygın Kurulum Sorunlarını Giderme
Çoğu kurulum aksaklığı tahmin edilebilirdir: meşgul bir port 8081, eski bir Metro önbelleği, yanlış bir Node sürümü veya eksik bir ANDROID_HOME. Ve her zaman kırmızı hata ekranını dikkatlice okuyun.
# 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-serverHızlı Kontrol
Bu dersteki React Native Mobil Geliştirme kavramlarına dair bilginizi test edin.
Ders Özeti
Araç zincirinizi oluşturdunuz: Node ve nvm JavaScript'i çalıştırır, Expo CLI uygulamanızı iskeletini oluşturur ve sunar, Watchman ve SDK'lar ise simülatörleri destekler. Sırada: ilk projeniz! 🎉
Sıkça Sorulan Sorular
“Node, Expo CLI ve Simülatörleri Yükleme” dersi ücretsiz mi?
Evet — “Node, Expo CLI ve Simülatörleri Yükleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.
“Node, Expo CLI ve Simülatörleri Yükleme” dersinde ne öğreneceğim?
Node.js'i ve Expo CLI'yi kurun, yerel olarak React Native uygulamaları çalıştırabilmek için iOS Simulator veya Android Emulator'ı yapılandırın. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Native Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Node, Expo CLI ve Simülatörleri Yükleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Node, Expo CLI ve Simülatörleri Yükleme
- İlk Expo Projenizi Oluşturma
- Cihazda ve Emülatörde Çalıştırma
- Proje Yapısını Anlama