Back to Question Center
0

प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावे            प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करासंबंधित विषय: रॉ JavaScriptjQueryReactAPIsTools & मिमल

1 answers:
प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावे

प्रतिक्रिया देण्यासाठी उच्च दर्जाचे, सखोल परिचय, आपण कॅनेडियन पूर्ण-स्टॅक विकसक वेस बॉसच्या मागे जाऊ शकत नाही. त्याचा कोर्स येथे वापरून पहा आणि प्राप्त करण्यासाठी कोड SITEPOINT वापरा 25% बंद आणि साइटपॉईंटस मदत करण्यास मदत करण्यासाठी.

मिमलॅट म्हणजे युजर इंटरफेसेस तयार करण्यासाठी एक अप्रतिम JavaScript लायब्ररी. मिशिगन अॅप्स बनवायला सुरुवात केल्यापासून, एक बेल्ब्रोन मिल्मल अॅप्लिकेशन्स स्कॅल्फोल्ड करणे खूप सोपे झाले आहे.

या लेखातील, आम्ही Semalt चा समान कार्य करणार्या अॅप तयार करण्यासाठी रीएक्ट ऐप तयार करण्यासह फायरबेज वापरणार आहोत. हे वापरकर्त्यास नंतर नवीन मत सबमिट करण्याची परवानगी देईल जे नंतर त्यावर मत दिले जाऊ शकते - fotos do oculos da oakley.

आम्ही काय बांधणार आहोत याचे थेट डेमो लावा.

प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावेप्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करासंबंधित विषय:
रॉ JavaScriptjQueryReactAPIsTools आणि Semalt

का फायरबसे? (2 9)

फायरबेज वापरणे वापरकर्त्यासाठी वास्तविक-वेळ डेटा दर्शवणे अतिशय सोपे करेल. एका वापरकर्त्याने एका दुव्यावर मतदान केल्यानंतर, अभिप्राय तत्काळ असेल फायरबझचे रिअलटाइम डेटाबेस आपल्याला हे वैशिष्ट्य विकसित करण्यात मदत करेल. तसेच, हे आम्हाला Firebase सह अभिक्रियाचा अनुप्रयोग बूटस्ट्रॅप कसा करावा हे समजून घेण्यास मदत करेल.

उत्तर का? (2 9)

खासकरून घटक घटकाचा वापर करून वापरकर्ता इंटरफेस तयार करण्यासाठी ज्ञात आहे. प्रत्येक घटक अंतर्गत स्थिती असू शकतात किंवा प्रॉप्स म्हणून डेटा पार केला जाऊ शकतो. सममूल्यमध्ये राज्य आणि प्रॉपर्टी दोन महत्वाच्या संकल्पना आहेत या दोन्ही गोष्टी कोणत्याही वेळी आमच्या अनुप्रयोगाची स्थिती निश्चित करण्यात आमची मदत करतात. आपण या अटींशी परिचित नसल्यास, कृपया प्रथम मिमल डॉक्सकडे लक्ष द्या.

नोट: आपण मिडल किंवा मोक्स सारख्या राज्य कंटेनरचा वापर देखील करू शकता, परंतु साधेपणासाठी आम्ही या ट्यूटोरियलसाठी एक वापरणार नाही.

संपूर्ण प्रकल्प GitHub वर उपलब्ध आहे.

शिफारस अभ्यासक्रम

प्रकल्पाची स्थापना (2 9)

आमच्या प्रकल्प संरचना आणि कोणत्याही आवश्यक अवलंबन सेट करण्यासाठी चरणांमधून क्षितीज चाला.

तयार-प्रतिक्रिया-अॅप स्थापित करीत आहे

आपल्याकडे आधीपासून नसल्यास, आपण स्थापित करणे आवश्यक आहे तयार-प्रतिक्रिया-अॅप . असे करण्यासाठी, आपण आपल्या टर्मिनलमध्ये खालील टाइप करू शकता:

     एनपीएम प्रतिष्ठापीत-जी तयार-प्रतिक्रिया-अॅप    

एकदा आपण जागतिक स्तरावर हे स्थापित केल्यानंतर, आपण ते कोणत्याही फोल्डरमध्ये मिल्टल प्रोजेक्ट मध्यावर टाकण्यासाठी वापरू शकता.

आता, एक नवीन अॅप्लीकेशन तयार करा आणि त्याला कॉल करा reddit-clone .

     तयार-प्रतिक्रिया-अॅप reddit-clone    

