React Native nima? — qanday ishlaydi, Flutter va native dan farqi

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

Muammodan boshlaylik

Siz React bilan veb-sayt yozasiz. Buyurtmachi deydi: "Endi mobil ilova ham kerak — Android va iPhone uchun".

An'anaviy yo'l:

  • Android uchun — Kotlin yoki Java, Android Studio
  • iOS uchun — Swift, Xcode, va albatta Mac kompyuter
  • Ikki xil til, ikki xil jamoa, ikki xil kod — bitta ilova uchun

React Native — bitta JavaScript/TypeScript kodi bilan ikkala platforma uchun ham haqiqiy mobil ilova yozish. Va siz allaqachon biladigan React bilan.

Qanday ishlaydi

React Native — veb-sahifani ilova ichiga "o'rab qo'yish" emas. Siz yozgan komponentlar haqiqiy native elementlarga aylanadi:

Siz yozasiz Android da iOS da
<View> android.view.View UIView
<Text> TextView UILabel
<TextInput> EditText UITextField
<ScrollView> ScrollView UIScrollView 
┌─────────────────────┐        ┌──────────────────────┐
│ Sizning kodingiz    │        │ Native qatlam        │
│ (JavaScript / TS)   │ ─────→ │ Android: Kotlin/Java │
│ React komponentlar  │  JSI   │ iOS: Swift/ObjC      │
└─────────────────────┘        └──────────────────────┘

JavaScript mantiqni (holat, hodisalar, API) boshqaradi, ekrandagi elementlarni esa operatsion tizimning o'zi chizadi. Shuning uchun ilova "native" ko'rinadi va ishlaydi: tizim shriftlari, scroll fizikasi, klaviatura.

Zamonaviy React Native yangi arxitektura (JSI, Fabric) da ishlaydi: JavaScript va native qatlam bevosita, tez muloqot qiladi.

React bilan nima umumiy

React Native — bu React. Siz bilgan hamma narsa ishlaydi:

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

export default function Hisoblagich() {
  const [son, setSon] = useState(0);

  return (
    <View>
      <Text>Bosildi: {son} marta</Text>
      <Pressable onPress={() => setSon(son + 1)}>
        <Text>Bosing</Text>
      </Pressable>
    </View>
  );
}
  • Komponentlar, props, useState, useEffect, custom hooks — bir xil
  • JSX — bir xil
  • TypeScript — bir xil
  • npm paketlari — ko'pchiligi (DOM ga bog'liq bo'lmaganlari)

Farqi — HTML yo'q: div o'rniga View, p o'rniga Text, onClick o'rniga onPress, CSS o'rniga StyleSheet. Buni keyingi darslarda o'rganamiz.

Kim ishlatadi

Meta (Facebook, Instagram ning qismlari), Microsoft (Office, Teams, Xbox), Shopify, Discord, Coinbase, Tesla ilovasi. O'zbekistonda ham ko'plab startaplar va bank ilovalari.

Muqobillar bilan solishtirish

React Native Flutter Native (Kotlin + Swift)
Til JavaScript / TypeScript Dart Ikki xil til
Kod Bitta, ikki platforma Bitta, ikki platforma Ikki alohida
UI Native elementlar O'z dvigateli bilan chizadi Native
Veb dasturchi uchun ✅ React bilsa — darhol Yangi til va freymvork Yangi til, yangi hammasi
Tezlik Ko'p ilovalar uchun yetarli Juda yaxshi Eng yuqori
Platformaning eng yangi imkoniyatlari Biroz kechikadi Biroz kechikadi Darhol
Ekotizim npm — ulkan pub.dev — katta Rasmiy SDK lar

Qachon React Native tanlanadi:

  • Jamoa React/JavaScript ni biladi
  • Veb va mobil ilova o'rtasida kod (mantiq, tiplar, API) bo'lishish kerak
  • Tez ishlab chiqish, bitta jamoa

Qachon native yaxshiroq:

  • Og'ir grafika, 3D o'yinlar
  • Platformaga juda chuqur integratsiya (masalan, maxsus Bluetooth qurilmalar)

Expo

React Native ni ikki yo'l bilan ishlatish mumkin. Bugun rasmiy React Native hujjatlari Expo freymvorkini tavsiya qiladi:

  • Android Studio va Xcode siz boshlash — telefondagi Expo Go ilovasida darhol ko'rish
  • Tayyor kutubxonalar: kamera, joylashuv, bildirishnomalar, fayllar
  • Expo Router — fayllar asosidagi navigatsiya (Next.js kabi)
  • EAS — bulutda ilova yasash va do'konlarga yuborish (Mac siz ham iOS uchun!)

Bu kurs to'liq Expo va TypeScript bilan.

Kurs uchun nima kerak

  • JavaScript va React asoslari — komponentlar, props, useState, useEffect (saytdagi React kursi)
  • TypeScript asoslari — foydali, lekin majburiy emas (saytdagi TS kursi)
  • Kompyuter (Windows, macOS yoki Linux) va Android yoki iPhone telefon

Nima uchun shunday?

Nima uchun React Native veb-sahifani shunchaki ilovaga o'ramaydi (Cordova kabi)?

Chunki WebView ichidagi sahifa — doim "begona" bo'lib qoladi: scroll boshqacha, tugmalar sekin javob beradi, klaviatura noqulay, animatsiyalar uzilib-uzilib. Foydalanuvchi buni darhol sezadi. React Native yondashuvi — "bir marta o'rgan, hamma joyda yoz" (learn once, write anywhere): React mantig'i umumiy, lekin ekranda — har bir platformaning o'z native elementlari. Natija — native ilovadan deyarli farq qilmaydigan tajriba.

Xulosa

Eslab qoling:

  • React Native — bitta TS/JS kod bilan Android va iOS uchun haqiqiy native ilova
  • Komponentlar native elementlarga aylanadi: View → UIView / android.view.View
  • React bilimlari to'liq ishlaydi; HTML va CSS o'rniga — View, Text, StyleSheet
  • Flutter — Dart tilida; native — ikki xil til va kod
  • Expo — rasmiy tavsiya etilgan yo'l; bu kurs Expo + TypeScript bilan

Keyingi dars

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