React Native mobil inkişafda: nədir, əsas anlayışlar və necə işləyir

Əsaslar (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — UI-ni təsvir etmək üçün JavaScript-in sintaktik genişlənməsi. HTML kimi görünür, lakin React.createElement() vasitəsilə işləyir. JSX ifadələri: {variable}, {condition && <View />}, {array.map()}. Functional Component — JSX qaytaran funksiya. Props-ı arqument kimi qəbul edir. React-in müasir standartı (React 16.8-dən əvvəl Class Components istifadə olunurdu). Hooks — Functional Component-dən vəziyyətə və həyat dövrünə daxil olmaq üçün funksiyalar. Hooks qaydaları: yalnız yuxarı səviyyədə, yalnız Functional Components-də.

Hooks İstinadı

useState — yerli vəziyyət. useEffect — yan təsirlər. useContext — Context-ə giriş. useRef — dəyişdirilə bilən istinad. useCallback — funksiya yadda saxlanması. useMemo — dəyər yadda saxlanması. Custom Hooks — təkrar istifadə oluna bilən məntiq: function useDebounce(value, delay).

// React Native-də hooks ilə Functional Component
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — [value, setValue] qaytarır. setValue — əvəz edir (Class-da setState kimi birləşdirmir). Obyektlər üçün: setUser(prev => ({ ...prev, name: 'New' })). useEffect — render-dən sonra işləyir. Asılılıq massivi: [] — bir dəfə (mount), [dep] — dep dəyişdikdə, undefined — hər render. Təmizləmə funksiyası — return () => {}. useContext — const value = useContext(MyContext). Ağacda yuxarıda Context.Provider tələb edir.

useRef — render-lər arasında dəyəri saxlayan dəyişdirilə bilən obyekt. .current — dəyişiklik. İstifadəsi: yerli elementlərə giriş (ref={inputRef}), əvvəlki dəyərləri saxlamaq, taymerlər. useCallback — yadda saxlanmış funksiya qaytarır. const handlePress = useCallback(() => {}, [dep]). useMemo — yadda saxlanmış dəyər qaytarır. const sorted = useMemo(() => data.sort(), [data]). Bahalı hesablamalar üçün useMemo istifadə edin.

useState — sadə vəziyyət üçün. useEffect — API çağırışları və abunəliklər üçün. useCallback/useMemo — optimallaşdırma üçün. IT Sectr hər şeyi yadda saxlamağı tövsiyə etmir — yalnız real performans problemləri olduqda.

Custom Hooks

Custom Hook — daxili hook-lardan istifadə edən funksiya. Adı use* ilə başlayır. Nümunələr: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks React Native-də məntiqi təkrar istifadə etmənin əsas yoludur. IT Sectr biznes məntiqini Custom Hooks-a çıxarmağı və komponentləri təmiz saxlamağı (yalnız JSX + stillər) tövsiyə edir.

Komponentlər (View, Text, FlatList, ScrollView, SafeAreaView)

View — əsas konteyner (div bənzəri). Text — mətn (mətn üçün yeganə komponent). TextInput — mətn daxiletmə. ScrollView — sürüşdürülə bilən konteyner. FlatList — böyük məlumatlar üçün virtual siyahı. SectionList — bölmələrlə FlatList. SafeAreaView — Safe Area-dan avtomatik boşluq (çentik, status paneli). Pressable — TouchableOpacity-nin müasir əvəzedicisi. useColorScheme — qaranlıq/işıqlı mövzu aşkarlanması.

FlatList Optimallaşdırması

FlatList — virtualizasiya: yalnız görünən elementlər + windowSize render edilir. Optimallaşdırma: 1) keyExtractor — unikal açar, 2) getItemLayout — sabit hündürlük (onLayout ölçməsini atlayır), 3) renderItem üçün React.memo, 4) maxToRenderPerBatch (defolt 10), 5) windowSize (defolt 21), 6) removeClippedSubviews, 7) initialNumToRender.

React Native-də Naviqasiya

React Navigation — standart naviqasiya yığını. NativeStackNavigator — yerli animasiya (push/pop). TabNavigator — aşağı tablar. DrawerNavigator — yan menyu. NavigationContainer — naviqasiyanın kök komponenti. Deep linking — xarici keçidlər üçün keçid konfiqurasiyası. Autentifikasiya axını — şərti naviqasiya: isAuth ? AppStack : AuthStack. IT Sectr əsas ekranlar üçün NativeStackNavigator-ı və birinci səviyyəli naviqasiya üçün TabNavigator-ı tövsiyə edir.

Stillər (StyleSheet)

StyleSheet.create() — stillərin yaradılması. Bütün xüsusiyyətlər camelCase-də: backgroundColor, fontSize, marginTop. Flexbox — defolt layout modeli (flexDirection: 'column'). CSS kaskadı yox, miras yox, seçicilər yox. Inline stillər — işləyir, lakin tövsiyə edilmir. StyleSheet.compose() — stilləri birləşdirmə. Platform.select — platforma spesifik stillər: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — təhlükəsiz sahə boşluqlarının idarə edilməsi.

