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 की अनुशंसा करता है।