MERN स्टैक क्या है, और इसके साथ कैसे काम करना है?

नमस्कार, हेब्र!

एक बार, हमने MEAN स्टैक (मोंगो, एक्सप्रेस, कोणीय, नोड) पर एक पायलट प्रोजेक्ट जारी किया, जो आम तौर पर हमें निराश नहीं करता था, हालांकि, हमने उस समय अतिरिक्त प्रिंट और अपडेट न करने का फैसला किया - मैनिंग के विपरीत, जिसने इस पुस्तक को देखा। । फिर भी, हम इस दिशा में खोज जारी रखते हैं और आज हम आपसे संबंधित MERN स्टैक के बारे में बात करना चाहते हैं, जहाँ React क्लाइंट पर स्थित है, न कि कोणीय। फर्श टिम स्मिथ को दिया गया है।



चेतावनी: इस लेख का सभी कोड यहाँ है ।

इस MERN स्टैक गाइड में, हम अपने पूर्ण-स्टैक शस्त्रागार का विस्तार करने के लिए React.js, Node.js, Express.js और MongoDB का उपयोग करके एक सरल ब्लॉग लिखेंगे।

स्टैक क्या है?

शायद चर्चा करने वाली पहली चीज "स्टैक" का विचार है। कई अलग-अलग ढेर हैं, और वे सभी एक ही लक्ष्य को प्राप्त करने के लिए बस अलग-अलग रास्ते हैं। एक पूर्ण-स्टैक एप्लिकेशन बनाते समय, हम क्लाइंट भाग के लिए प्रदान करते हैं जिसके साथ उपयोगकर्ता बातचीत करेगा, और एक ही क्लाइंट भाग सर्वर और डेटाबेस के साथ काम में मध्यस्थता करेगा - इस पूरी प्रक्रिया को यथासंभव सरल और प्रबंधनीय बनाता है।

हम कह सकते हैं कि स्टैक इस समस्या को हल करने के लिए उपयोग की जाने वाली तकनीकों का एक निश्चित समूह है।

हालाँकि, इसके बारे में बात करने के लायक कई ढेर हैं, उनमें से कुछ आज दूसरों की तुलना में अधिक लोकप्रिय हैं। इनमें से एक लोकप्रिय स्टैक को MEAN कहा जाता है, और इसमें निम्न शामिल हैं:

• एम ongoDb
• ई xpress.js
• एक ngular.js
• एन ode.js

आज हम MERN स्टैक के बारे में बात करेंगे, जो MEAN से काफी मिलता-जुलता है सिवाय इसके कि Angular.js को यहाँ React .js से बदल दिया गया है। इस प्रकार, हम सर्वर और रूटिंग के लिए क्रमशः एक डेटाबेस, Node.js और एक्सप्रेस के रूप में MongoDB का उपयोग कर सकते हैं, और React.js - क्लाइंट हिस्सा बनाने के लिए जिसके साथ उपयोगकर्ता सहभागिता करेगा।

इस ढेर के साथ विकास कैसे किया जाता है?

सभी सूक्ष्मताओं पर आगे बढ़ने से पहले, आइए एक नज़र डालें कि ये सभी तत्व एक साथ कैसे काम करते हैं। व्यक्तिगत रूप से, मुझे इसमें शामिल होने में थोड़ा समय लगा, क्योंकि मेरी पृष्ठभूमि PHP से संबंधित है, जहां क्लाइंट और सर्वर भागों को कुछ हद तक मिलाया जाता है।

1. सर्वर भाग (नोड और Express.js) और ग्राहक भाग (React.js)

सबसे पहले, आपको यह समझने की आवश्यकता है कि सर्वर भाग और क्लाइंट भाग अलग-अलग संस्थाएं हैं। क्लाइंट का हिस्सा सर्वर के साथ एक ही रिपॉजिटरी में हो सकता है, या हो सकता है कि पूरी तरह से अलग हो।

2. एपीआई टर्मिनलों का उपयोग संचार के लिए किया जाता है

यदि आप पहले से ही इस बारे में सोच रहे हैं कि क्लाइंट और सर्वर भागों के दोस्त कैसे बनें, तो मैं जवाब दूंगा: यह एपीआई के माध्यम से किया जाता है। सर्वर पर एक एपीआई (एप्लिकेशन प्रोग्राम इंटरफ़ेस) बनाया जाता है, जहां हम "टर्मिनल" प्राप्त करेंगे, जिसके माध्यम से क्लाइंट भाग में स्थित एप्लिकेशन सर्वर के साथ बातचीत कर सकता है।

उंगलियों पर समझाएं: कल्पना करें कि आपका बायां हाथ सर्वर साइड है, और आपका दाहिना हाथ क्लाइंट साइड है।

