Birinchi ilova — telefonda ishga tushirish, hot reload

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

Muammodan boshlaylik

Shablon ilovasi ishlayapti — lekin u kimningdir kodi. Endi o'zimiznikini yozamiz: noldan, kichik, lekin to'liq ishlaydigan ilova — suv ichish hisoblagichi. Kuniga 8 stakan maqsad, har bir tugma bosilganda +1.

Shablonni tozalash

npm run reset-project

Bu buyruq namuna ekranlarni app-example papkasiga ko'chiradi va toza app/ papkasini qoldiradi. Ichida bitta fayl — app/index.tsx.

app/index.tsx

Faylni to'liq shunday yozing:

import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

const MAQSAD = 8;

export default function Index() {
  const [stakan, setStakan] = useState(0);
  const foiz = Math.min(stakan / MAQSAD, 1);

  return (
    <View style={styles.ekran}>
      <Text style={styles.sarlavha}>💧 Suv hisoblagichi</Text>

      <Text style={styles.son}>{stakan} / {MAQSAD}</Text>
      <Text style={styles.izoh}>
        {stakan >= MAQSAD ? 'Maqsadga yetdingiz! 🎉' : `Yana ${MAQSAD - stakan} stakan`}
      </Text>

      <View style={styles.chiziq}>
        <View style={[styles.toldirilgan, { width: `${foiz * 100}%` }]} />
      </View>

      <Pressable style={styles.tugma} onPress={() => setStakan(stakan + 1)}>
        <Text style={styles.tugmaMatn}>+ 1 stakan</Text>
      </Pressable>

      <Pressable onPress={() => setStakan(0)}>
        <Text style={styles.tozalash}>Qaytadan</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  ekran: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
    backgroundColor: '#f0f9ff',
  },
  sarlavha: { fontSize: 24, fontWeight: '700', marginBottom: 24 },
  son: { fontSize: 64, fontWeight: '800', color: '#0284c7' },
  izoh: { fontSize: 16, color: '#475569', marginBottom: 24 },
  chiziq: {
    width: '100%',
    height: 12,
    backgroundColor: '#e2e8f0',
    borderRadius: 6,
    overflow: 'hidden',
    marginBottom: 32,
  },
  toldirilgan: { height: '100%', backgroundColor: '#0ea5e9' },
  tugma: {
    backgroundColor: '#0284c7',
    paddingVertical: 16,
    paddingHorizontal: 48,
    borderRadius: 12,
    marginBottom: 16,
  },
  tugmaMatn: { color: 'white', fontSize: 18, fontWeight: '600' },
  tozalash: { color: '#64748b', fontSize: 14 },
});

Saqlang — telefoningizda ilova darhol yangilanadi.

Kodni tahlil qilamiz

export default function Index() — ekran. Expo Router da app/index.tsx — ilovaning bosh ekrani (25-dars).

View — div ning o'rni: konteyner.

Text — matn. React Native da har qanday matn <Text> ichida bo'lishi shart:

<View>Salom</View>
// ❌ Error: Text strings must be rendered within a <Text> component.

Pressable — bosiladigan element. onClick emas, onPress.

StyleSheet.create — stillar. CSS ga o'xshash, lekin JavaScript ob'ekt: font-size → fontSize, raqamlar birliksiz (24 — piksel emas, "mustaqil birlik"). Batafsil — 13-dars.

style={[a, b]} — bir nechta stilni birlashtirish; keyingisi ustun.

flex: 1 — ekranni to'liq egallash. Mobil layoutning asosi (14-dars).

Fast Refresh — tezkor yangilanish

Matnni o'zgartiring: '💧 Suv hisoblagichi' → '💧 Suv ich!' — saqlang.

Ilova yangilandi, lekin stakan holati saqlanib qoldi — agar 5 bo'lsa, 5 ligicha qoladi. Bu Fast Refresh: React komponentni qayta yuklaydi, lekin holatni saqlaydi. Dizayn ustida ishlashda juda qulay.

To'liq qayta yuklash (holat ham tozalanadi):

• Terminalda r
• Telefonda — silkitish (yoki Android emulyatorda Ctrl + M, iOS simulatorda Cmd + D) → Reload

Xato qilsak nima bo'ladi

</Text> ni o'chirib saqlang. Telefonda qizil ekran:

SyntaxError: Expected corresponding JSX closing tag for <Text>
  app/index.tsx (14:6)

Fayl va qator ko'rsatilgan. Tuzating, saqlang — ekran o'zi yo'qoladi. Debug haqida — 5-dars.

Nima uchun shunday?

Nima uchun React Native da matn albatta <Text> ichida bo'lishi kerak — vebda div ichiga to'g'ridan-to'g'ri yozsa bo'ladi-ku?

Chunki native platformalarda "matn" — alohida, maxsus element: Android da TextView, iOS da UILabel. Ular shrift, qator uzilishi, tanlash (selection), accessibility ni boshqaradi. Oddiy konteyner (UIView) matnni chiza olmaydi. Vebda brauzer "yalang'och" matnni avtomatik matn tuguniga o'raydi; React Native esa buni aniq qilishni talab qiladi — shunda har bir matn qayerda va qanday chizilishi aniq.

Xulosa

Eslab qoling:

• npm run reset-project — shablonni tozalash
• app/index.tsx — bosh ekran
• View — konteyner, Text — matn (majburiy!), Pressable + onPress — bosish
• StyleSheet.create({...}) — stillar, camelCase, birliksiz raqamlar
• style={[a, b]} — stillarni birlashtirish
• Fast Refresh — holat saqlangan holda yangilanadi; r — to'liq qayta yuklash

Keyingi dars

4-dars: Loyiha tuzilmasi — app papkasi, app.json, assets