अपने रिएक्ट ऐप को फायरबेस से कैसे कनेक्ट करें

आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं।

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

फायरबेस के साथ, आप बैकएंड कोड की एक भी लाइन लिखे बिना फुल-स्टैक एप्लिकेशन विकसित कर सकते हैं। आज ही अपने React.js ऐप्लिकेशन को Firebase से कनेक्ट करना और चलते-फिरते बनाना सीखें।

फायरबेस पैकेज स्थापित करें

बाद अपना रिएक्ट ऐप बनाना, निर्देशिका को अपने प्रोजेक्ट के रूट फ़ोल्डर में बदलें और चलाकर Firebase पैकेज स्थापित करें:

NPM स्थापित करना firebase

अपने रिएक्ट ऐप को फायरबेस प्रोजेक्ट में जोड़ें

अगला कदम फायरबेस प्रोजेक्ट बनाना और इसे अपने रिएक्ट ऐप से जोड़ना है। पर जाएँ फायरबेस कंसोल:

1. क्लिक प्रोजेक्ट जोड़ें एक नया फायरबेस प्रोजेक्ट शुरू करने के लिए।
instagram viewer
2. प्रोजेक्ट का नाम दर्ज करें, फिर क्लिक करें जारी रखना.
3. क्लिक जारी रखना अगले पृष्ठ पर।
4. ड्रॉपडाउन से अपना फायरबेस खाता चुनें या क्लिक करें एक नया खाता बनाएं यदि आपके पास पहले से एक नहीं है।
5. अंत में क्लिक करें प्रोजेक्ट बनाएं.
6. क्लिक जारी रखना प्रक्रिया पूरी होने के बाद।
7. अगला, वेब आइकन पर क्लिक करें () वेब के लिए Firebase सेट अप करने के लिए अगले पेज के ऊपर-बाईं ओर।
8. प्रदान किए गए फ़ील्ड में अपने ऐप के लिए एक उपनाम दर्ज करें। तब दबायें रजिस्टर ऐप.
9. उत्पन्न कोड को कॉपी करें और इसे अगले चरण के लिए रखें (निम्न अनुभाग में चर्चा की गई)।
10. क्लिक कंसोल पर जारी रखें.
11. अगले पेज पर कई विकल्प हैं। नीचे स्क्रॉल करें और चुनें क्लाउड फायरस्टोर चूंकि आपको इस मामले में केवल एक डेटाबेस स्थापित करने की आवश्यकता है।
12. अगला, क्लिक करें डेटाबेस बनाएं।
13. क्लिक अगला. ड्रॉपडाउन से अपना पसंदीदा फायरस्टोर स्थान चुनें।
14. तब दबायें सक्षम फायरस्टार डेटाबेस बनाने के लिए।

अपने रिएक्ट ऐप में फायरबेस को इनिशियलाइज़ करें

अपने प्रोजेक्ट के अंदर एक नया फ़ोल्डर बनाएँ स्रोत निर्देशिका। आप इसे कॉल कर सकते हैं firebase_setup. अगला, एक बनाएँ firebase.js उस फोल्डर के अंदर फाइल करें। फिर इस फ़ाइल में पहले उत्पन्न कोड को पेस्ट करें।

अभी के लिए, आप कॉन्फ़िगरेशन ऑब्जेक्ट (firebaseConfig) को a के अंदर स्टोर कर सकते हैं .env फ़ाइल। लेकिन अधिक सुरक्षित उपयोग करने पर विचार करें रिएक्ट सीक्रेट्स को मास्क करने का तरीका उत्पादन में। डेटा जिसे आप ए में स्टोर करते हैं .env फ़ाइल आपके ऐप बिल्ड में आसानी से लीक हो सकती है।

उदाहरण के लिए, में अपने ऐप की Firebase गुप्त कुंजी डालने के लिए .env फ़ाइल:

REACT_APP_apiKey = yourFirebaseAccessKey

