Jump start React Native with Expo

Sep 14, 2025
कैसे करना है
An image showing a React Native app running on a smartphone.

मूल निवासी एक ऐसा मंच है जो आपको जावास्क्रिप्ट का उपयोग करके मूल मोबाइल ऐप्स बनाने में सक्षम बनाता है। जैसा कि नाम का तात्पर्य है, यह उपयोग करता है प्रतिक्रिया , इसलिए मोबाइल इंटरफेस रचना वेब पर प्रतिक्रिया का उपयोग करने के समान है। HTML टैग का उपयोग करके घटकों को बनाने के बजाय, इसमें अपने स्वयं के घटकों का सेट है जो मूल यूआई घटकों से जुड़ते हैं।

प्रतिक्रिया देशी स्थापित करने के लिए मुश्किल हो सकती है, खासकर जब अधिसूचनाओं को धक्का देने की बात आती है। आपको एंड्रॉइड के लिए आईओएस और जावा के लिए ऑब्जेक्टिव-सी में प्रमाण पत्र स्थापित करने और गोता लगाने की आवश्यकता है। हालाँकि, [2 9] प्रदर्शनी

इसकी आवश्यकता को समाप्त करता है।

एक ऐप के बजाय एक वेबसाइट बनाना? आप एक सभ्य का उपयोग कर सकते हैं वेबसाइट निर्माता । और साइट को बनाए रखने के लिए, अपना प्राप्त करें वेब होस्टिंग सटीक।

  • अपने वर्कफ़्लो को गति देने के लिए 30 वेब डिज़ाइन टूल्स

एक्सपो का मतलब है कि आप प्रतिक्रिया देशी ऐप्स बना सकते हैं और उन्हें केवल जेएस का उपयोग करके ऐप स्टोर में तैनात कर सकते हैं। इसके अतिरिक्त, यह मूल कार्यक्षमता जैसे सूचना, कैमरा, संपर्क, स्थान आदि तक पहुंच के साथ एक एसडीके प्रदान करता है। यह कुछ यूआई घटकों तक पहुंच प्रदान करता है जो प्रतिक्रिया मूल मूल में शामिल नहीं होते हैं, लेकिन अक्सर उपयोग किए जाते हैं, जैसे कि आइकन, धुंधला दृश्य और इतने पर देशी कोड की एक पंक्ति लिखने की आवश्यकता के बिना।

एक्सपो एक्सकोड या एंड्रॉइड स्टूडियो का उपयोग करने की आवश्यकता के बिना सबमिशन-तैयार ऐप बिल्ड भी बना सकता है। यदि आपने पहले भी उपयोग नहीं किया है, तो वे एक डरावनी जगह हो सकते हैं, खासकर यदि आप केवल प्रतिक्रिया के साथ शुरू कर रहे हैं - या सामान्य रूप से आत्मविश्वास से नहीं हैं एक ऐप कैसे बनाएं । ऐप्स (या प्रोजेक्ट्स) को ऐप स्टोर को सबमिट करने के बजाय एक्सपो में भी प्रकाशित किया जा सकता है, जो उपयोगकर्ताओं को एक्सपो मोबाइल क्लाइंट के माध्यम से प्रोजेक्ट की कोशिश करने देता है। चिंता मत करो, यह बाद में कवर किया जाएगा!

क्या आप एक टीम के साथ अपना ऐप बना रहे हैं? अपनी फ़ाइलों को सुलभ, विश्वसनीय में सहेजें घन संग्रहण ।

01. एक्सपो सेट अप करें [5 9]

एक्सपो स्थापित करना एक सीधी प्रक्रिया है। करने के लिए सिर [2 9] साइट

और नवीनतम एक्सडीई डाउनलोड करें, फिर अपने फोन या टैबलेट पर मोबाइल ऐप इंस्टॉल करें। मोबाइल क्लाइंट किसी भी डेवलपर लाइसेंस या सर्टिफिकेट सेटअप अपफ्रंट की आवश्यकता के बिना अपने ऐप के माध्यम से एक असली डिवाइस पर ऐप्स चलाने को सक्षम बनाता है।