अब अपने हाथों को मोड़ें और अपनी उंगलियों को एक साथ घुमाएं जैसे कि अपना खुद का हाथ मिलाते हुए। इस तरह से टेम्प्लेट लैंग्वेज काम करती हैं। वे आपको सर्वर के साथ डंप किए गए डेटा के साथ बस कुछ मार्कअप प्रदर्शित करने की अनुमति देते हैं - और उनमें क्लाइंट और सर्वर घटक बहुत हद तक ओवरलैप होते हैं।

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

मुझे उम्मीद है कि यह थोड़ा स्पष्ट हो गया है, और यदि नहीं, तो यह सब रूपक भूल जाओ, जैसे कि मैंने इसका उल्लेख नहीं किया है।

Node.js और Express.js का हमारा सर्वर पक्ष

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

हम app.js फ़ाइल बनाने के बाद, आपको कई पैकेज स्थापित करने होंगे। निम्नलिखित सबसे आम पैकेज हैं जो मैंने पहले अपनी परियोजनाओं में Express.js के साथ उपयोग किए हैं - शायद वे आपके लिए भी काम आएंगे।

• Express.js वेब एप्लिकेशन बनाने का एक ढांचा है। रूटिंग को स्थापित करने के लिए, विशेष रूप से कई समस्याओं को हल करने के लिए इसमें अंतर्निहित कार्यक्षमता है।
• Mongoose एक ऑब्जेक्ट डेटा मैनेजर (ODM) है जो एक express.js एप्लिकेशन और एक MongoDB डेटाबेस के बीच अंतर प्रदान करता है।
• BodyParser एक पुस्तकालय है जो आने वाले अनुरोधों के शरीर (यानी, सामग्री) को पढ़ने के लिए एक्सप्रेस .js आवेदन की अनुमति देता है।
• DotENV - आपको गोपनीय डेटा के साथ काम करने के लिए एक्सटेंशन .env के साथ फ़ाइलों का उपयोग करने की अनुमति देता है।
• Passport.js - हमारे आवेदन में प्रमाणीकरण प्रदान करता है, और कई अलग-अलग प्रमाणीकरण तरीके प्रदान करता है।
• सत्यापनकर्ता - कई डेटा प्रकारों का सरल सत्यापन
• bCrypt - पासवर्ड जैसे संवेदनशील डेटा का एन्क्रिप्शन
• स्थिति बदलने के मामले में हमारे नोड-सर्वर के लिए नोडमॉन - "हॉट रिबूट"; Nodemon के लिए धन्यवाद, आप किसी भी परिवर्तन करने के बाद सर्वर को रोक या पुनरारंभ नहीं कर सकते हैं।

बेशक, कई अन्य पैकेज हैं, लेकिन मेरे अनुभव में, यह ये पुस्तकालय हैं जो सबसे अधिक बार उपयोग किए जाते हैं।

इसलिए, कुछ सबसे अधिक उपयोग किए जाने वाले पैकेजों को छाँटने के बाद, आइए कोड को देखें। आरंभ करने के लिए - हमारा सर्वर:



यह एक साधारण एपीआई सर्वर है। जैसा कि आप देख सकते हैं, यह मूल CRUD कार्यक्षमता (क्रिएट-रीड-अपडेट-डिलीट) से लैस है - कुछ भी अलौकिक नहीं। इसे और अधिक बारीकी से देखते हुए, हम देखते हैं कि res.json() का उपयोग एक विशिष्ट URL के लिए आउटपुट डेटा प्रदान करने के लिए किया जाता है - अर्थात, HTML या किसी अन्य टेम्पलेट का उपयोग आउटपुट के लिए नहीं किया जाता है। इस प्रकार हम अपने APIs को React.js तक डेटा एक्सेस खोलकर बनाते हैं।

आप यह भी देख सकते हैं कि मैंने अपने कंप्यूटर पर स्थापित अपने स्वयं के मैंगोडब सर्वर के लिए सिर्फ मैंगोज़ को इंगित किया है। इस तरह के तंत्र को सही ढंग से काम करने के लिए, आपके कंप्यूटर और काम पर MongoDB स्थापित होना चाहिए। यदि यह काम नहीं करता है, तो बस कंसोल विंडो खोलें और निम्न कमांड दर्ज करें:



यह आपके स्थानीय मशीन पर MongoDB सर्वर शुरू करेगा। चूँकि यह सब स्थानीय स्तर पर किया जाता है, आप रिपॉजिटरी से कोड चलाने पर मेरी पोस्ट नहीं देख पाएंगे। हमें नई सामग्री स्वयं लिखनी होगी। यदि आपको एक सामग्री स्टब की आवश्यकता है, तो मैं अपनी पसंदीदा फिल्मों और टीवी शो से पाठ को स्लाइस करने के लिए उत्कृष्ट फ़िलरमाओ.आईओ जनरेटर की सलाह देता हूं।