इस प्रकार, आप जेनरेट किए गए कोड को निम्नानुसार ठीक कर सकते हैं:

आयात {प्रारंभिक ऐप} से "फायरबेस/ऐप";
आयात {getFirestore} से "@firebase/firestore"
कॉन्स्ट फायरबेस कॉन्फिग = {
एपीआई कुंजी: प्रक्रिया.env.REACT_APP_apiKey,
authDomain: प्रक्रिया.env.REACT_APP_authDomain,
प्रोजेक्ट आईडी: प्रक्रिया.env.REACT_APP_प्रोजेक्टआईडी,
storageBucket: प्रक्रिया.env.REACT_APP_storageBucket,
मैसेजिंग सेंडर आई.डी: प्रक्रिया.env.REACT_APP_messagingSenderId,
appId: प्रक्रिया.env.REACT_APP_appId,
मापन आईडी: प्रक्रिया.env.REACT_APP_measurementId
};
कॉन्स्ट ऐप = इनिशियलाइज़एप (फायरबेस कॉन्फिग);
निर्यातकॉन्स्ट फायरस्टोर = getFirestore (ऐप)

अपने फायरबेस कनेक्शन का परीक्षण करें

आप Firestore को डमी डेटा सबमिट करके कनेक्शन की जांच कर सकते हैं। ए बनाकर शुरू करें संभालती है आपके प्रोजेक्ट के अंदर फ़ोल्डर स्रोत निर्देशिका। इस फाइल के अंदर एक सबमिट हैंडलर बनाएं। आप इसे कॉल कर सकते हैं हैंडलसबमिट.जेएस, उदाहरण के लिए:

आयात {एडडॉक, संग्रह} से "@firebase/firestore"
आयात {आग की दुकान} से "../firebase_setup/firebase"
कॉन्स्ट हैंडलसबमिट = (टेस्टडाटा) => {
कॉन्स्ट रेफरी = संग्रह (फायरस्टोर, "test_data") // फायरबेस इसे अपने आप बनाता है
होने देना डेटा = {
 टेस्टडेटा: टेस्टडेटा
 }
कोशिश {
 एडडॉक (रेफरी, डेटा)
 } पकड़ना(गलती) {
सांत्वना देना.लॉग (त्रुटि)
 }
}
निर्यातगलती करना हैंडल सबमिट करें

फिर अंदर ऐप.जेएस:

आयात './App.css';
आयात हैंडल सबमिट करें से './हैंडल्स/हैंडलसबमिट';
आयात {उपयोग संदर्भ} से 'प्रतिक्रिया';
समारोहअनुप्रयोग() {
कॉन्स्ट dataRef = useRef ()
कॉन्स्ट सबमिटहैंडलर = (ई) => {
इ।चूक को रोकें()
हैंडल सबमिट करें(डेटा संदर्भ।मौजूदा।कीमत)
 dataRef.current.value = ""
 }
वापस करना (
<डिव क्लासनाम ="अनुप्रयोग">
<फॉर्म ऑनसबमिट = {सबमिटहैंडलर}>
<इनपुट प्रकार = "मूलपाठ" रेफ = {डेटारेफ} />
<बटन प्रकार = "जमा करना">बचाना</button>
</form>
</div>
 );
}
निर्यातगलती करना अनुप्रयोग;

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

फायरबेस और रिएक्ट के साथ चलते-फिरते निर्माण करें

फायरबेस एक बहुमुखी बैकएंड-ए-ए-सर्विस समाधान है जो आपको अपने ऐप को प्रभावी ढंग से स्केल करने की अनुमति देता है। एक बार जब आप अपना रिएक्ट ऐप कनेक्ट कर लेते हैं, तो आप अपनी पसंद के अनुसार अपनी वेबसाइट बनाने के लिए इसकी कई विशेषताओं का लाभ उठा सकते हैं।

उदाहरण के लिए, फायरबेस ऑथेंटिकेशन टूलकिट उन विशेषताओं में से एक है जिसे आप एक्सप्लोर करना चाहते हैं।