फिर आप एक्सपो सेवा में ऐप्स प्रकाशित कर सकते हैं ताकि उपयोगकर्ता ऐप स्टोर और Google Play समीक्षा प्रक्रियाओं के माध्यम से जाने की आवश्यकता के बिना एक्सपो मोबाइल क्लाइंट के माध्यम से अपनी तैयार परियोजनाएं चला सकें।

एक्सपो बिल्डिंग स्टैंड-अलोन ऐप्स का समर्थन करता है जो मैन्युअल रूप से ऐप स्टोर या प्ले स्टोर में प्रकाशित हो सकते हैं, हालांकि आपको उन प्लेटफॉर्म के लिए डेवलपर खातों की आवश्यकता होगी। ऐप्पल डेवलपर कार्यक्रम प्रति वर्ष £ 79 की लागत और [6 9] Google का प्ले कंसोल

$ 25 अमरीकी डालर का एक बार शुल्क खर्च करता है।

02. अपना पहला ऐप बनाएं [5 9]

[7 9] An image showing the Expo XDE.

यह एक्सडीई हमें परियोजना के लिए विस्तृत जानकारी देता है। बाएं विंडो प्रतिक्रिया देशी पैकेजर है और दायां विंडो डिवाइस से किसी भी लॉग को दिखाती है

आइए व्यापार में जाएं और एक्सपो के साथ अपना पहला ऐप बनाएं। एक्सपो एक्सडीई खोलें, प्रोजेक्ट और जीटी का चयन करें; नई परियोजना और रिक्त टेम्पलेट का चयन करें। सभी निर्भरताओं को स्थापित करें और प्रतिक्रिया देशी पैकेजर शुरू करें, जो सभी संपत्तियों को बंडल करता है।

यहां से, आप ऐप प्रकाशित कर सकते हैं, ऐप को एक्सपो मोबाइल क्लाइंट में साझा कर सकते हैं या सिम्युलेटर पर ऐप चला सकते हैं। इस ऐप में पुश नोटिफिकेशन बनाने में शामिल होने वाला है, इसलिए आप एक्सपो मोबाइल क्लाइंट को साझा करने जा रहे हैं, क्योंकि सिमुलेटर उनका समर्थन नहीं करते हैं। एसएमएस या ईमेल के माध्यम से एक लिंक भेजने के लिए एक क्यूआर कोड प्राप्त करने के लिए शेयर बटन पर क्लिक करें। एक्सपो क्लाइंट के साथ क्यूआर कोड स्कैन करें। यह ऐप को एक्सपो क्लाइंट के माध्यम से चलाता है और यह एक स्क्रीन पर खुलता है: 'अपने ऐप पर काम करना शुरू करने के लिए app.js खोलें!'

ऐप चल रहा है, अपने पसंदीदा कोड संपादक में प्रोजेक्ट खोलें और app.js खोलें। ऊपर दिए गए पाठ को ढूंढें और इसे क्लासिक 'हैलो वर्ल्ड' में बदलें, फिर सहेजें। आपको ऐप को स्वचालित रूप से पुनः लोड करना चाहिए और टेक्स्ट 'हैलो वर्ल्ड!' अब दिखाई दे रहा है। जादू!

जब आप विकास कर रहे हों, तो डिवाइस को हिलाकर एक डेवलपर मेनू प्रकट करेगा, जिसमें डिबगिंग के लिए सहायक विकल्प हैं। इस मेनू से आप एक्सपो होम पर भी वापस आ सकते हैं - ऐप से बाहर निकलने या दूसरे पर स्विच करने में सहायक।

03. अधिसूचनाएं जोड़ें [5 9]