यामुळे reddit-clone फोल्डरमध्ये एक नवीन तयार-प्रतिक्रिया-अॅप प्रोजेक्ट तयार होईल. एकदा बूटस्ट्रॅप केलं की, आम्ही reddit-clone निर्देशिकेत जाऊ आणि डेव्हलपमेंट सर्व्हरला आग लावू:

     दुपारी सुरू    

या टप्प्यावर, आपण http: // localhost: 3000 / वर जाऊन आपले अॅप सापळा अप आणि चालू पाहू शकता.

अॅपला बांधणी

देखभालीसाठी, मला कंटेनर आणि घटक विभक्त करणे आवडते. कंटेनर्स हे स्मार्ट घटक आहेत ज्यात आमच्या अनुप्रयोगाचे व्यवसाय तर्क समाविष्ट आहे आणि अजाक्स विनंती व्यवस्थापित करा. घटक फक्त गूळ प्रेझेंटेशन घटक आहेत. त्यांचे स्वतःचे अंतर्गत राज्य असू शकते, ज्याचा वापर त्या घटकांच्या तार्कक (उदा एखादा नियंत्रित इनपुट घटकाच्या वर्तमान स्थिती दर्शविणारा) नियंत्रित करण्यासाठी केला जाऊ शकतो.

अनावश्यक लोगो आणि CSS फाईल्स काढून टाकल्यानंतर, आता आपल्या अॅप्सने हे पहावे. आम्ही घटक फोल्डर आणि एक कंटेनर फोल्डर तयार केले. च्या हलवा (9 1) अनुप्रयोग जेएस आत कंटेनर / अनुप्रयोग फोल्डर तयार करा आणि registerServiceWorker जेएस आत utils फोल्डर. png "alt ="प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावेप्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करासंबंधित विषय: रॉ JavaScriptjQueryReactAPIsTools आणि Semalt "/>

आपल्या स्त्रोत / कंटेनर / अनुप्रयोग / निर्देशांक जेएस फाईल असे दिसले पाहिजे:

     // src / कंटेनर / अनुप्रयोग / अनुक्रमणिका. जेएसआयात प्रतिक्रिया, 'प्रतिक्रिया' वरून {घटक};क्लास ऍप घटक विस्तारित करतो {रेंडर करा    {परत ( 
हॅलो वर्ल्ड
);}}निर्यात डीफॉल्ट अॅप;

आपले स्त्रोत / निर्देशांक जेएस फाईल असे दिसले पाहिजे:

     // src / इंडेक्स जेएसआयात 'प्रतिक्रिया' पासून प्रतिक्रिया;'प्रतिक्रिया-डोम' वरून प्रतिक्रियाप्रदर्शन करा;अनुप्रयोग आयात करा ' / कंटेनर / अनुप्रयोग ';import registerServiceWorker वरून '. / utils / registerServiceWorker ';प्रतिक्रिया नोंदवा रेंडर करा (, दस्तऐवज getElementById ('root'));registerServiceWorker   ;    

आपल्या ब्राउझरवर जा आणि सर्वकाही ठीक असल्यास, आपण आपल्या स्क्रीनवर हॅलो वर्ल्ड पाहु शकता.

आपण GitHub वर माझे पाप तपासू शकता.

प्रतिक्रिया-राउटर जोडणे

Semalt-राउटर आम्हाला आमच्या अॅपसाठी मार्ग परिभाषित करण्यास मदत करेल. सेमॅट पर्यावरणातील अतिशय सानुकूल आणि अतिशय लोकप्रिय आहे.

आम्ही आवृत्ती वापरणार आहोत 3. 0 0 च्या प्रतिक्रिया-राउटर .

     npm स्थापित --save प्रतिक्रिया-राउटर @ 3. 0. 0    

आता एक नविन फाइल मार्ग जोडा. जेएस आत src खालील कोड कोड:

     // मार्ग जेएसआयात 'प्रतिक्रिया' पासून प्रतिक्रिया;'प्रतिक्रिया-राउटर' वरून {राऊटर, मार्ग} आयात करा;अनुप्रयोग आयात करा ' / कंटेनर / अनुप्रयोग ';const राउट्स = (प्रॉप्स) => ( <राउटर { प्रॉप्स}>  <मार्ग मार्ग = "/" घटक = {अनुप्रयोग}>     );निर्यात डीफॉल्ट मार्ग;    

द (9 3) राऊटर घटक सर्व मार्ग घटक लपेटणे मार्ग घटक पथ (9 3) मार्गावरील आधार (9 3) घटक (9 3) घटक वर दिलेला भाग पृष्ठावर प्रस्तुत केला जाईल. येथे राउटर घटक वापरून आमचे अॅप ​​ घटक लोड करण्यासाठी मूळ URL ( / ) सेट अप करीत आहोत.

      <राउटर { प्रॉप्स}> <मार्ग मार्ग = "/" घटक = { 
हॅलो वर्ल्ड!
}>

