React Native у мобилном развоју: шта је то, кључни појмови и како ради

Основе (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — синтаксичко проширење JavaScript-а за описивање UI. Изгледа као HTML, али ради кроз React.createElement(). JSX изрази: {variable}, {condition && <View />}, {array.map()}. Functional Component — функција која враћа JSX. Прима props као аргумент. Модерни стандард React-а (пре React 16.8 су коришћени Class Components). Hooks — функције за приступ стању и животном циклусу из Functional Component-а. Правила Hooks-а: само на врхунском нивоу, само у Functional Components-има.

Hooks Референца

useState — локално стање. useEffect — споредни ефекти. useContext — приступ Context-у. useRef — променљива референца. useCallback — мемоизација функције. useMemo — мемоизација вредности. Custom Hooks — поновно употребљива логика: function useDebounce(value, delay).

// Functional Component са хуковима у React Native-у
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>
  );
}

Хукови (useState, useEffect, useRef, useCallback, useMemo)

useState — враћа [value, setValue]. setValue — замењује (не спаја као setState у Class-у). За објекте: setUser(prev => ({ ...prev, name: 'New' })). useEffect — извршава се након рендеровања. Низ зависности: [] — једном (монтирање), [dep] — када се dep промени, undefined — свако рендеровање. Функција чишћења — return () => {}. useContext — const value = useContext(MyContext). Захтева Context.Provider више у стаблу.

useRef — променљиви објекат који чува вредност између рендеровања. .current — мутација. Користи се за: приступ изворним елементима (ref={inputRef}), чување претходних вредности, тајмере. useCallback — враћа мемоизовану функцију. const handlePress = useCallback(() => {}, [dep]). useMemo — враћа мемоизовану вредност. const sorted = useMemo(() => data.sort(), [data]). Користите useMemo за скупе прорачуне.

useState — за једноставно стање. useEffect — за API позиве и претплате. useCallback/useMemo — за оптимизацију. IT Sectr препоручује да не мемоизирате све — само када постоје прави проблеми са перформансама.

Custom Hooks

Custom Hook — функција која користи уграђене хукове. Име почиње са use*. Примери: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks су главни начин поновног коришћења логике у React Native-у. IT Sectr препоручује издвајање пословне логике у Custom Hooks и одржавање компоненти чистим (само JSX + стилови).

Компоненте (View, Text, FlatList, ScrollView, SafeAreaView)

View — основни контејнер (аналогно div-у). Text — текст (једина компонента за текст). TextInput — унос текста. ScrollView — контејнер који се помера. FlatList — виртуелизована листа за велике податке. SectionList — FlatList са секцијама. SafeAreaView — аутоматско одстојање од Safe Area (зарез, статусна трака). Pressable — модерна замена за TouchableOpacity. useColorScheme — откривање тамне/светле теме.

FlatList Оптимизација

FlatList — виртуелизација: рендерују се само видљиви елементи + windowSize. Оптимизација: 1) keyExtractor — јединствени кључ, 2) getItemLayout — фиксна висина (прескаче мерење onLayout), 3) React.memo за renderItem, 4) maxToRenderPerBatch (подразумевано 10), 5) windowSize (подразумевано 21), 6) removeClippedSubviews, 7) initialNumToRender.

Навигација у React Native-у

React Navigation — стандардни навигациони стек. NativeStackNavigator — изворна анимација (push/pop). TabNavigator — доње картице. DrawerNavigator — бочни мени. NavigationContainer — коренска компонента навигације. Deep linking — конфигурација линкова за спољашње линкове. Ток аутентификације — условна навигација: isAuth ? AppStack : AuthStack. IT Sectr препоручује NativeStackNavigator за главне екране и TabNavigator за навигацију првог нивоа.

Стилови (StyleSheet)

StyleSheet.create() — креирање стилова. Сва својства у camelCase: backgroundColor, fontSize, marginTop. Flexbox — подразумевани модел распореда (flexDirection: 'column'). Нема CSS каскаде, нема наслеђивања, нема селектора. Inline стилови — раде, али се не препоручују. StyleSheet.compose() — комбиновање стилова. Platform.select — стилови специфични за платформу: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — управљање уметцима безбедне зоне.

