Expo bilan o'rnatish — Node.js, create-expo-app, Expo Go

~15 daq · React Native · Kirish va o'rnatish

Muammodan boshlaylik

An'anaviy mobil dasturlashni boshlash uchun: Android Studio (bir necha GB), Android SDK, emulyator sozlash, iOS uchun esa Mac va Xcode (yana 10+ GB). Birinchi "Salom" ni ko'rguncha bir kun o'tadi.

Expo bilan: Node.js, bitta buyruq va telefondagi bepul ilova. 10 daqiqada kodingiz telefonda ishlaydi.

1. Node.js

Expo uchun Node.js LTS versiyasi kerak:

node -v    # v20 yoki undan yangi bo'lishi kerak
npm -v

O'rnatilmagan bo'lsa — https://nodejs.org dan LTS versiyani yuklab oling.

2. Yangi loyiha

npx create-expo-app@latest mening-ilovam
cd mening-ilovam

create-expo-app tayyor shablon yaratadi: TypeScript, Expo Router (navigatsiya), bir nechta namuna ekranlar bilan.

[!TIP] Bo'sh shablon kerak bo'lsa: npx create-expo-app@latest mening-ilovam --template blank-typescript. Bu kursda standart shablon bilan boshlaymiz, keyin ortiqcha fayllarni tozalaymiz.

3. Telefonga Expo Go

Telefoningizga Expo Go ilovasini o'rnating:

  • Android — Google Play
  • iPhone — App Store

Expo Go — sizning kodingizni yuklab, ishga tushiradigan "konteyner". Har bir o'zgarishda ilovani qayta yasash shart emas.

4. Ishga tushirish

npx expo start

Terminalda QR kod chiqadi:

› Metro waiting on exp://192.168.1.10:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web
› Press r │ reload app
› Press j │ open debugger
  • Android: Expo Go ichidagi "Scan QR code"
  • iPhone: oddiy Kamera ilovasi bilan QR ni skanerlang

Bir necha soniyada ilova telefoningizda ochiladi.

Telefon ulanmasa

Kompyuter va telefon bir xil Wi-Fi da bo'lishi kerak. Ofis yoki universitet tarmog'i qurilmalarni bir-biridan ajratib qo'yishi mumkin. Unda:

npx expo start --tunnel

--tunnel — internet orqali ulanish. Sekinroq, lekin istalgan tarmoqda ishlaydi.

Windows Firewall so'rasa — Node.js ga ruxsat bering.

5. Emulyator (ixtiyoriy)

Telefon bo'lmasa yoki tez sinash uchun:

Android Emulator (Windows, macOS, Linux):

  1. Android Studio ni o'rnating
  2. Device Manager → yangi virtual qurilma yarating
  3. Emulyatorni ishga tushirib, terminalda a ni bosing

iOS Simulator — faqat macOS da, Xcode orqali. Terminalda i.

Veb — w ni bosing. Tez tekshirish uchun qulay, lekin barcha mobil imkoniyatlar ishlamaydi.

6. Muharrir

VS Code + kengaytmalar:

  • Expo Tools — app.json uchun avtoto'ldirish
  • ES7+ React/Redux/React-Native snippets — rnfe + Tab → tayyor komponent shabloni
  • Prettier — avtomatik formatlash

Expo Go cheklovi

Expo Go — faqat Expo SDK dagi kutubxonalarni o'z ichiga oladi. Agar keyinchalik o'z native kodi bor kutubxona kerak bo'lsa (masalan, ba'zi to'lov SDK lari) — development build yasaladi (48-dars). O'rganish va ko'pchilik ilovalar uchun Expo Go yetarli.

Nima uchun shunday?

Nima uchun telefon kompyuterdagi kodni ko'ra oladi — ilova o'rnatilmagan-ku?

npx expo start kompyuteringizda Metro degan server ishga tushiradi. U TypeScript kodingizni bitta JavaScript "bundle" ga yig'adi. Expo Go esa QR koddagi manzilga ulanib, shu bundle ni yuklab oladi va o'zining ichidagi native qatlamda ishga tushiradi. Faylni saqlaganingizda Metro o'zgargan qismni qayta yig'adi va telefonga yuboradi — shuning uchun o'zgarishlar bir soniyada ko'rinadi.

Xulosa

Eslab qoling:

  • Node.js LTS kerak
  • npx create-expo-app@latest nom — yangi loyiha
  • Telefonga Expo Go; npx expo start → QR kodni skanerlash
  • Bir xil Wi-Fi; ulanmasa — --tunnel
  • a — Android emulyator, i — iOS simulator (macOS), w — veb
  • Expo Go — o'rganish uchun yetarli; maxsus native kutubxonalar uchun — development build

Keyingi dars

3-dars: Birinchi ilova — telefonda ishga tushirish, hot reload