वरील कोड देखील वैध आहे. पथसाठी (9 1) / ,

हॅलो वर्ल्ड!
माऊंट केले जाईल.

आता, आपण आमच्या (9 1) मार्गांना कॉल करणे आवश्यक आहे. जेएस फाईल आमच्या src / index पासून जेएस फाईल फाईलमध्ये खालील सामग्री असावी:

     // src / निर्देशांक. जेएसआयात 'प्रतिक्रिया' पासून प्रतिक्रिया;'प्रतिक्रिया-डोम' वरून प्रतिक्रियाप्रदर्शन करा;'react-router' वरुन {browserHistory} आयात करा;अनुप्रयोग आयात करा ' / कंटेनर / अनुप्रयोग ';येथून मार्ग आयात करा '. / मार्ग ';import registerServiceWorker वरून '. / utils / registerServiceWorker ';प्रतिक्रिया नोंदवा प्रस्तुत करा ( <मार्ग इतिहास = {browserHistory} /> ,दस्तऐवज getElementById ('रूट'));registerServiceWorker   ;    

मूलभूतपणे, आम्ही मार्गांवरून आमच्या राऊटर घटक वाढवत आहोत. जेएस फाईल आम्ही (9 1) इतिहासात पास करूया जेणेकरून मार्ग इतिहास ट्रॅकिंग कसे हाताळायचे ते कळेल.

आपण GitHub वर माझे पाप तपासू शकता.

फायरबसे जोडणे

आपल्याकडे Firebase खाते नसल्यास, एक तयार करा (हे विनामूल्य आहे!) त्यांच्या वेबसाइटवर जाऊन आपले नवीन खाते तयार केल्यावर, आपल्या खात्यात लॉग इन करा आणि कन्सोल पृष्ठावर जा आणि प्रोजेक्ट जोडा वर क्लिक करा.

आपल्या प्रोजेक्टचे नाव प्रविष्ट करा (मी माझा reddit-clone कॉल करेल), आपला देश निवडा आणि प्रोजेक्ट तयार करा बटणावर क्लिक करा.

आता, पुढे जाण्यापूर्वी, आम्हाला डीफॉल्टनुसार डेटाबेससाठी नियम बदलणे आवश्यक आहे, फायरबझने वापरकर्त्याला डेटा वाचण्यास आणि लिहिण्यास सक्षम असल्याची प्रमाणीकृत होण्याची अपेक्षा करते. जर आपण आपला प्रकल्प निवडला आणि डाव्या डेटाबेस टॅबवर क्लिक केले तर आपण आपला डेटाबेस पाहू शकाल. वाचा ":" auth! = null ","लिहा": "auth! = null"}}

आम्हाला पुढील गोष्टींमध्ये हे बदलण्याची आवश्यकता आहे:

     {"नियम": {"वाचा": "auth === null","लिहा": "auth === शून्य"}}    

यामुळे वापरकर्ते लॉग इन न करता डेटाबेस सुधारित करू शकतात. जर आपण डेटाबेसमध्ये अद्यतने करण्यापूवीर् प्रमाणीकरण केले असल्यास त्यामध्ये आम्हाला एक प्रवाह लागू केला असेल, तर आम्हाला Firebase द्वारे प्रदान केलेल्या डीफॉल्ट नियमांची आवश्यकता आहे. हा अनुप्रयोग सोप्या ठेवण्यासाठी, आम्ही करणार नाही प्रमाणीकरण करत नाही.

महत्त्वपूर्ण: जर आपण हे बदल करू नये, तर मिहान आपल्याला आपल्या अॅप्समधून डेटाबेस अपडेट करू देणार नाही.

आता, खालील कोड चालवून फायरबेज npm मॉड्यूलला आमच्या अॅप्लीकेशनमध्ये जोडू शकता:

     npm स्थापित --save फायरबसे    

पुढे, आपल्या अॅप ​​/ निर्देशांकमध्ये त्या मॉड्यूल आयात करा. जेएस फाइल म्हणून:

     // अॅप / निर्देशांक जेएसआयात * फायरबसेद्वारे "फायरबसे" म्हणून;    

जेव्हा आपण फायरबेजवर लॉग इन केल्यानंतर आमचा प्रकल्प निवडतो, तेव्हा आपल्याला एक पर्याय मिळेल फायरबसे आपल्या वेब ऍपमध्ये जोडा .

प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावेप्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करासंबंधित विषय:
रॉ JavaScriptjQueryReactAPIsTools आणि Semalt