अब आपके पास एक मूल ऐप सेट अप और चल रहा है, आइए नोटिफिकेशन भेजने और प्राप्त करने की क्षमता जोड़ें। इसे आम तौर पर ऑब्जेक्टिव-सी और जावा की आवश्यकता होगी, अधिसूचनाएं भेजने के लिए किसी तृतीय पक्ष सेवा को एकीकृत करना और आपको आईओएस के लिए प्रमाणपत्र स्थापित करने और एंड्रॉइड के लिए कुंजी बनाने की भी आवश्यकता होगी।

सबसे पहले, आपको एक्सपो से अनुमतियां और अधिसूचनाएं आयात करने और ऐप क्लास में एक नया फ़ंक्शन बनाने की आवश्यकता है: 

 'एक्सपो' से आयात {अनुमतियां, अधिसूचनाएं};
निर्यात डिफ़ॉल्ट वर्ग ऐप react.com पर निर्भर करता है {
  async रजिस्टरफोरपशनोटिफिकेशन () {
  }
}

यहां आप ES2017 ASYNC / AWAIT सुविधा का उपयोग करने के लिए ASYNC कीवर्ड का उपयोग करते हैं - प्रतिक्रिया मूल के पास बाबेल हुड के नीचे काम कर रहा है ताकि आप सभी नई जावास्क्रिप्ट भलाई का लाभ उठा सकें। अब, आइए अधिसूचना अनुमतियों के लिए पूछें और एक्सपो पुश टोकन को पुनर्प्राप्त करें - डिवाइस की पहचान करने के लिए - ताकि एक्सपो जानता है कि पुश नोटिफिकेशन कहां भेजना है: 

 Async रजिस्टरफोरपशनोटिफिकेशन () {
  const परिणाम = await afiets.askasync (अनुमतियां। remote_notifications);
  यदि (परिणाम.स्टैटस! == 'दी गई') {
    वापसी;
  }
  कॉन्स टोकन = प्रतीक्षा अधिसूचना.getexpopushtokenasync ();
  Console.log (टोकन);
}

यहां, आप अनुमतियों का उपयोग करके अधिसूचना अनुमति मांगेंगे। Saskasync () विधि। अलर्ट केवल आईओएस पर दिखाएगा क्योंकि एंड्रॉइड डिफ़ॉल्ट रूप से अधिसूचनाओं को सक्षम बनाता है। इसके बावजूद, आपको वास्तव में एंड्रॉइड पर एक ही तर्क के माध्यम से चलाने की आवश्यकता है, क्योंकि अधिसूचनाओं को बंद करना संभव है।

इसके बाद, प्रतिक्रिया की जांच करें। यदि सूचनाएं प्रदान नहीं की जाती हैं तो आप रोक सकते हैं और फ़ंक्शन से बाहर लौट सकते हैं। यदि अधिसूचनाएं दी जाती हैं, तो आपको एक्सपो सेवा से पुश टोकन मिलती है। अंत में, आप नोटिफिकेशन का परीक्षण करने के लिए बाद में उपयोग के लिए टोकन को लॉग आउट कर सकते हैं और यह एक्सपो एक्सडीई में लॉग इन हो जाएगा।

इस बिंदु पर यह ध्यान देने योग्य है कि - आईओएस पर - यह चेतावनी केवल डिजाइन द्वारा एक बार ट्रिगर की जा सकती है; इसलिए, यदि कोई उपयोगकर्ता अनुमति से इनकार करता है, तो आप फ़ंक्शन से बाहर लौटने से पहले एक कस्टम नोटिस या अलर्ट जोड़ने पर विचार करना चाह सकते हैं। इस बिंदु पर अधिसूचनाओं को सक्षम करने के लिए, उपयोगकर्ता को ऐप सेटिंग्स पर जाने की आवश्यकता होगी (हमारे मामले में, यह एक्सपो होगा) और जीटी; अधिसूचनाएं और उन्हें वहां से सक्षम करें। इस वजह से, आपको एक्सपो मोबाइल क्लाइंट को हटाना होगा और फिर पुनर्स्थापित करना होगा यदि आप आईओएस पर एक से अधिक बार अनुमति चेतावनी का परीक्षण करना चाहते हैं।

