React Native a mobilfejlesztésben: mi ez, alapfogalmak és hogyan működik

Alapok (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — a JavaScript szintaktikus kiterjesztése az UI leírásához. HTML-nek néz ki, de a React.createElement()-en keresztül működik. JSX kifejezések: {variable}, {condition && <View />}, {array.map()}. Functional Component — egy függvény, amely JSX-et ad vissza. Props-ot fogad el argumentumként. A React modern szabványa (a React 16.8 előtt Class Components-okat használtak). Hookok — függvények az állapot és életciklus eléréséhez Functional Component-ből. Hookok szabályai: csak a legfelső szinten, csak Functional Components-ekben.

Hookok Referenciája

useState — lokális állapot. useEffect — mellékhatások. useContext — hozzáférés a Context-hez. useRef — változtatható referencia. useCallback — függvény memoizáció. useMemo — érték memoizáció. Custom Hooks — újrahasznosítható logika: function useDebounce(value, delay).

// Functional Component hookokkal a React Native-ben
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>
  );
}

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

useState — [value, setValue]-t ad vissza. setValue — helyettesíti (nem egyesít, mint a setState a Class-ben). Objektumokhoz: setUser(prev => ({ ...prev, name: 'New' })). useEffect — a renderelés után fut le. Függőségi tömb: [] — egyszer (csatlakozáskor), [dep] — amikor a dep változik, undefined — minden rendereléskor. Tisztító függvény — return () => {}. useContext — const value = useContext(MyContext). Context.Provider-t igényel magasabban a fában.

useRef — változtatható objektum, ami megőrzi az értéket a renderelések között. .current — változtatás. Használata: natív elemek elérése (ref={inputRef}), előző értékek tárolása, időzítők. useCallback — egy memoizált függvényt ad vissza. const handlePress = useCallback(() => {}, [dep]). useMemo — egy memoizált értéket ad vissza. const sorted = useMemo(() => data.sort(), [data]). Használja a useMemo-t költséges számításokhoz.

useState — egyszerű állapothoz. useEffect — API hívásokhoz és feliratkozásokhoz. useCallback/useMemo — optimalizáláshoz. Az IT Sectr azt javasolja, hogy ne memoizáljon mindent — csak amikor valódi teljesítményproblémák vannak.

Custom Hooks

Custom Hook — egy függvény, amely beépített hookokat használ. A név use*-gal kezdődik. Példák: useDebounce, useNetworkStatus, useAppState, useKeyboard. A Custom Hooks a logika újrahasznosításának fő módja a React Native-ben. Az IT Sectr javasolja az üzleti logika Custom Hooks-ba való kiszervezését és a komponensek tisztán tartását (csak JSX + stílusok).

Komponensek (View, Text, FlatList, ScrollView, SafeAreaView)

View — alap konténer (a div-hez hasonló). Text — szöveg (egyetlen komponens szöveghez). TextInput — szöveg bevitele. ScrollView — görgethető konténer. FlatList — virtualizált lista nagy adatokhoz. SectionList — FlatList szekciókkal. SafeAreaView — automatikus kitöltés a Safe Area-ból (bevágás, állapotsáv). Pressable — a TouchableOpacity modern helyettesítője. useColorScheme — sötét/világos téma érzékelése.

FlatList Optimalizálás