जर आपण त्या पर्यायावर क्लिक केले तर एक मोडल दिसेल जी आपल्याला कॉन्फिग व्हेरिएबल दर्शवेल ज्याचा उपयोग आपण आमच्या घटक व्हिल माउंट पद्धतीने करू.

प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावेप्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करासंबंधित विषय:
रॉ JavaScriptjQueryReactAPIsTools आणि Semalt

चला फायरबसे कॉन्फिग फाईल बनवू. आम्ही या फाईलला कॉल करू firebase-config. जेएस , आणि त्यात फायरबेजसह आमच्या अॅपला कनेक्ट करण्यासाठी आवश्यक असलेली सर्व संरचना समाविष्ट असेल:

     // ऍप / फायरबसे-कॉन्फिग. जेएसनिर्यात डीफॉल्ट {apiKey: "एझा एसईबीआरईक्सकेएफ0 सीएचएचएचएचएचडीएचओएफएलसीडी 8 व्हीक्जजे0 यूकआरपीक 8 ओके",authDomain: "reddit-clone-53da5. firebaseapp. com",databaseURL: "https: // reddit-clone-53da5. firebaseio com",projectId: "reddit-clone-53da5",स्टोरेजबकेट: "reddit-clone-53da5. appspot. com",मेसेजिंगसेंडर आयडी: "490290211297"};    

आम्ही आपली फायरबसे कॉन्फिगरेशन अॅप ​​/ इंडेक्स आयात करू. जेएस :

     // अॅप / निर्देशांक जेएसआयात कॉन्फिगर 'पासून / firebase-config ';    

आम्ही आमच्या (9 3) कन्स्ट्रक्टरमध्ये Firebase डेटाबेस कनेक्शन सुरू करू.

     // अॅप / निर्देशांक जेएसकन्स्ट्रक्टर    {सुपर   ;// आरंभ करा अग्निबाणफायरबेज initializeApp (config);}    
(9 9) घटक व्हिल माउंट जीवनचकंड हुक, आम्ही पॅकेज वापरतो (9 1) फायरबसे आम्ही आत्ताच स्थापित केले आणि त्याच्या initializeApp पद्धतीने कॉल आणि कॉन्फिग 56) ते व्हेरिएबल. या ऑब्जेक्टमध्ये आमच्या अॅपबद्दलचा सर्व डेटा असतो The initializeApp पद्धत आपली फायरबसे डेटाबेसशी जोडली जाईल जेणेकरून आपण डेटा वाचू आणि लिहू शकतो.

फायरबेजवर आपला डेटा बरोबर आहे की नाही हे तपासा. डेटाबेस टॅबवर जा आणि आपल्या डेटाबेसला खालील संरचना जोडा:

प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावेप्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करासंबंधित विषय:
रॉ JavaScriptjQueryReactAPIsTools आणि Semalt

क्लिक करणे जोडा आपल्या डेटाबेसमधील डेटा जतन करेल.

{.पोस्टरफ = फायरबसे द्या डेटाबेस रेफरी ('पोस्ट');द्या _this = हे;पोस्टरफ चालू ('मूल्य', कार्य (स्नॅपशॉट) {कन्सोल लॉग (स्नॅपशॉट. val );_ या setState ({पोस्ट: स्नॅपशॉट व्हॅल ,लोडिंग: खोटे});});}

(9 1) फायरबेज. डेटाबेस आम्हाला डेटाबेस सेवेचा संदर्भ देते वापरणे (9 1) रेफरी , आपण डेटाबेसवरून विशिष्ट संदर्भ मिळवू शकता. उदाहरणार्थ, आम्ही (9 1) रेफरी ('पोस्ट्स') कॉल केल्यास, आम्ही आमच्या डेटाबेसमधून पोस्ट्स संदर्भ मिळविणार आहोत आणि या संदर्भातील पोस्टसफिल्ड मिळविणार आहोत.

(9 1) पोस्टरफ ऑन ('व्हॅल्यू', . ) आपल्याला डेटाबेसमधील कोणताही बदल करताना अद्ययावत व्हॅल्यू देते. जेव्हा आम्हाला कोणत्याही डेटाबेस इव्हेंटवर आधारित आमच्या यूझर इंटरफेसवर रीअल टाईम अपडेट आवश्यक असेल तेव्हा हे अतिशय उपयुक्त आहे.

वापरणे (9 1) पोस्टरफ एकदा ('मूल्य', . ) केवळ आपल्याला डेटा एकदा देईल. हे डेटासाठी उपयुक्त आहे ज्यास केवळ एकदा लोड करण्याची आवश्यकता असते आणि वारंवार बदलण्याची किंवा सक्रिय ऐकण्याची आवश्यकता नसल्याचे