इसके अतिरिक्त, एक्सपो अनुमतियां .GETASync () नामक एक विधि प्रदान करता है और यह अनुमतियों के समान तरीके से काम करता है। Saskasync (), बस आईओएस अलर्ट को फायर करने के बिना। यह उपयोगी हो सकता है यदि आप एक कस्टम प्रवाह बनाने के लिए पहले स्थिति की जांच करना चाहते हैं जो आपको अनुमतियों के लिए पूछेगा, उदाहरण के लिए। यदि आईओएस अलर्ट को पहले ट्रिगर किया गया है (याद रखें, इसे प्रति ऐप इंस्टॉल के बाद ही निकाल दिया जा सकता है), अनुमति। Saskasync () एक ही जानकारी को अनुमतियों के रूप में वापस कर देगा .getasync (), इसलिए हमारे उपयोग के मामले में हमें आवश्यकता नहीं है अनुमतियों का उपयोग करने के लिए .getasync ()।

फिर आपको इस फ़ंक्शन को componentdidmount लाइफसाइक्ल विधि में कॉल करने की आवश्यकता है ताकि यह ऐप लॉन्च पर चल सके: 

 componentdidmount () {
  this.registerforpushnotifications ();
}

इसके बाद, यदि आप अधिसूचना अनुमति स्वीकार करते हैं, तो आपका ऐप स्थानीय और दूरस्थ अधिसूचनाएं प्राप्त करने में सक्षम होंगे। स्थानीय नोटिफिकेशन तब सेट अप और डिवाइस के माध्यम से सीधे ऐप पर भेजे जाते हैं और इंटरनेट कनेक्शन की आवश्यकता नहीं होती है। रिमोट अधिसूचनाएं एक सर्वर से आती हैं और ऐप्पल पुश अधिसूचना प्रणाली (एपीएनएस) या Google क्लाउड मैसेजिंग (जीसीएम) सेवाओं के माध्यम से अधिसूचना भेजती हैं। इस प्रक्रिया को उन्हें प्राप्त करने के लिए इंटरनेट कनेक्शन तक पहुंच की भी आवश्यकता होगी।

एक्सपो में https://exp.host/--/api/v2/push/send पर सूचनाएं भेजने की एक सेवा है; आपको बस इतना करना है कि इसमें कुछ डेटा भेजें। यह तब निम्नलिखित की तरह थोड़ा सा दिखाई देगा: 

 {
  // पुश टोकन।
  "टू": & lt; ऐप से टोकन & gt;
  // अधिसूचना शीर्षक।
  "शीर्षक": "अधिसूचना शीर्षक",
  // अधिसूचना शरीर।
  "बॉडी": "अधिसूचना शरीर",
  // किसी वस्तु के रूप में डेटा में पास, इसका उपयोग अधिसूचना को संभालने के दौरान किया जा सकता है।
  "डेटा": {"मूल्य": "हैलो वर्ल्ड!" }
}

A newly created React Native app showing a message with the words 'Hello world!'

एक्सपो टूलकिट पुश नोटिफिकेशन को आसानी से भेजने और प्राप्त करता है

एक अधिसूचना का परीक्षण करने से पहले, यदि ऐप खुला है तो हम अपने ऐप को अधिसूचनाओं को संभालने के लिए कॉन्फ़िगर करेंगे। डिज़ाइन, आईओएस और एंड्रॉइड द्वारा एक ऐप खुला होने पर अधिसूचना नहीं दिखाता है। यदि आप इस पर कार्य करने की आवश्यकता है, तो आप यहां पुश संदेश में भेजे गए किसी भी डेटा को भी संभाल सकते हैं। आइए इसे संभालने के लिए एक नया फ़ंक्शन बनाएं और डेटा वैल्यू प्रॉपर्टी को सतर्क करें: 

 हैंडलनोटिफिकेशन (अधिसूचना) {
  चेतावनी (अधिसूचना.डेटा। Value);
}