Styled Components və CSS-in-JS

Styled Components — React Native-də CSS-in-JS üçün kitabxana. Restyle — mövzu + responsiv stillər. NativeWind — React Native üçün Tailwind CSS. Unistyles — atomik CSS ilə sürətli stillər. Qaranlıq rejim — useColorScheme + dinamik stillər. IT Sectr sadəlik üçün StyleSheet.create-i və dizayn sistemi olan layihələr üçün NativeWind-i tövsiyə edir.

Animasiya (Animated API)

Animated API — bəyannaməli animasiya. Animated.Value — animasiya dəyəri. Animated.timing — sadə animasiya. Animated.spring — yaylı animasiya. Animated.View — animasiya edilə bilən View. useNativeDriver — yerli thread-də animasiya (transform, opacity — dəstəklənir). Animated.loop — dövri animasiya. LayoutAnimation — layout dəyişikliyində avtomatik animasiya. reanimated 2/3 (kitabxana) — daha yüksək performanslı alternativ. Metro Bundler — JavaScript paketləyicisi. JS + aktivləri paketdə birləşdirir. Fast Refresh (Hot Reload) dəstəkləyir. Hermes — mobil üçün optimallaşdırılmış JS mühərriki: sürətli başlanğıc, az yaddaş. RN 0.70+-dan defolt.

Gesture Handler və Animasiyalar

React Native Gesture Handler — yerli jest emalı. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — bəyannaməli jest API-si. Reanimated + Gesture Handler — jestlərlə 60fps animasiyalar üçün birləşmə. react-native-skia — mürəkkəb 2D qrafika üçün GPU renderi. IT Sectr Animated API-dən daha yüksək performanslı bütün animasiyalar üçün Reanimated 3-ü tövsiyə edir.

Şəbəkə (fetch, AsyncStorage, API)

fetch — daxili HTTP müştərisi. GET, POST, headers, body dəstəkləyir. Axios — interceptorlarla məşhur kitabxana. AsyncStorage — açar-dəyər anbarı (UserDefaults bənzəri). MMKV — WeChat-dən AsyncStorage-a sürətli alternativ. react-native-keychain — təhlükəsiz token saxlanması. React Query (TanStack Query) — server vəziyyəti idarəetməsi: keş, yenidən yoxlama, səhifələmə. IT Sectr API sorğuları üçün React Query-ni və yerli saxlama üçün MMKV-ni tövsiyə edir.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules və Turbo Modules

Native Module — JS və yerli kod arasında körpü (Android üçün Java/Kotlin, iOS üçün ObjC/Swift). JS-dən yerli API-ləri çağırmağa imkan verir. Turbo Modules (New Architecture) — köhnə Native Modules-ların əvəzi. Sinxron çağırış, Codegen vasitəsilə tipləmə, daha az yük. Fabric Renderer — sinxron layout ilə yeni renderer. JSI (JavaScript Interface) — körpü olmadan JS-in yerli obyektlərə birbaşa girişi. IT Sectr yeni layihələr üçün Turbo Modules-ı və mövcud layihələr üçün Native Modules-ı tövsiyə edir.

// Android Yerli Modulu (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Test (Jest, React Native Testing Library)

Jest — standart test koşucusu. describe/it/expect. React Native Testing Library — komponent testi. render, fireEvent, waitFor. screen.getByText, getByTestId — axtarış. userEvent — hərəkət simulyasiyası. Snapshot testləri — toMatchSnapshot(). MSW (Mock Service Worker) — API mocklaması. Detox — RN üçün E2E testləri (grey-box, yerli). IT Sectr komponentlər üçün React Native Testing Library-ni və sona qədər ssenarilər üçün Detox-u tövsiyə edir.

CodePush (App Center) — App Store/Google Play-də yayımlamadan JS paketinin OTA yeniləmələri. İstifadəsi: təcili düzəlişlər, A/B testləri, məzmun dəyişiklikləri. Məhdudiyyətlər: yerli kod dəyişdirilə bilməz. Alternativlər: EAS Update (Expo), react-native-update. IT Sectr təcili düzəlişlər üçün CodePush-i və Expo layihələri üçün EAS Update-i tövsiyə edir.

Expo — React Native üçün freymvork. İdarə olunan iş axını — bütün konfiqurasiyalar app.json vasitəsilə. Development builds — eject olmadan xüsusi yerli modullar. Expo SDK — daxili modullar: kamera, biometriya, bildirişlər. EAS Build — bulud qurması. Expo Router — fayl əsaslı marşrutlaşdırma (Next.js bənzəri). IT Sectr yeni layihələr üçün Expo-nu və dərin yerli fərdiləşdirmə tələb edən layihələr üçün bare RN-i tövsiyə edir.