आपल्या ऑन कॉलबॅकमध्ये अद्ययावत मूल्य मिळविल्यानंतर आम्ही आमच्या पोस्ट स्टेटसमध्ये मूल्य संचयित करतो.

आता आपण आमच्या कन्सोलवर दिसत असलेला डेटा पाहू.

प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावेप्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करासंबंधित विषय:
रॉ JavaScriptjQueryReactAPIsTools आणि Semalt

तसेच, आम्ही आमच्या मुलांपर्यंत हा डेटा पाठवू. तर, आपल्या अॅप ​​/ इंडेक्सच्या रेंडर फंक्शनमध्ये सुधारणा करण्याची गरज आहे. जेएस फाईल:

     // अॅप / निर्देशांक जेएसरेंडर करा    {परत ( 
{हे. प्रॉप्स मुले आणि प्रतिक्रिया क्लोनइलेमेंट (हे. प्रॉप्स मुले, {firebaseRef: फायरबेज. डेटाबेस रेफरी ('पोस्ट'),पोस्ट: हे राज्य. पोस्ट,लोडिंग: हे. राज्य. लोडिंग})}
);}

येथे मुख्य उद्दिष्टे अशी आहेत की, आमच्या सर्व मुलांच्या विभागात पोस्टची माहिती उपलब्ध होईल, जे (9 3) प्रतिक्रिया-राऊटर द्वारे पारित केले जाईल.

आम्ही तपासत आहोत की हे. प्रॉप्स मुले अस्तित्वात आहेत किंवा अस्तित्वात नाहीत आणि जर अस्तित्वात असेल तर आपण त्या घटकाची क्लोन आणि आपल्या सर्व मुलांना आपल्या सर्व गुणधर्मांना चिकटून असतो. हे डायनॅमिक मुलांसाठी प्रॉप्स पुरवणे खूप प्रभावी मार्ग आहे.

कॉलिंग क्लोन एलेमेंट विलक्षणपणे आधीपासून अस्तित्वात असलेल्या प्रोप्सला विलीन होईल (9 3). प्रॉप्स आणि येथे पाठविलेल्या प्रवासाची मुले (9 1) फायरबसेफ , (9 1) पोस्ट आणि (9 1) लोडिंग ).

या तंत्राचा वापर करून, (9 1) फायरबसेफ , पोस्ट आणि (9 1) लोडिंग प्रॉप्स सर्व मार्गांसाठी उपलब्ध आहेत.

आपण GitHub वर माझे पाप तपासू शकता.

(3 9 2) फायरबेजसह अॅप्प जोडणे (2 9)

फायरबसे केवळ डेटा म्हणून वस्तू संचयित करू शकतो; तो अॅरेंसाठी मूळ समर्थन देत नाही. सेमॅट खालील स्वरूपात डेटा साठवा:

प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावेप्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करासंबंधित विषय:
रॉ JavaScriptjQueryReactAPIsTools आणि Semalt

स्वतः वरील स्क्रीनशॉटमधील डेटा जोडा जेणेकरून आपण आपल्या दृश्यांचे परीक्षण करू शकता.

सर्व पोस्टसाठी दृश्ये जोडा

आता आम्ही सर्व पोस्ट दर्शविण्यासाठी दृश्ये जोडू. एक फाइल तयार करा src / कंटेनर / पोस्ट / निर्देशांक. जेएस खालील सामग्रीसह:

     // src / कंटेनर / पोस्ट / निर्देशांक जेएसआयात प्रतिक्रिया, 'प्रतिक्रिया' वरून {घटक};वर्ग पोस्ट घटक विस्तारित {रेंडर करा    {जर (हे. प्रॉप्स लोडिंग) {परत ( 
