React Native: यह क्या है, Bridge कैसे काम करता है और JavaScript वातावरण

React Native क्या है

React Native Facebook टीम (अब Meta) द्वारा बनाया गया एक फ्रेमवर्क है जिसे 2015 में ओपन-सोर्स के रूप में जारी किया गया था। हाइब्रिड दृष्टिकोणों (Cordova, Ionic) के विपरीत, React Native WebView का उपयोग नहीं करता है। इसके बजाय, JavaScript कम्पोनेंट नेटिव UI तत्वों पर मैप होते हैं: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView।

React Native का पहला संस्करण केवल iOS का समर्थन करता था। Android समर्थन 2016 में आया। संस्करण 0.60 (2019) ने Autolinking — नेटिव निर्भरताओं का स्वचालित लिंकिंग — पेश किया। React Native 0.68 (2022) ने नया Fabric + TurboModules आर्किटेक्चर शामिल किया। वर्तमान स्थिर संस्करण 0.74 (2024) Flexbox लेआउट के लिए Yoga 3.0 समर्थन के साथ पूरी तरह से New Architecture में स्थानांतरित हो गया है।

Statista 2024 के अनुसार, React Native का उपयोग 38% क्रॉस-प्लेटफ़ॉर्म प्रोजेक्ट्स में किया जाता है। फ्रेमवर्क का उपयोग Discord, Instagram, Shopify, Pinterest, Skype और Uber Eats द्वारा किया जाता है। Meta Facebook और Instagram में React Native का उपयोग करता है — 2 बिलियन उपयोगकर्ताओं वाला मुख्य मोबाइल ऐप।

React Native का इतिहास और विकास

React Native की घोषणा जनवरी 2015 में React.js Conf में की गई थी। विचार React के घोषणात्मक प्रतिमान को वेब से मोबाइल प्लेटफार्मों पर लाना था। रिपॉजिटरी में पहला commit 2013 में iOS पर Facebook Groups ऐप बनाने के लिए एक आंतरिक Facebook प्रोजेक्ट के रूप में दिखाई दिया।

0.70 (2022) संस्करण ने Hermes को डिफ़ॉल्ट JavaScript इंजन के रूप में पेश किया। Hermes एक अग्रिम-समय (AOT) संकलित इंजन है जो मोबाइल उपकरणों के लिए अनुकूलित है। यह JavaScriptCore की तुलना में ऐप स्टार्टअप समय को 50% कम करता है और APK आकार को 30% घटाता है। Hermes ES6 और आंशिक रूप से ES2020 का समर्थन करता है।

React Native और React Web के बीच अंतर

React Web ReactDOM के माध्यम से कम्पोनेंट को DOM तत्वों (div, span, p) में रेंडर करता है। React Native प्लेटफ़ॉर्म के नेटिव कम्पोनेंट में रेंडर करता है। <div> के बजाय <View> का उपयोग करें, <span> के बजाय <Text> का। स्टाइल StyleSheet.create() के माध्यम से परिभाषित की जाती हैं, जो प्लेटफ़ॉर्म के CSS गुणों में अनुवादित होती हैं। Flexbox Yoga इंजन के माध्यम से डिफ़ॉल्ट रूप से सक्षम है।

React Native में नेविगेशन वेब से भिन्न है। react-router-dom के बजाय React Navigation का उपयोग किया जाता है — Stack, Tab और Drawer नेविगेटर के समर्थन वाली एक नेटिव लाइब्रेरी। React Navigation 6.x नेटिव एनिमेशन (useNativeDriver) और Deep Links एकीकरण का उपयोग करता है। iOS UINavigationController और Android Fragment के साथ नेटिव स्क्रीन नेविगेशन के लिए Wix की react-native-navigation लाइब्रेरी का उपयोग किया जाता है।

React Native आर्किटेक्चर

React Native आर्किटेक्चर परंपरागत रूप से Bridge के आसपास बनाया गया था — JavaScript वातावरण और नेटिव कोड के बीच एक अतुल्यकालिक JSON चैनल। संस्करण 0.68 से, Meta ने New Architecture पेश किया, जो Bridge को JSI (JavaScript Interface) और Fabric से बदल देता है। आइए दोनों मॉडलों पर नज़र डालें।

