JavaScript से ऐप्स बनाना सबसे अच्छा है। जब तक कि आप मोबाइल ऐप्स नहीं बना रहे। JavaScript वेब ऐप्स बनाने के लिए है, और इसका उपयोग नेटिव मोबाइल ऐप बनाने के लिए करना पहले संभव नहीं था। किसी भी वेब डेवलपर के लिए नेटिव मोबाइल ऐप्स बनाना कठिन था। उन्हें Java, या Objective-C सीखना पड़ता था... या कोई भी प्रोग्रामिंग लैंग्वेज जिसका उपयोग इस उद्देश्य के लिए किया जाता था।
यही वह समय था जब Facebook के React Native ने इस बाधा को तोड़ दिया। React Native क्रॉस-प्लेटफॉर्म ऐप्स बनाने जैसे शानदार फायदों के साथ आता है - Android और iOS दोनों के लिए। React Native से पहले, आपको अपना कोड दो बार लिखना पड़ता था - एक Android के लिए और एक iOS के लिए। अब ऐसा नहीं है।
यह लेख React Native की दुनिया का एक परिचय है, तो तैयार हो जाइए।
React Native क्यों?
सही है, तो React Native ही क्यों और कोई दूसरी टेक्नोलॉजी क्यों नहीं?
यह हमें कई ऐसे समाधान देता है जो अन्य टेक्नोलॉजीज़ नहीं दे सकतीं। React Native के साथ आप क्या कर सकते हैं:
नेटिव मोबाइल ऐप्स बनाना
React Native हमें iOS और Android दोनों के लिए JavaScript में नेटिव ऐप्स लिखने की अनुमति देता है। यह हमें जेस्चर्स, पुश नोटिफिकेशन्स, कैमरा और लोकेशन जैसे सभी नेटिव कंपोनेंट्स का उपयोग करने की क्षमता देता है। मोबाइल ऐप्स बनाने के लिए कुछ अन्य JavaScript लाइब्रेरीज़ हैं जैसे Ionic या PhoneGap। लेकिन वे लाइब्रेरीज़ WebView का उपयोग करती हैं, और उन टेक्नोलॉजीज़ से बने ऐप्स नेटिव नहीं होते।
क्रॉस-प्लेटफॉर्म मोबाइल ऐप्स बनाना (iOS और Android)
हाँ, React Native के साथ आप ऐसे मोबाइल ऐप्स बना सकते हैं जो iOS और Android दोनों पर चल सकें। यह React Native के महान लाभों में से एक है। Facebook द्वारा इसे बनाने से पहले, आपको अपना ऐप दो बार और अलग-अलग कोड के साथ बनाना पड़ता था: iOS के लिए Swift या Objective-C का उपयोग करके और Android के लिए Java या Kotlin का उपयोग करके। React Native ने इस समस्या को हल कर दिया ताकि आप अपना React Native ऐप बना सकें और यह iOS और Android दोनों पर काम करे। शानदार!
अपना सारा कोड JavaScript और React में लिखें
जब आप React Native ऐप्स बना रहे होते हैं, तो आप वास्तव में JavaScript लिख रहे होते हैं। ReactJS कोड हमें शानदार UI और यूज़र एक्सपीरियंस कंपोनेंट्स बनाने की अनुमति देता है।
React Native के साथ शुरुआत
React Native के साथ शुरुआत रोमांचक हो सकती है, लेकिन साथ ही थोड़ी भ्रमित करने वाली भी। पहला कदम इसे इंस्टॉल करना है, और इसे करने के कई तरीके हैं:
expo-cli का उपयोग करके:
expo-cli एक कमांड लाइन टूल है। यह आपके लिए React Native बॉयलरप्लेट डाउनलोड और इंस्टॉल करता है, जो एक्सपो API के साथ इंटीग्रेटेड होता है (इंस्टॉलेशन गाइड के लिए यहाँ देखें)। यदि आपने अभी React Native के साथ शुरुआत की है तो यह React Native ऐप बनाने का एक आसान तरीका है, और यह अनुशंसित तरीका है।
expo-cli आपको कई विकल्प देता है। आप बिना किसी कॉन्फ़िगरेशन के मोबाइल डिवाइस पर अपना ऐप्लिकेशन चला और टेस्ट कर सकते हैं। एक QR कोड स्कैन करें और आपका ऐप एक्सपो मोबाइल ऐप के साथ खुल जाएगा। आप एक वेब इंटरफेस जिसे appertize कहा जाता है, के माध्यम से ब्राउज़र पर React Native से बने अन्य मोबाइल ऐप्लिकेशन्स का पता लगा सकते हैं!
react-native-cli का उपयोग करके
react-native-cli, expo-cli की तरह ही काम करता है, लेकिन एक अलग दृष्टिकोण और अतिरिक्त फायदों के साथ। react-native-cli से इंस्टॉल किए गए ऐप्स हमें अपने ऐप में अपने खुद के नेटिव मॉड्यूल बनाने का विकल्प और क्षमता प्रदान करते हैं। नेटिव मॉड्यूल का उपयोग करने में सक्षम होने के लिए आपको अपने ऐप्लिकेशन को इजेक्ट करने की आवश्यकता नहीं है। इजेक्ट करने से आप नेटिव मॉड्यूल का उपयोग कर सकते हैं और अपने खुद के लिख सकते हैं (हम अगले भाग में नेटिव मॉड्यूल लिखने का तरीका देखेंगे)।
विभिन्न प्लेटफॉर्म्स पर React Native ऐप्स विकसित करना एक अलग प्रक्रिया है। कभी-कभी हमें किसी विशिष्ट प्लेटफॉर्म के लिए कुछ विशिष्ट कॉन्फ़िगरेशन की आवश्यकता होती है। उदाहरण के लिए, Android के लिए बिल्ड करने के लिए, आपको Android SDK का उपयोग करना होगा, तो आइए देखें कि यह कैसे काम करता है!
Android के लिए मोबाइल ऐप्स बनाना
Android के लिए विकास शुरू करने के लिए आपको कुछ आवश्यकताओं को इंस्टॉल करना होगा। सबसे पहले, आपको Android SDK और Android Studio दोनों को डाउनलोड और कॉन्फ़िगर करना होगा। आप उन्हें इस लिंक से डाउनलोड कर सकते हैं।
Android Studio डाउनलोड करने के बाद आपको कुछ APIs भी इंस्टॉल करने होंगे। ऐसा करने के लिए Android Studio खोलें, फिर सेटिंग्स टैब पर क्लिक करें, यह विंडो खुलेगी:
सबसे पहले, ✔️ उस प्लेटफॉर्म को चेक करें जिसे आप अपने react-native को सपोर्ट करना चाहते हैं, SDK Platforms टैब में (उदाहरण के लिए Android 6.0 Marshmallow)। फिर SDK Tools पर स्विच करें।
और Android SDK Build-Tools, Android SDK tools, और google play service को चेक करें। Android SDK Build-Tools के तहत सभी प्लेटफॉर्म्स को सेलेक्ट करें:
- 19.0.0 से 20.0.0 तक
- 22.0.0 से 24.0.0 तक
- और 25.0.2, 26.0.1 से 26.0.3 तक
- 27.0.3 और 28.0.1 से 28.02 तक
अब हम SDK और Android Studio के साथ काम कर चुके हैं। अगला कदम एमुलेटर है। एमुलेटर (या सिम्युलेटर) वह जगह है जहां हमें अपना ऐप चलाना और टेस्ट करना है। कई अलग-अलग विकल्प हैं।
आप Android Studio एमुलेटर्स का उपयोग कर सकते हैं। Android Studio पर उपयोग करने के लिए एमुलेटर बनाने का तरीका यहाँ देखें। ईमानदारी से कहूं तो मैंने कभी उनका उपयोग नहीं किया। मैं इसके बजाय Genymotion या एक असली डिवाइस पसंद करता हूँ।
Genymotion
Genymotion एक डेस्कटॉप ऐप्लिकेशन है जो आपके ऐप्लिकेशन को टेस्ट करने के लिए एक वर्चुअल एमुलेटर प्रदान करता है। मुझे इसका उपयोग करना बहुत पसंद है क्योंकि यह तेज़ है। यह आपको एक कस्टमाइज्ड फोन बनाने के विकल्प देता है जिसमें वे फीचर्स होते हैं जो किसी असली डिवाइस में मिलते हैं। उदाहरण के लिए WiFi, लोकेशन और कैमरा इनेबल करें। मैं Android Studio एमुलेटर्स या किसी अन्य एमुलेटर की तुलना में Genymotion का उपयोग करने की अत्यधिक अनुशंसा करता हूँ।
असली डिवाइसेज का उपयोग करना
अपना ऐप चलाने और टेस्ट करने के लिए असली डिवाइसेज का उपयोग करने से बेहतर कुछ नहीं है। ऐसा इसलिए क्योंकि यह आपको बताता है कि आपका ऐप्लिकेशन असली डिवाइस पर कैसा दिखता है। यह आपको अपने काम की वास्तविकता का एहसास कराता है जैसा कि वर्चुअल डिवाइस नहीं देता। इसलिए यदि आपके पास डिवाइस उपयोग करने की क्षमता है, तो संकोच न करें।
इस बिंदु तक, हम Android के साथ ठीक हैं - लेकिन iOS का क्या?
iOS के लिए React Native ऐप्स बनाना
iOS के लिए React Native चलाना Android से बहुत अलग नहीं दिखता। वही React Native ऐप जो Android पर चलता है, कुछ अपवादों के साथ iOS पर भी चल सकता है।
उदाहरण के लिए, यदि आप iOS डिवाइस पर चलाना चाहते हैं, तो आपके पास macOS होना चाहिए। macOS और iOS की बात करें तो, iOS पर React Native चलाने के लिए आपको Android के लिए SDK जैसे किसी अतिरिक्त डिपेंडेंसी को डाउनलोड करने की आवश्यकता नहीं है।
एमुलेटर्स के संबंध में, Xcode में अच्छे एमुलेटर्स हैं जिनका उपयोग आप अपने React Native ऐप को टेस्ट करने के लिए कर सकते हैं। आप इस पोस्ट को देख सकते हैं जो एमुलेटर्स के साथ उपयोग करने के लिए कुछ ट्रिक्स दिखाता है।
macOS में आप iOS और Android दोनों चला सकते हैं। आप निश्चित रूप से macOS पर Android Studio और Genymotion इंस्टॉल कर सकते हैं। यह संभावना PC पर मौजूद नहीं है जहां आप केवल Android एमुलेटर चला सकते हैं लेकिन iOS एमुलेटर नहीं। इसलिए आप भाग्यशाली हैं यदि आपके पास macOS है - आनंद लें।
तो अब हमारे पास React Native ऐप बनाने का वातावरण है और हमने सब कुछ इंस्टॉल कर लिया है, लेकिन React Native कोड कैसे लिखा जाता है? यह बहुत सरल है: आप वास्तव में ReactJS कोड लिखेंगे।
आधिकारिक गाइड देखें React Native के साथ प्रैक्टिस करने के लिए। मैं इस बेहतरीन लेख को शुरू करने के लिए सुझाता हूँ "React Native YouTube Replica।" यह आपको स्टेप-बाय-स्टेप गाइड करेगा अपना पहला React Native ऐप बनाने के लिए।
वाह! अब तक आप ठीक हैं और React Native के साथ कोडिंग कर रहे हैं। लेकिन आपको अपने कोड की त्रुटियों को चेक और डीबग करने और लॉग्स देखने की आवश्यकता है। हाँ लॉग्स!! तो हमें एक डीबगर चाहिए! React Native के साथ डीबग कैसे करते हैं?
React Native डीबग करना
अपने कोड को डीबग करना बहुत महत्वपूर्ण है, न केवल React Native के साथ बल्कि किसी भी अन्य प्रोग्रामिंग लैंग्वेज के साथ। इसलिए अपने React Native कोड में, आपको यह जानने की आवश्यकता है कि क्या हो रहा है। React Native ऐप को डीबग करने के कई अलग-अलग तरीके हैं जैसे:
Chrome DevTools से डीबग करें
React Native आपको अपने ऐप के लॉग्स देखने के लिए Chrome DevTools का उपयोग करने का विकल्प देता है। अपने एमुलेटर में डीबगिंग मोड इनेबल करने और Chrome से डीबग करने के लिए, कीबोर्ड पर बस Ctrl+ m दबाएं।
यह स्क्रीन पॉप-अप होगी:
और फिर Debug Js Remotely चुनें। यह Google Chrome में इस एड्रेस https://localhost:8081/debugger-ui/ के साथ एक टैब खोलेगा। यह Chrome DevTools के उपयोग के लिए है, अन्य विकल्पों का क्या?
React-native-debugger का उपयोग करना
React-native-debugger React Native कोड को डीबग करने के लिए एक बेहतरीन टूल है। यह एक डेस्कटॉप ऐप्लिकेशन है जो आपको कई फायदे देता है। यह Redux DevTools और React-DevTools इंटीग्रेशन के साथ आता है। आप स्टाइल को भी डीबग कर सकते हैं। यह वास्तव में React Native के लिए सबसे अच्छा डीबगर है और यही वह है जिसका मैं उपयोग करता हूँ। आमतौर पर यह macOS, Windows और Linux पर उपलब्ध है। इंस्टॉलेशन और इंटीग्रेशन गाइड देखें।
मुझे लगता है कि इस बिंदु पर यह पर्याप्त है। यह React Native के साथ मोबाइल ऐप्स बनाने के लिए एब्सोल्यूट गाइड का पहला भाग है। अगले भाग में हम अधिक तकनीकी टिप्स और मुद्दों में गोता लगाने जा रहे हैं जैसे कि हम नेटिव कंपोनेंट्स का उपयोग कैसे कर सकते हैं, React Native API, अन्य लाइब्रेरीज़ के साथ इंटीग्रेशन, Redux, GraphQL और ऐसी चीज़ें। इसलिए अगला भाग आने पर अपडेट रहने के लिए इस मेल-लिस्ट को सब्सक्राइब करें। आपके समय के लिए धन्यवाद।
आप मुझे हमेशा Twitter पर पा सकते हैं।