Styled Components и CSS-in-JS

Styled Components — библиотека за CSS-in-JS у React Native-у. Restyle — тематизација + респонзивни стилови. NativeWind — Tailwind CSS за React Native. Unistyles — брзи стилови са атомским CSS-ом. Тамни режим — useColorScheme + динамички стилови. IT Sectr препоручује StyleSheet.create за једноставност и NativeWind за пројекте са системом дизајна.

Анимација (Animated API)

Animated API — декларативна анимација. Animated.Value — вредност анимације. Animated.timing — једноставна анимација. Animated.spring — опружна анимација. Animated.View — View који се може анимирати. useNativeDriver — анимација на изворној нити (transform, opacity — подржани). Animated.loop — анимација у петљи. LayoutAnimation — аутоматска анимација при промени распореда. reanimated 2/3 (библиотека) — алтернатива са бољим перформансама. Metro Bundler — JavaScript пакер. Паковање JS + ресурса у сноп. Подржава Fast Refresh (Hot Reload). Hermes — JS мотор оптимизован за мобилне: брзо покретање, мање меморије. Подразумевано од RN 0.70+.

Gesture Handler и анимације

React Native Gesture Handler — изворна обрада гестова. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — декларативни API гестова. Reanimated + Gesture Handler — комбинација за 60fps анимације са гестовима. react-native-skia — GPU рендеровање за сложену 2D графику. IT Sectr препоручује Reanimated 3 за све анимације бољих перформанси од Animated API-ја.

Умрежавање (fetch, AsyncStorage, API)

fetch — уграђени HTTP клијент. Подржава GET, POST, headers, body. Axios — популарна библиотека са пресретачима. AsyncStorage — складиште кључ-вредност (слично UserDefaults-у). MMKV — брза алтернатива AsyncStorage-у од WeChat-а. react-native-keychain — безбедно складиште токена. React Query (TanStack Query) — управљање стањем сервера: кеширање, поновна валидација, страничење. IT Sectr препоручује React Query за API захтеве и MMKV за локално складиштење.

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 и Turbo Modules

Native Module — мост између JS и изворног кода (Java/Kotlin за Android, ObjC/Swift за iOS). Омогућава позивање изворних API-ја из JS-а. Turbo Modules (New Architecture) — замена за старе Native Modules. Синхрони позив, типовизација кроз Codegen, мање додатног оптерећења. Fabric Renderer — нови рендерер са синхроним распоредом. JSI (JavaScript Interface) — директан приступ JS-а изворним објектима без моста. IT Sectr препоручује Turbo Modules за нове пројекте и Native Modules за постојеће.

// Изворни модул за Android (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)
    }
}

Тестирање (Jest, React Native Testing Library)

Jest — стандардни покретач тестова. describe/it/expect. React Native Testing Library — тестирање компоненти. render, fireEvent, waitFor. screen.getByText, getByTestId — претрага. userEvent — симулација акција. Snapshot тестови — toMatchSnapshot(). MSW (Mock Service Worker) — опонашање API-ја. Detox — E2E тестови за RN (grey-box, изворни). IT Sectr препоручује React Native Testing Library за компоненте и Detox за сценарије од краја до краја.

CodePush (App Center) — OTA ажурирања JS снопа без објављивања у App Store/Google Play. Користи се за: хитне поправке, A/B тестове, промене садржаја. Ограничења: не може мењати изворни код. Алтернативе: EAS Update (Expo), react-native-update. IT Sectr препоручује CodePush за хитне поправке и EAS Update за Expo пројекте.

Expo — оквир за React Native. Управљани ток рада — сва подешавања кроз app.json. Development builds — прилагођени изворни модули без eject-а. Expo SDK — уграђени модули: камера, биометрија, обавештења. EAS Build — облачна изградња. Expo Router — рутирање засновано на датотекама (слично Next.js-у). IT Sectr препоручује Expo за нове пројекте и bare RN за пројекте са дубоком изворном прилагођавањем.