Bridge और Fabric

Bridge एक क्रमबद्ध JSON प्रोटोकॉल है जो कई थ्रेड्स पर चलता है: JS Thread (React कोड की व्याख्या), Main Thread (UI) और Native Modules Thread (API)। JS और नेटिव कोड के बीच प्रत्येक इंटरैक्शन ऑब्जेक्ट क्रमांकन और डीक्रमांकन से गुज़रता है, जो बार-बार कॉल करने पर देरी पैदा करता है। 1000 आइटम की सूची स्क्रॉल करते समय, Bridge प्रति सेकंड 10,000 JSON संदेश उत्पन्न करता है।

Fabric React Native में एक नई रेंडरिंग प्रणाली है। Bridge के बजाय, Fabric C++ शैडो ट्री (Shadow Tree) का उपयोग करता है जो JSI के माध्यम से UI थ्रेड के साथ सिंक्रोनाइज़ होता है। यह JSON क्रमांकन को समाप्त करता है: नेटिव C++ कोड सीधे JavaScript वातावरण में फ़ंक्शन कॉल करता है और इसके विपरीत। Fabric रेंडरिंग विलंबता को 16 ms (Bridge) से घटाकर 2–4 ms कर देता है।

TurboModules New Architecture का दूसरा भाग है। पुराने मॉडल में, सभी नेटिव मॉड्यूल ऐप स्टार्टअप पर लोड होते थे। TurboModules मॉड्यूल को आलसी रूप से (lazy loading) लोड करते हैं — केवल जब JS कोड पहली बार उनका अनुरोध करता है। यह 20+ नेटिव मॉड्यूल वाले ऐप्स में कोल्ड स्टार्ट समय को 40% तक कम करता है।

React Native ऐप का उदाहरण

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

नेटिव मॉड्यूल

नेटिव मॉड्यूल JavaScript से प्लेटफ़ॉर्म API कॉल करने के लिए एक तंत्र है। यदि कार्यक्षमता मानक React Native कम्पोनेंट (कैमरा, Bluetooth, बायोमेट्रिक्स) द्वारा कवर नहीं की जाती है, तो डेवलपर Swift/Kotlin में एक मॉड्यूल लिखता है और इसे RCTBridgeModule या TurboModule के माध्यम से पंजीकृत करता है। नेटिव फ़ंक्शन को JS से NativeModules.CameraModule.takePhoto() के माध्यम से कॉल किया जाता है।

React Native एक्सेलेरोमीटर (react-native-sensors), जियोलोकेशन (@react-native-community/geolocation), बायोमेट्रिक्स (react-native-biometrics) और स्थानीय सूचनाओं (@notifee/react-native) तक पहुंच के लिए तैयार नेटिव मॉड्यूल प्रदान करता है। कस्टम परिदृश्यों के लिए, Expo Expo Modules API प्रदान करता है — Xcode या Android Studio के बिना नेटिव मॉड्यूल बनाने के लिए एक सरल इंटरफ़ेस।

React Native के लाभ

विशाल समुदाय — React Native का क्रॉस-प्लेटफ़ॉर्म फ्रेमवर्क में सबसे बड़ा समुदाय है। GitHub पर प्रोजेक्ट के 117,000+ स्टार और 1800+ योगदानकर्ता हैं। npm साप्ताहिक रूप से react-native को 3 मिलियन+ बार डाउनलोड करता है। React Native प्रश्न मोबाइल डेवलपमेंट अनुभाग में Stack Overflow के सभी प्रश्नों का 5% हिस्सा हैं।

JavaScript इकोसिस्टम — React डेवलपर वेब पर समान टूल का उपयोग करते हैं: npm, Babel, ESLint, Prettier, Jest, TypeScript। व्यावसायिक तर्क को वेब संस्करण (React) और मोबाइल ऐप (React Native) के बीच पुनः उपयोग किया जा सकता है। Redux, Zustand, React Query और React Hook Form जैसी लाइब्रेरी बिना बदलाव के दोनों प्लेटफार्मों पर काम करती हैं।