फिर हमारे componentdidmount लाइफसाइक्ल विधि में आपको एक श्रोता स्थापित करने की आवश्यकता है, जो नोटिफिकेशन हैंडलर को कॉल करता है जिसे हमने अभी बनाया है: 

 componentdidmount () {
  this.registerforpushnotifications ();
  अधिसूचना.एडलिस्टनर (यह। हैंडलेनोटिफिकेशन);
}

अब आप सेट हैं। आइए एक कर्ल अनुरोध के साथ पुश अधिसूचना भेजें: 

 कर्ल \
  -X पोस्ट \
  -एच "सामग्री-प्रकार: एप्लिकेशन / JSON" \
  -d '{
    "To": "& lt; टोकन & gt;",
    "शीर्षक": "अधिसूचना शीर्षक",
    "बॉडी": "अधिसूचना शरीर",
    "डेटा": {"मूल्य": "हैलो वर्ल्ड!" }
  } '\
  https://exp.host/--/api/v2/push/send

आप इस कर्ल कमांड को पकड़ सकते हैं यहां । यदि आप कर्ल से परिचित नहीं हैं, तो आप किसी चीज़ का उपयोग करके अनुरोध भेज सकते हैं डाकिया , जो अनुरोध भेजने के लिए जीयूआई का उपयोग करता है।