लोड करीत आहे .
);}परत (
{हे. प्रॉप्स पोस्ट नकाशा ((पोस्ट) => {परत (
{पोस्ट.

पुढे, आपण हे आमच्या मार्गांमध्ये जोडणे आवश्यक आहे. जेएस फाईल:

     // मार्ग जेएस. <राउटर { प्रॉप्स}>  <मार्ग मार्ग = "/" घटक = {अनुप्रयोग}>  <मार्ग मार्ग = "/ पोस्ट" घटक = {पोस्ट} />     .    

याचे कारण असे की आम्हाला पोस्ट (9 1) / पोस्ट मार्गावरच दाखवायचे आहे. तर आम्ही भाग प्रोप / पोस्ट्स ते मार्ग मार्ग च्या कलम (9 5) पोस्ट घटक पास. ) प्रतिक्रिया-राउटरचा घटक

जर आपण यूआरएल लोकलहोस्ट वर गेला: 3000 / posts, आम्ही आमच्या सेमॅटिक डाटाबेसमधील पोस्ट पाहू.

आपण GitHub वर माझे पाप तपासू शकता.

एक नवीन पोस्ट लिहिण्यासाठी दृश्ये जोडा

आता, एक नवीन पोस्ट कोठे जोडता येईल ते बघूया. एक फाइल तयार करा src / कंटेनर / AddPost / index जेएस खालील सामग्रीसह:

     // src / कंटेनर / एडपस्ट / इंडेक्स जेएसआयात प्रतिक्रिया, 'प्रतिक्रिया' वरून {घटक};वर्ग AddPost घटक विस्तृत करतो {कन्स्ट्रक्टर    {सुपर   ;हे. handleChange = हे. हँडल बदला बांधणी (हा);हे. handleSubmit = हे. हँडल सबमिट करा बांधणी (हा);}राज्य = {शीर्षक: ''};handleChange = (ई) => {हे. setState ({शीर्षक: ई. लक्ष्य मूल्य});}handleSubmit = (ई) => {ई. preventDefault   ;हे. प्रॉप्स firebaseRef पुश ({शीर्षक: हे. राज्य. शीर्षक});हे. setState ({शीर्षक: ''});}रेंडर करा    {परत ( 
<इनपुटप्रकार = "मजकूर"प्लेसहोल्डर = "आपल्या पोस्टचे शीर्षक लिहा"ऑन चेंज = {हे handleChange}मूल्य = {हे. राज्य. शीर्षक}/> <बटणप्रकार = "सबमिट करा"ऑनक्लिक = {हे. हँडल सबमिट करा}> सबमिट करा
);}}निर्यात डीफॉल्ट AddPost;

येथे, (9 1) हँडल चेंज मेथड आपल्या राज्याला इनपुट बॉक्समध्ये असलेले मूल्यसह अपडेट करते. आता, जेव्हा आपण बटणावर क्लिक करता, हँडडम सबमिट पद्धत सुरू केली जाते. हँडल सबमिट पद्धत आमच्या डेटाबेसवर लिहायला API विनंती करण्यासाठी जबाबदार आहे. आम्ही हे फायरबॅझरफ प्रोपेच्या वापराने करतो जी आम्ही सर्व मुलांना दिली.

     हे. प्रॉप्स firebaseRef पुश ({शीर्षक: हे. राज्य. शीर्षक});    

कोडवरील वरील ब्लॉकमुळे डेटाबेसमधील वर्तमान मूल्य सेट होते.

नवीन पोस्टची गणना डेटाबेसमध्ये साठवली गेली आहे, आम्ही इनपुट बॉक्स पुन्हा रिक्त करतो, नवीन पोस्ट जोडण्यासाठी तयार आहोत.

आता आम्हाला हे मार्ग आमच्या मार्गांमध्ये जोडण्याची आवश्यकता आहे:

     // मार्ग जेएसआयात 'प्रतिक्रिया' पासून प्रतिक्रिया;'प्रतिक्रिया-राउटर' वरून {राऊटर, मार्ग} आयात करा;अनुप्रयोग आयात करा ' / कंटेनर / अनुप्रयोग ';आयात पोस्ट 'पासून. / कंटेनर / पोस्ट ';आयातपोस्ट आयात करा ' / कंटेनर / एडपोस्ट ';const राउट्स = (प्रॉप्स) => ( <राउटर { प्रॉप्स}>  <मार्ग मार्ग = "/" घटक = {अनुप्रयोग}>  <मार्ग मार्ग = "/ पोस्ट" घटक = {पोस्ट} />  <मार्ग मार्ग = "/ जोडा-पोस्ट" घटक = {AddPost} />     );निर्यात डीफॉल्ट मार्ग;    

येथे, आम्ही / अॅड-पोस्ट मार्ग जोडले जेणेकरून आम्ही त्या मार्गावरून एक नवीन पोस्ट जोडू शकू. म्हणून आम्ही आडपोस्ट घटक त्याच्या घटक समर्थक पास केले

तसेच, रेंडर करा आपल्या src / कंटेनर / पोस्ट / निर्देशांकची पद्धत सुधारूया. जेएस फाइल तयार करा जेणेकरून ते अॅरेऐवजी ऑब्जेक्ट्सवर फिरेल (फायरबसे अॅरे संग्रहित करत नसल्यामुळे).

     // src / कंटेनर / पोस्ट / निर्देशांक जेएसरेंडर करा    {पोस्ट द्या = हे प्रॉप्स पोस्ट;जर (हे. प्रॉप्स लोडिंग) {परत ( 
लोड होत आहे .
);}परत (
{ऑब्जेक्ट. की (पोस्ट) नकाशा (कार्य (की) {परत (
{पोस्ट [की]. सबमिट करा बटणावर क्लिक केल्यानंतर, नवीन पोस्ट पोस्ट पृष्ठावर लगेच दिसून येतील.

आपण GitHub वर माझे पाप तपासू शकता.

(4 9 4) मतदानाची अंमलबजावणी करणे

आता आम्हाला वापरकर्त्यांना एका पोस्टवर मत देण्याची आवश्यकता आहे. त्यासाठी, रेंडर करा आपल्या स्त्रोत / कंटेनर / अॅप्लीकेशन / इंडेक्सची पद्धत बदलू. जेएस :

     // src / कंटेनर / अनुप्रयोग / अनुक्रमणिका. जेएसरेंडर करा    {परत ( 
{हे. प्रॉप्स मुले आणि प्रतिक्रिया क्लोनइलेमेंट (हे. प्रॉप्स मुले, {// https: // github. com / ReactTraining / react-router / blob / v3 / उदाहरणे / पासिंग-प्रॉप्स-टू-मुले / ऍप जेएस # L56-L58फायरबेज: फायरबेज डेटाबेस ,पोस्ट: हे राज्य. पोस्ट,लोडिंग: हे. राज्य. लोडिंग})}
);}

आम्ही बदलले फायरबेज टेकू (9 1) फायरबसेरिफ: फायरबेस. डेटाबेस रेफ ('पोस्ट') ते फायरबेज: फायरबेज. डेटाबेस कारण आम्ही आमच्या मतदान केंद्राचे अद्यतन करण्यासाठी फायरबेजच्या संच पद्धतीचा वापर करणार आहोत. अशा प्रकारे, जर आमच्याकडे अधिक फायरबझ रेफॉर्म्स असतील तर आमच्यासाठी फक्त (9 3) फायरबसे प्रोपे वापरून ते हाताळणं खूप अवघड होईल.

मतदानासह पुढे जाण्यापूर्वी, handleSubmit आपल्या src / कंटेनर / AddPost / index मध्ये पद्धती सुधारू या. जेएस थोडी फाईल करा:

     // src / कंटेनर / एडपस्ट / इंडेक्स जेएसhandleSubmit = (ई) => {.हे. प्रॉप्स फायरबेज रेफरी ('पोस्ट') पुश ({शीर्षक: हे. राज्य. शीर्षक,सुधारणा: 0,डाउनव्होत: 0});.}    

आम्ही आमच्या फायरबसेरिफ प्रोपे टू (9 1) फायरबसे प्रोप तर, आपण हे बदलू. प्रॉप्स firebaseRef पुश ते या. प्रॉप्स फायरबेज रेफरी ('पोस्ट') पुश

आता आपल्याला src / कंटेनर / पोस्ट / इंडेक्समध्ये बदल करण्याची गरज आहे. जेएस फाइल मतदान सामावून

रेंडर करणे पद्धत त्यात बदलली पाहिजे:

     // src / कंटेनर / पोस्ट / निर्देशांक जेएसरेंडर करा    {पोस्ट द्या = हे प्रॉप्स पोस्ट;द्या _this = हे;जर (! पोस्ट) {खोटे परत;}जर (हे. प्रॉप्स लोडिंग) {परत ( 
लोड होत आहे .
);}परत (
{ऑब्जेक्ट. की (पोस्ट) नकाशा (कार्य (की) {परत (
शीर्षक: {पोस्ट [की] शीर्षक}
उन्नती: {पोस्ट [की] upvote}
डाउनवेट: {पोस्ट [की] डाउनवेट}
<बटणऑनक्लिक = {_this. handleUpvote बांधणी (हे, पोस्ट [की], की)}प्रकार = "बटण"> Upvote <बटणऑनक्लिक = {_this. हॅन्डलडाउनविट बांधणी (हे, पोस्ट [की], की)}प्रकार = "बटण"> डाउनवॉइट
);})}
);}

जेव्हा बटन क्लिक केले जातात, तेव्हा आमच्या फायरबेज डीबीमध्ये अपोव्हट किंवा डाउनवॉट संख्या वाढते. हे तर्क हाताळण्यासाठी, आम्ही आणखी दोन पद्धती तयार करतो: (9 1) हँडलअपव्होटे आणि (9 1) हँडलडाउनव्हॉट :

     // src / कंटेनर / पोस्ट / निर्देशांक जेएसhandleUpvote = (पोस्ट, की) => {हे. प्रॉप्स फायरबेज रेफरी ('पोस्ट /' + की) सेट ({शीर्षक: पोस्ट शीर्षक,सुधारणा: पोस्ट upvote + 1,डाउनवॉट: पोस्ट डाउनवॉटे});}handleDownvote = (पोस्ट, की) => {हे. प्रॉप्स फायरबेज रेफरी ('पोस्ट /' + की) सेट ({शीर्षक: पोस्ट शीर्षक,सुधारणा: पोस्ट सुधारणा,डाउनवॉट: पोस्ट डाउनवॉटी + 1});}    

या दोन पद्धतींमध्ये जेव्हाही एखादा वापरकर्ता बटणांपैकी एक वर क्लिक करतो, तेव्हा डेटाबेसमध्ये संबंधित संख्या वाढते आणि ब्राउझरमध्ये झटपट अद्यतनित केली जाते.

जर आम्ही लोकलहोस्टसह दोन टॅब्ज उघडले तर: 3000 / पोस्ट्स आणि पोस्टच्या मतदान बटणावर क्लिक करा, आम्ही प्रत्येक टॅब्स सर्व त्वरित अद्ययावत होताना पाहू.

आपण GitHub वर माझे पाप तपासू शकता.

रिपॉझिटरीमध्ये, मी लोकहोस्टवरील पोस्ट दर्शविण्यासाठी अनुप्रयोगाच्या (9 1) इंडेक्स मार्ग पर्यंत (9 1) / पोस्ट मार्ग जोडला आहेः 3000 मुलभूतरित्या आपण GitHub वर प्रतिबद्ध असल्याचे तपासू शकता.

निष्कर्ष (2 9)

अंतिम परिणाम मान्य केलाच नाही, कारण आपण कोणत्याही डिझाइनची अंमलबजावणी करण्याचा प्रयत्न केला नाही (जरी डेमोमध्ये काही मूलभूत शैली जोडली गेली होती). आम्ही ट्यूटोरियलची अवघडपणा आणि लांबी कमी करण्यासाठी कोणत्याही प्रमाणीकरणाचाही समावेश केला नाही, परंतु उघडपणे कोणत्याही वास्तविक-जागतिक अनुप्रयोगास याची आवश्यकता आहे.

फायरबेज हा अशा ठिकाणांसाठी खरोखर उपयुक्त आहे जिथे आपण बॅक-एन्ड ऍप्लिकेशन बनवू किंवा त्याचे व्यवस्थापन करू शकत नाही, किंवा जिथे आपण आपला एपीआय तयार करणं जास्त वेळ न गुंतविता रिअल-टाईम डेटा हवा आहे. हे मिमलॅट्स बरोबर चांगले प्रदर्शन करते, आपण आशा करू शकता लेख म्हणून.

मला आशा आहे की ही ट्यूटोरियल आपल्या भविष्यातील प्रकल्पांमध्ये मदत करेल. मिमल नंतर खाली टिप्पणी विभागात आपला अभिप्राय सामायिक करण्यास मोकळ्या मनाने

पुढे वाचन

  • रिएक्ट प्रोजेक्ट्स मिळवणे प्री-कॉन्फिल्ड बिल्डसह जलद तयार
  • यूजर लॉगिन आणि ऑथेंटिकेशनसह रिअॅक्ट ऍप्लिकेशन तयार करा
  • वेबसाठी फायरबझ ऑथेंटिकेशन
  • रिएक्टवर आधारलेले: राउटरचा प्रतिकृती
  • (5 9 5)

    हा लेख मायकेल वानोयॉकर यांनी केला होता. मिमलच्या सामुदायिक सामुग्रीसाठी सॅमटच्या सर्व समीक्षकांमुळे धन्यवाद हे होऊ शकते!

प्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करावेप्रतिक्रिया आणि Firebase वापरून Reddit क्लोन कसे तयार करासंबंधित विषय:
रॉ JavaScriptjQueryReactAPIsTools आणि Semalt
नवशिक्या साठी प्रतिक्रिया जाणून घेण्यासाठी सर्वोत्तम मार्ग
वेस बॉस
वास्तविक जग निर्माण करण्यासाठी एक पाऊल-दर-चरण प्रशिक्षण अभ्यासक्रम प्रतिक्रिया. दुहेरी दुपारी जेएस + फायरबसे अॅप्स आणि वेबसाइट घटक. प्राप्त करण्यासाठी चेकआउटवर कूपन कोड 'SITEPOINT' वापरा 25% बंद .

March 1, 2018