Expo एक SDK और टूलसेट है जो React Native डेवलपमेंट को सरल बनाता है। Expo तैयार मॉड्यूल (कैमरा, सूचनाएं, मानचित्र, OAuth), क्लाउड बिल्ड (EAS Build) और OTA अपडेट (EAS Update) प्रदान करता है। Expo Go आपको Xcode या Android Studio के बिना भौतिक डिवाइस पर ऐप चलाने की अनुमति देता है। Expo 2024 डेटा के अनुसार, 70% नए React Native प्रोजेक्ट Expo का उपयोग करते हैं।

OTA अपडेट — Expo Update और CodePush (Microsoft) के माध्यम से उपलब्ध एक सुविधा। डेवलपर App Store या Google Play समीक्षा से गुज़रे बिना सीधे उपयोगकर्ताओं को JavaScript बंडल अपडेट भेज सकते हैं। यह महत्वपूर्ण बग फिक्स को 2–5 दिनों (समीक्षा प्रतीक्षा) से घटाकर 1–2 घंटे कर देता है।

TypeScript समर्थन React Native 0.71 से डिफ़ॉल्ट रूप से शामिल है। प्रोजेक्ट टेम्पलेट में tsconfig.json, सभी कम्पोनेंट के लिए प्रकार और सख्त मोड समर्थन शामिल है। Flow (Facebook द्वारा स्थैतिक टाइपिंग) भी समर्थित है, लेकिन Meta आधिकारिक तौर पर TypeScript की अनुशंसा करता है। State of React Native 2024 सर्वेक्षण के अनुसार, TypeScript टेम्पलेट 85% नए प्रोजेक्ट बनाता है।

इकोसिस्टम और लोकप्रिय लाइब्रेरी

npm React Native के लिए प्राथमिक पैकेज रजिस्ट्री है। लाइब्रेरी खोज को react-native कीवर्ड द्वारा फ़िल्टर किया जाता है। स्थापना के लिए npm install या yarn add का उपयोग किया जाता है। React Native CLI स्वचालित रूप से नेटिव निर्भरताओं को लिंक करता है (संस्करण 0.60 से)। Expo प्रोजेक्ट के लिए, स्थापना expo install के माध्यम से प्रबंधित की जाती है, जो संगत लाइब्रेरी संस्करण चुनता है।

मुख्य लाइब्रेरी

@react-navigation/native — React Native में नेविगेशन के लिए वास्तविक मानक। लाइब्रेरी में Stack Navigator (एनिमेटेड ट्रांज़िशन), Tab Navigator (iOS/Android के लिए निचला मेनू), Drawer Navigator (साइड मेनू) और Material Top Tab शामिल हैं। React Navigation 7.x (2024) ने स्थिर रूट कॉन्फ़िगरेशन और useSyncExternalStore के साथ पूर्ण React 18 समर्थन पेश किया।

react-native-reanimated — उच्च-प्रदर्शन एनिमेशन के लिए एक लाइब्रेरी। Reanimated 3.x JS थ्रेड को छोड़कर UI थ्रेड (worklet) में एनिमेशन चलाता है। यह 100+ तत्वों को एनिमेट करते समय भी 60 FPS की गारंटी देता है। useSharedValue, useAnimatedStyle और withSpring मानक लाइब्रेरी के Animated API को बदल देते हैं। Reanimated react-native-gesture-handler के माध्यम से टच जेस्चर को संभालता है।

@tanstack/react-query — सर्वर स्थिति प्रबंधन के लिए एक लाइब्रेरी। React Query API प्रतिक्रियाओं को कैश करता है, नेटवर्क बदलने पर स्वचालित रूप से डेटा पुनः प्राप्त करता है (refetchOnReconnect), और useInfiniteQuery के साथ पेजिनेशन का समर्थन करता है। संस्करण 5.x में UX के लिए आशावादी अपडेट शामिल हैं — सर्वर प्रतिक्रिया प्राप्त करने से पहले इंटरफ़ेस अपडेट होता है, फिर समायोजित होता है।