यदि आप स्वयं सर्वर का परीक्षण करने में रुचि रखते हैं, तो आप इसे निम्न कमांड से शुरू कर सकते हैं:



सर्वर शुरू होने के बाद और हमें बताता है कि यह 3333 पोर्ट पर काम करता है, साथ ही साथ यह MongoDB से जुड़ा है, आप पोस्टमैन को खोल सकते हैं और हमारे मार्गों का परीक्षण कर सकते हैं। जीईटी विकल्पों के लिए, आप बस मार्ग सम्मिलित कर सकते हैं और "भेजें" पर क्लिक कर सकते हैं। POST के मामले में, आपको "बॉडी" का चयन करना होगा और हेडर और मुख्य सामग्री के लिए फ़ील्ड भरना होगा।

ग्राहक की ओर ध्यान दें

अब जब हमने अपने सर्वर को कॉन्फ़िगर और लॉन्च किया है, तो हम उस क्लाइंट पर काम करना शुरू कर सकते हैं जिसके साथ हमारे उपयोगकर्ता बातचीत करेंगे। क्लाइंट को React.js में लिखा जाएगा, और यह कई अलग-अलग तरीकों से किया जा सकता है।

सबसे पहले ग्राहक पक्ष (प्रतिक्रिया, प्रतिक्रिया-डोम, प्रतिक्रिया-राउटर, आदि) के लिए सभी आवश्यक पुस्तकालयों को एक ही package.json जोड़ना है package.json फ़ाइल को जहाँ हमने सर्वर लाइब्रेरी लिखा है। इस परियोजना में, मैंने ऐसा ही किया, लेकिन मुझे कहना होगा कि मुझे नहीं लगता कि यह विकल्प इष्टतम है। मुझे लगता है कि जैसे-जैसे हमारी परियोजना बढ़ती है, कोड आधार अधिक से अधिक भ्रमित हो जाएगा, और यदि आप बस इस पद्धति का उपयोग करते हैं, तो इसके साथ काम करना भविष्य में और अधिक जटिल हो जाएगा। मैंने वर्णित एप्लिकेशन में इस रास्ते को ठीक से पसंद किया है क्योंकि मुझे यकीन है कि पता है: यह बढ़ेगा नहीं और बिल्कुल भी नहीं बदलेगा। यह एप्लिकेशन केवल प्रदर्शन प्रयोजनों के लिए लिखा गया है।

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



client फ़ोल्डर को .gitignore फ़ाइल में जोड़कर, हम गारंटी देते हैं कि सिस्टम इस फ़ोल्डर को प्रोजेक्ट के दूसरे रिपॉजिटरी के रूप में अनुभव नहीं करेगा। इसके अलावा, यह दृष्टिकोण क्लाइंट पार्ट को फिर से डिज़ाइन या प्रतिस्थापित करने के कार्य को सुविधाजनक बनाता है, क्योंकि सर्वर भाग बिल्कुल प्रभावित नहीं होता है।

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

हम React.js पर एक क्लाइंट पार्ट बनाते हैं

अब, परियोजना के संगठन को समझने के बाद, ग्राहक कोड के बारे में बात करते हैं। नीचे app.js पर एक आवेदन के लिए मेरी app.js फ़ाइल है, और मैं इस पोस्ट में प्रत्येक घटक के लिए कोड नहीं डालूंगा, मैं सिर्फ रिपॉजिटरी के लिए एक लिंक छोड़ता हूं और समझाता हूं कि प्रत्येक रिएक्ट घटक क्या करता है।

और यहाँ हमारे आवेदन के मुख्य पृष्ठ का स्क्रीनशॉट कैसा दिखेगा:



जैसा कि आप देख सकते हैं, app.js बिल्कुल कुछ भी जटिल नहीं है। एक <Router> है जो आपको React.js में रूट सेट करने की अनुमति देता है जो उनके URL के आधार पर विभिन्न घटकों को प्रदर्शित करता है। यहां अन्य घटक हैं जो हमारे React.js एप्लिकेशन में उपयोग किए जाएंगे:

• हेडर - स्क्रीन के शीर्ष पर स्थित नेविगेशन बार
• सूचकांक - उपलब्ध ब्लॉग प्रविष्टियों को सूचीबद्ध करता है
• नया - वह प्रपत्र जिसके माध्यम से उपयोगकर्ता एक नया पोस्ट बना सकता है
• एकल - अपनी id आधार पर एक विशिष्ट ब्लॉग प्रविष्टि प्रदर्शित करता है
• संपादित करें - वह प्रपत्र जिसके माध्यम से उपयोगकर्ता id द्वारा प्राप्त ब्लॉग प्रविष्टि को अपडेट कर सकता है