FlatList — virtualizáció: csak a látható elemek + windowSize kerülnek renderelésre. Optimalizálás: 1) keyExtractor — egyedi kulcs, 2) getItemLayout — rögzített magasság (kihagyja az onLayout mérést), 3) React.memo a renderItem-hez, 4) maxToRenderPerBatch (alapértelmezett 10), 5) windowSize (alapértelmezett 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigáció React Native-ben

React Navigation — szabványos navigációs verem. NativeStackNavigator — natív animáció (push/pop). TabNavigator — alsó lapok. DrawerNavigator — oldalsó menü. NavigationContainer — a navigáció gyökéreleme. Deep linking — link konfiguráció külső hivatkozásokhoz. Hitelesítési folyamat — feltételes navigáció: isAuth ? AppStack : AuthStack. Az IT Sectr a NativeStackNavigator-t javasolja fő képernyőkhöz és a TabNavigator-t az első szintű navigációhoz.

Stílusok (StyleSheet)

StyleSheet.create() — stílusok létrehozása. Minden tulajdonság camelCase-ben: backgroundColor, fontSize, marginTop. Flexbox — alapértelmezett elrendezési modell (flexDirection: 'column'). Nincs CSS kaszkád, nincs öröklés, nincsenek szelektorok. Inline stílusok — működnek, de nem ajánlottak. StyleSheet.compose() — stílusok kombinálása. Platform.select — platform-specifikus stílusok: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — a biztonsági terület betéteinek kezelése.

Styled Components és CSS-in-JS

Styled Components — könyvtár a CSS-in-JS-hez React Native-ben. Restyle — témázás + reszponzív stílusok. NativeWind — Tailwind CSS React Native-hez. Unistyles — gyors stílusok atomi CSS-sel. Sötét mód — useColorScheme + dinamikus stílusok. Az IT Sectr az StyleSheet.create-t javasolja az egyszerűségért és a NativeWind-t a dizájnrendszerrel rendelkező projektekhez.

Animáció (Animated API)

Animated API — deklaratív animáció. Animated.Value — animációs érték. Animated.timing — egyszerű animáció. Animated.spring — rugós animáció. Animated.View — animálható View. useNativeDriver — animáció a natív szálon (transform, opacity — támogatott). Animated.loop — ciklusos animáció. LayoutAnimation — automatikus animáció az elrendezés változásakor. reanimated 2/3 (könyvtár) — nagyobb teljesítményű alternatíva. Metro Bundler — JavaScript csomagoló. JS + eszközök összecsomagolása egyetlen bundle-be. Támogatja a Fast Refresh (Hot Reload) funkciót. Hermes — mobilra optimalizált JS motor: gyors indulás, kevesebb memória. Alapértelmezett RN 0.70+ óta.

Gesture Handler és animációk

React Native Gesture Handler — natív gesztusfeldolgozás. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — deklaratív gesztus API. Reanimated + Gesture Handler — kombináció 60fps animációkhoz gesztusokkal. react-native-skia — GPU megjelenítés összetett 2D grafikákhoz. Az IT Sectr a Reanimated 3-at javasolja minden olyan animációhoz, amely teljesítményben felülmúlja az Animated API-t.

Hálózat (fetch, AsyncStorage, API)

fetch — beépített HTTP kliens. Támogatja a GET, POST, headers, body elemeket. Axios — népszerű könyvtár elfogókkal. AsyncStorage — kulcs-érték tároló (hasonló a UserDefaults-hoz). MMKV — gyors alternatíva az AsyncStorage-hoz a WeChat-től. react-native-keychain — biztonságos token tárolás. React Query (TanStack Query) — szerverállapot-kezelés: gyorsítótárazás, újraérvényesítés, lapozás. Az IT Sectr a React Query-t javasolja API kérésekhez és az MMKV-t helyi tároláshoz.

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 Modulok és Turbo Modulok

Native Module — híd a JS és a natív kód között (Java/Kotlin Androidhoz, ObjC/Swift iOS-hez). Lehetővé teszi natív API-k meghívását JS-ből. Turbo Modules (New Architecture) — a régi Native Module-ok helyettesítője. Szinkron hívás, típusmegadás Codegen-en keresztül, kisebb többletterhelés. Fabric Renderer — új renderelő szinkron elrendezéssel. JSI (JavaScript Interface) — közvetlen JS hozzáférés natív objektumokhoz híd nélkül. Az IT Sectr a Turbo Module-okat javasolja új projektekhez és a Native Module-okat meglévőkhöz.

// Android natív modul (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)
    }
}

Tesztelés (Jest, React Native Testing Library)

Jest — szabványos teszt futtató. describe/it/expect. React Native Testing Library — komponensek tesztelése. render, fireEvent, waitFor. screen.getByText, getByTestId — keresés. userEvent — műveletek szimulálása. Snapshot tesztek — toMatchSnapshot(). MSW (Mock Service Worker) — API szimulálás. Detox — E2E tesztek RN-hez (grey-box, natív). Az IT Sectr a React Native Testing Library-t javasolja komponensekhez és a Detox-ot végpontok közötti forgatókönyvekhez.

CodePush (App Center) — OTA frissítések a JS bundle-hez anélkül, hogy közzétennénk az App Store-ban/Google Play-ben. Használata: gyorsjavítások, A/B tesztek, tartalomváltoztatások. Korlátozások: nem változtathatja meg a natív kódot. Alternatívák: EAS Update (Expo), react-native-update. Az IT Sectr a CodePush-t javasolja sürgős javításokhoz és az EAS Update-t Expo projektekhez.

Expo — keretrendszer React Native-hez. Felügyelt munkafolyamat — minden konfiguráció app.json-en keresztül. Development builds — egyedi natív modulok eject nélkül. Expo SDK — beépített modulok: kamera, biometria, értesítések. EAS Build — felhőalapú build. Expo Router — fájlalapú útválasztás (hasonló a Next.js-hez). Az IT Sectr az Expo-t javasolja új projektekhez és a bare RN-t mély natív testreszabást igénylő projektekhez.