React Native মোবাইল ডেভেলপমেন্টে: এটি কী, মূল ধারণা এবং কীভাবে কাজ করে

মৌলিক বিষয় (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — UI বর্ণনার জন্য JavaScript-এর সিনট্যাকটিক এক্সটেনশন। 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)।

// React Native-এ hooks সহ 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] রিটার্ন করে। setValue — প্রতিস্থাপন করে (Class-এ setState-এর মতো মার্জ করে না)। অবজেক্টের জন্য: 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 — একটি ফাংশন যা বিল্ট-ইন hooks ব্যবহার করে। নাম 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) renderItem-এর জন্য React.memo, 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 styles — কাজ করে কিন্তু সুপারিশ করা হয় না। StyleSheet.compose() — স্টাইল কম্বাইন করা। Platform.select — প্ল্যাটফর্ম-নির্দিষ্ট স্টাইল: Platform.OS === 'ios' ? styles.ios : styles.android। SafeAreaView — সেফ এরিয়া ইনসেট ব্যবস্থাপনা।

Styled Components এবং CSS-in-JS

Styled Components — React Native-এ CSS-in-JS-এর জন্য লাইব্রেরি। Restyle — থিমিং + রেস্পন্সিভ স্টাইল। NativeWind — React Native-এর জন্য Tailwind CSS। 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 — জটিল 2D গ্রাফিক্সের জন্য GPU রেন্ডারিং। IT Sectr Animated API-এর চেয়ে বেশি কার্যকরী সব অ্যানিমেশনের জন্য Reanimated 3 ব্যবহারের পরামর্শ দেয়।

নেটওয়ার্কিং (fetch, AsyncStorage, API)

fetch — বিল্ট-ইন HTTP ক্লায়েন্ট। GET, POST, headers, body সমর্থন করে। Axios — ইন্টারসেপ্টর সহ জনপ্রিয় লাইব্রেরি। AsyncStorage — কী-ভ্যালু স্টোরেজ (UserDefaults-এর অনুরূপ)। MMKV — WeChat-এর AsyncStorage-এর দ্রুত বিকল্প। react-native-keychain — নিরাপদ টোকেন স্টোরেজ। React Query (TanStack Query) — সার্ভার স্টেট ম্যানেজমেন্ট: ক্যাশিং, রিভ্যালিডেশন, পেজিনেশন। IT Sectr API অনুরোধের জন্য React Query এবং লোকাল স্টোরেজের জন্য 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 এবং নেটিভ কোডের মধ্যে ব্রিজ (Android-এর জন্য Java/Kotlin, iOS-এর জন্য ObjC/Swift)। JS থেকে নেটিভ API কল করার অনুমতি দেয়। 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 — RN-এর জন্য E2E টেস্ট (grey-box, নেটিভ)। IT Sectr কম্পোনেন্টের জন্য React Native Testing Library এবং এন্ড-টু-এন্ড দৃশ্যের জন্য Detox ব্যবহারের পরামর্শ দেয়।

CodePush (App Center) — App Store/Google Play-এ প্রকাশ না করেই JS বান্ডলের OTA আপডেট। ব্যবহার করা হয়: হট ফিক্স, A/B টেস্ট, কন্টেন্ট পরিবর্তন। সীমাবদ্ধতা: নেটিভ কোড পরিবর্তন করতে পারে না। বিকল্প: EAS Update (Expo), react-native-update। IT Sectr জরুরি ফিক্সের জন্য CodePush এবং Expo প্রকল্পের জন্য EAS Update ব্যবহারের পরামর্শ দেয়।

Expo — React Native-এর জন্য ফ্রেমওয়ার্ক। Managed workflow — সব কনফিগ app.json-এর মাধ্যমে। Development builds — eject ছাড়াই কাস্টম নেটিভ মডিউল। Expo SDK — বিল্ট-ইন মডিউল: ক্যামেরা, বায়োমেট্রিক্স, নোটিফিকেশন। EAS Build — ক্লাউড বিল্ড। Expo Router — ফাইল-ভিত্তিক রাউটিং (Next.js-এর অনুরূপ)। IT Sectr নতুন প্রকল্পের জন্য Expo এবং গভীর নেটিভ কাস্টমাইজেশন সহ প্রকল্পের জন্য bare RN ব্যবহারের পরামর্শ দেয়।