हम एपीआई टर्मिनलों के लिए http कॉल करने के लिए Axios का उपयोग करते हैं, और फिर कृपया डेटा प्रदर्शित करने के लिए React.js का उपयोग करते हैं। इस पोस्ट में मैं यह स्पष्ट करने के लिए Index.js कोड दूंगा कि यह सब एक साथ कैसे काम करता है।



उपरोक्त कोड में, एक वर्ग घटक शामिल है, जिससे हम राज्य और जीवन चक्र विधियों का उपयोग कर सकते हैं। यह आवश्यक है क्योंकि Axios कॉल घटकडीडमाउंट componentDidMount() जीवन चक्र विधि में किया जाना चाहिए। यह ध्यान दिया जाना चाहिए कि जब मैं अपने स्थानीय एपीआई पर कॉल करने की कोशिश कर रहा था तो मुझे एक कॉर्स त्रुटि मिल रही थी। इस समस्या को हल करने के लिए, मैंने अपने एक्सप्रेस सर्वर में server.js फ़ाइल में कई हेडर जोड़े - और यह काम किया। यह कोड server.js फ़ाइल पर टिप्पणियों में नोट किया गया है।

आइए सुनिश्चित करें कि खोज बॉट सामान्य रूप से हमारे React.js ऐप को पढ़ें।

राउंडिंग ऑफ, मैं रेंडरिंग के बारे में संक्षेप में बात करना चाहूंगा। यदि आप हमारी साइट लॉन्च करते हैं और सीधे किसी ब्लॉग पोस्ट पर जाते हैं, तो सामग्री के प्रदर्शन के साथ कुछ समस्याएं हो सकती हैं। इस मामले में, साइट ब्राउज़ करना न केवल उपयोगकर्ताओं के लिए असुविधाजनक होगा, बल्कि रोबोट इंडेक्सिंग सामग्री को खोजने के लिए भी होगा। इस समस्या को हल करने के लिए, मैं Gatsby js या Next js जैसे टूल का उपयोग करने की सलाह देता हूं। ये दोनों समाधान एक-दूसरे से अलग हैं, लेकिन दोनों ही काम में आ सकते हैं, जो वास्तव में आपकी ज़रूरत पर निर्भर करता है।

Gatsby js एक स्थिर साइट जनरेटर है। आप React.js पर एक साइट लिख सकते हैं, और फिर Gatsby इसे निर्माण के दौरान स्थिर फाइलों में बदल देगा, जिससे साइट सुपर-फास्ट हो जाएगी। गैट्सबी कई उपयोगी प्लगइन्स के साथ आता है जो टूल को लगभग सार्वभौमिक बनाते हैं। वैसे, मेरी साइट Gatsby.js का उपयोग करके बनाई गई थी! चूंकि असेंबली के दौरान स्थिर फाइलें बनाई जाती हैं, इसलिए मूल सामग्री में परिवर्तन होने पर साइट को फिर से बनाना होगा।

Next.js , बदले में, React.js साइटों को प्रदर्शित करने के लिए एक सर्वर घटक है। कई उपयोगी विशेषताएं इसमें बनाई गई हैं, विशेष रूप से, रूटिंग, कोड विभाजन, डिज़ाइन किए गए घटक, और बहुत कुछ। सर्वर रेंडरिंग का मतलब है कि डेटा स्वचालित रूप से अपडेट हो जाएगा, जैसा कि सर्वर पर किया जाता है, लेकिन, ब्राउज़र विंडो में प्रदर्शित करने से पहले, रेंडरिंग चरण होगा। यही कारण है कि उपयोगकर्ता को डेटा प्रदर्शित करने में कोई समस्या नहीं होनी चाहिए, और खोज रोबोट भी समस्याओं के बिना अपना काम करेंगे।

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

MERN स्टैक पर अंतिम विचार

उम्मीद है कि इस लेख ने आपको और अधिक सटीक रूप से मदद की है कि MERN स्टैक कैसे काम करता है। इसमें, हम सिर्फ MongoDB, Express.js और Node.js लेते हैं और उनसे एक सर्वर बनाते हैं जो पहले से ही एपीआई टर्मिनल प्रदान करता है जिसके माध्यम से हमारा React.js एप्लिकेशन डेटा तक पहुंच सकता है। तो अब आप बहुत कुछ समझते हैं, यह महान चीजें करने का समय है!