React Native Academy · Pelajaran

Memasang Node, Expo CLI dan Simulator

Sediakan Node.js dan Expo CLI, kemudian konfigurasikan iOS Simulator atau Android Emulator supaya anda boleh menjalankan aplikasi React Native secara setempat.

Pelajaran 1 daripada 413 langkah

Memasang Node, Expo CLI dan Simulator ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Mengapa Node.js Menggerakkan React Native

React Native berjalan pada Node.js — ia menggerakkan penggabung Metro yang menukar JSX anda menjadi aplikasi. Pasang versi LTS untuk kestabilan, sebaik-baiknya melalui pengurus versi 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

Memasang Expo CLI

Expo CLI membolehkan anda mencipta, menjalankan dan membina aplikasi tanpa menyentuh kod natif. Gandingkannya dengan aplikasi Expo Go untuk mengimbas kod QR dan melihat aplikasi anda pada telefon sebenar dengan segera.

# 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

Menyediakan Simulator iOS pada macOS

Untuk iOS Simulator, anda memerlukan Mac dengan Xcode yang dipasang. Buka Xcode sekali untuk menerima lesennya, kemudian tambahkan alat baris perintah. Expo boleh melancarkan simulator dengan satu tekanan kekunci.

# 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

Menyediakan Emulator Android

Untuk Android, anda memerlukan Android Studio. Pasang SDK dan emulator, cipta peranti Pixel maya, dan tetapkan pemboleh ubah ANDROID_HOME supaya Expo dapat mencari semuanya. Lihat kod tersebut.

# 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

Memahami Penggabung Metro

Memulakan projek akan melancarkan Metro, iaitu penggabung yang memantau fail anda dan memuat semula dengan serta-merta menggunakan Fast Refresh. Jika kandungan menjadi lapuk, kosongkan cache menggunakan tanda --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

Kit Pembangunan Java untuk Android

Binaan Android memerlukan Java Development Kit — Expo mengesyorkan JDK 17. Pasangnya, kemudian jalankan java --version untuk mengesahkan bahawa ia berada dalam PATH anda. Kod tersebut memasangnya melalui 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/

Mengesahkan Persediaan Lengkap Anda

Selepas semuanya dipasang, jalankan npx expo-env-info (atau react-native doctor) untuk mengimbas persediaan anda. Perintah ini menandakan apa-apa yang tiada, jadi baiki isu tersebut sebelum projek pertama anda.

# 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: Pemantauan Fail Lebih Pantas

Watchman ialah pemantau fail daripada Facebook yang membantu Metro mengesan perubahan dengan lebih pantas, khususnya pada macOS. Pasangnya melalui Homebrew sebelum anda mula membina aplikasi.

# Install Watchman on macOS
brew install watchman

# Verify installation
watchman version

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

Pemboleh Ubah Persekitaran dan PATH

Banyak masalah persediaan berpunca daripada entri PATH yang tiada — shell anda tidak dapat mencari adb atau emulator. Tambahkan laluan tersebut pada ~/.zshrc, kemudian muat semula fail itu. Kod tersebut menunjukkan caranya dengan tepat.

# 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

Aplikasi Expo Go pada Peranti Sebenar

Cara terpantas untuk menguji pada telefon sebenar ialah menggunakan aplikasi Expo Go. Jalankan expo start, kemudian imbas kod QR, dan aplikasi anda akan dimuatkan melalui Wi-Fi. Sesuai untuk pembangunan pantas. 📱

# 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

Menyelesaikan Masalah Persediaan Lazim

Kebanyakan masalah persediaan boleh dijangka: port 8081 yang sedang digunakan, cache Metro yang lapuk, versi Node yang salah atau ANDROID_HOME yang tiada. Baca juga skrin ralat merah dengan teliti.

# 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

Semakan Pantas

Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ulang Kaji Pelajaran

Anda telah membina rantaian alat anda: Node dan nvm menjalankan JavaScript, Expo CLI menyediakan dan menyampaikan aplikasi anda, manakala Watchman serta SDK menggerakkan simulator. Seterusnya: projek pertama anda! 🎉

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Memasang Node, Expo CLI dan Simulator” percuma?

Ya — teks penuh “Memasang Node, Expo CLI dan Simulator” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Native Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Memasang Node, Expo CLI dan Simulator”?

Sediakan Node.js dan Expo CLI, kemudian konfigurasikan iOS Simulator atau Android Emulator supaya anda boleh menjalankan aplikasi React Native secara setempat. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Memasang Node, Expo CLI dan Simulator” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke React Native Academy