एक बार अनुरोध भेजने के बाद, आपको अब अधिसूचना देखेंगे। एक्सपो पुश सेवा का उपयोग करने पर कोई सीमा नहीं है। एक वास्तविक दुनिया के परिदृश्य में, इसे 100 के बैचों में पुश अधिसूचनाओं की एक श्रृंखला भेजकर बैच एपीआई का उपयोग करने के लिए प्रोत्साहित किया जाता है, ताकि दक्षता के लिए भेजा जा सके: 

 [
  {// अधिसूचना वस्तु ऊपर के रूप में},
  {// एक और अधिसूचना वस्तु}
]

04. एक्सपो के साथ प्रकाशित करें [5 9]

[17 9]

डिवाइस पर एक ऐप चलाना एक नो-फ्यूज अनुभव है। एक्सपो ऐप के साथ बस एक क्यूआर कोड स्कैन करें और यह तुरंत लोड हो गया है

तो, अब जब हमारे पास एक चमकदार नई प्रतिक्रिया देशी ऐप है (भले ही यह अभी तक ज्यादा नहीं है!), हम इसे एक्सपो एक्सडीई से चलाने के बिना इसका उपयोग कैसे करते हैं? सबसे सरल तरीका एक्सडीई से प्रकाशित होने पर क्लिक करके है। यह प्रोजेक्ट को एक्सपो में प्रकाशित करेगा और एक लिंक आपकी प्रोफ़ाइल पर दिखाई देगा, जिसे आप https://expo.io/@<username> पर पा सकते हैं;

जब आप प्रकाशित प्रोजेक्ट लिंक पर जा रहे हैं, तो विकास के दौरान, एक्सपो मोबाइल क्लाइंट के साथ स्कैन करने के लिए एक क्यूआर कोड (एक्सडीई के समान विकल्पों में से एक) होगा। अगर हम ऐप को अपडेट करना चाहते हैं, तो हमें बस इतना करना होगा कि ऐप को फिर से चलाने पर उपयोगकर्ता के लिए परिवर्तन उपलब्ध होंगे।

[1 9 4] यह आलेख मूल रूप से नेट 2 9 7 में प्रकाशित किया गया था, वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे अच्छी बिकने वाली पत्रिका। [1 9 5] [1 9 6] [1 9 4] यहां नेट की सदस्यता लें [1 9 5]

[1 9 4] । [1 9 5]

आप और अधिक तरीकों से सीखना चाहते हैं कि आप प्रतिक्रिया कर सकते हैं? [5 9]

Kristijan Ristovski is giving his workshop Learn How to Think in React at Generate London from 19-21 September 2018.

Kristijan Ristovski अपनी कार्यशाला दे रही है कि 1 9 -21 सितंबर 2018 से लंदन को उत्पन्न करने पर प्रतिक्रिया में कैसे सोचें

[1 9 4] यदि आप प्रतिक्रिया के बारे में अधिक जानने में रुचि रखते हैं, तो सुनिश्चित करें कि आपने अपना टिकट उठाया है [1 9 5] [1 9 4] 19-21 सितंबर 2018 से लंदन उत्पन्न करें [1 9 5] [1 9 4] । दुनिया भर में प्रतिक्रिया करने और लॉन्च करने के लिए रिएक्ट अकादमी की स्थापना की [1 9 5] [1 9 4] sizzy.co [1 9 5] [1 9 4] तथा [1 9 5] [23 9] [1 9 4] OK-GOOGL.IO [1 9 5]

[1 9 4] , Kristijan Ristovski अपनी कार्यशाला प्रदान करेगा - प्रतिक्रिया में कैसे सोचें सीखें - जिसमें वह रीएक्ट सर्वोत्तम प्रथाओं का पता लगाएगा और आपको वास्तविक समस्याओं के समाधान सिखाएगा जो आपको ऐप बनाने की प्रक्रिया में सामना कर सकते हैं। [1 9 5]

[1 9 4] 1 9 -21 सितंबर 2018 से लंदन उत्पन्न होता है। [1 9 5] [1 9 4] अब अपना टिकट प्राप्त करें [1 9 5] [1 9 4] । [1 9 5]

संबंधित आलेख:

  • इन पांच कारकों के साथ अपने सिर को प्रतिक्रिया दें
  • 10 विशेषज्ञ ReactJS युक्तियाँ जिन्हें आपको आज जानने की आवश्यकता है
  • मूल प्रतिक्रिया के साथ एक मूल मोबाइल ऐप बनाएं

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Mo.js पुस्तकालय के साथ एनिमेट कैसे करें

कैसे करना है Sep 14, 2025

(छवि क्रेडिट: पेक्सल्स / फ्रैंक कगुंबा) [1 9] Mo.js �..

Build a blog with Grid and flexbox

कैसे करना है Sep 14, 2025

पिछले दो से तीन साल ने लेआउट को छलांग और सीमाओं मे�..

एफ़िनिटी डिजाइनर: ग्रिड का उपयोग कैसे करें

कैसे करना है Sep 14, 2025

एफ़िनिटी डिजाइनर मैक और विंडोज के लिए उपलब्ध वेक�..

Level up your VR art

कैसे करना है Sep 14, 2025

मैंने एक साल पहले अपने वीआर हेडसेट प्राप्त करने क..

Turn photos into 3D animations with Photoshop

कैसे करना है Sep 14, 2025

हम सभी के पास तस्वीरों के रूप में ली गई यादों की एक..

ब्रांडिंग पेशेवरों को साझा करें कि वे कैसे ब्रांड आवाज की आवाज

कैसे करना है Sep 14, 2025

जब आप चीजों के डिजाइन पक्ष पर ध्यान केंद्रित कर र�..

Document your design systems with Fractal

कैसे करना है Sep 14, 2025

क्या आप डिजाइन सिस्टम के बारे में अधिक सीखने की ..

Get creative with portraits and Face-Aware Liquify

कैसे करना है Sep 14, 2025

हमने सभी को फ़ोटोशॉप में तरल उपकरण के साथ एक नाटक �..

श्रेणियाँ