वेबिनार खोलें "वेबपैक + रिएक्ट + एक्सप्रेस पर एक एप्लिकेशन बनाना"

सभी को नमस्कार!

जुलाई 2018 में, जावास्क्रिप्ट डेवलपर पाठ्यक्रम में हमारे शिक्षक , यूरी ड्वोरज़ेत्स्की ने " वेबपैक + रिएक्ट + एक्सप्रेस पर एक एप्लिकेशन बनाना" विषय पर एक खुला वेबिनार आयोजित किया, हालांकि, दूसरे पाठ्यक्रम के हिस्से के रूप में , जहां वह जावास्क्रिप्ट के लिए समर्पित मॉड्यूल में से एक में शिक्षक के रूप में कार्य करता है। इस सामग्री में आप अपने आप को वीडियो और पिछले मास्टर क्लास की एक संक्षिप्त रीटेलिंग से परिचित कर सकते हैं।

निम्नलिखित योजना के अनुसार खुले पाठ में कार्य किया गया:

1. पेश है नोड जेएस और एक्सप्रेस जेएस।
2. पेश है वेबपैक।
3. प्रस्तुत है प्रतिक्रिया।

तो चलिए!

नोड जेएस

नए ईएस 6 मानक के आगमन के साथ, जावास्क्रिप्ट की लोकप्रियता में स्पष्ट रूप से वृद्धि हुई है, जैसा कि 2017 के लिए गिटहब पर पुल अनुरोधों की संख्या पर समान आँकड़ों से स्पष्ट है, जहां जेएस पहला स्थान लेता है।

JS ड्राइवरों में से एक Node JS था, जो V8 इंजन (जावास्क्रिप्ट को मशीन कोड में अनुवाद करना) पर आधारित एक सॉफ्टवेयर प्लेटफॉर्म है और एक उच्च-विशिष्ट भाषा से जावास्क्रिप्ट को सामान्य-प्रयोजन की भाषा में परिवर्तित करता है। कई लोग नोड जेएस को "सर्वर-साइड" जावास्क्रिप्ट कहते हैं, लेकिन यहां "सर्वर" के बजाय "सर्वर" की परिभाषा अधिक उपयुक्त है। उदाहरण के लिए, नोड जेएस का एक बहुत समृद्ध वातावरण है, जिसमें एनपीएम नामक अपना स्वयं का पैकेज प्रबंधक भी शामिल है, जिसे आप अपनी मशीन पर सुरक्षित रूप से चला सकते हैं (रिपॉजिटरी npmjs.com पर उपलब्ध है)। और यह एकमात्र पैकेज मैनेजर नहीं है, अन्य हैं। कॉन्फ़िगरेशन फ़ाइल package.json है और यह अनुमान लगाना आसान है कि यह JSON प्रारूप में कॉन्फ़िगर किया गया है।

नोड जेएस की शुरूआत के भाग के रूप में, उपयोगकर्ताओं को निम्नलिखित चरणों को पूरा करने के लिए कहा गया था:

• NodeJS को आधिकारिक साइट से डाउनलोड करें njjs.org/en/ ;
• कंप्यूटर पर इंस्टॉल करें और संस्करण की जांच करें;
• सुनिश्चित करें कि नोड -v कंसोल में चल रहा है।

अगला कदम पहला नोड जेएस परियोजना का निर्माण है। आप इसे दो तरह से कर सकते हैं:

• npm init कमांड (एंटर दबाकर सब कुछ से सहमत होना जारी);
• GitHub पर लिंक से रिपॉजिटरी डाउनलोड करने और git चेकआउट 0 कमांड को शुरू करने से।

अगला कदम एक्सप्रेस जेएस को जानना है।

एक्सप्रेस जे.एस.

एक्सप्रेस जेएस नोड जेएस वातावरण के लिए एक लोकप्रिय वेब सर्वर है। पायथन के संदर्भ में, यह Django की तरह कुछ है, केवल वहां, वास्तव में, REST विधियों के अलावा कुछ भी नहीं है। एक्सप्रेस JS RSON सेवाओं को बनाने के लिए एकदम सही है जो JSON को स्वीकार करते हैं और भेजते हैं, लेकिन सामान्य तौर पर यह काफी तपस्वी है, इसलिए आपको जो कुछ भी चाहिए उसे स्वीकार किया जाता है, जैसा कि वे कहते हैं, "खराब"। वैसे, इसके आधार पर अन्य वेब सर्वर भी बनाए जाते हैं। इस मामले में, आपको यह समझने की आवश्यकता है कि एक्सप्रेस एक मध्यवर्ती लिंक (मिडलवेयर) की तरह है, जिसे अभी भी कॉन्फ़िगर करने और तर्क से भरने की आवश्यकता है।
वेबिनार के हिस्से के रूप में एक्सप्रेस जेएस को एनपीवी इंस्टॉल एक्सप्रेस कमांड का उपयोग करके -save स्विच के अतिरिक्त के साथ स्थापित किया गया था। आप स्पेलिंग npm इंस्टाल के साथ एक git (git चेकआउट 1) में भी देख सकते हैं। नतीजतन, नोड_मॉड्यूल्स / फ़ोल्डर बनाया गया था, और पैकेज की सामग्री बदल दी गई थी। जेसन बदल गया (संबंधित निर्भरताएं प्रकट हुईं)।

प्रारंभिक कार्य के बाद, सर्वर को स्वयं लिखने का समय था:

1. प्रोजेक्ट रूट में /server.js फ़ाइल का निर्माण।
2. इसमें कुछ खास कोड जावास्क्रिप्ट में लिखे गए हैं। इस लिपि का उद्देश्य है:

- "रहस्यमय" नोड_मॉडल / से एक्सप्रेस प्राप्त करना;
- URL / के लिए एक हैंडलर जोड़ना;
- लॉन्च नोड JS (नोड server.js या npm स्टार्ट कमांड का उपयोग करके)।

आप टैग नंबर 2 (गिट चेकआउट 2) पर भी जांच कर सकते हैं।

जेएस, ईएस 6 और ट्रांसपिलिंग

जैसा कि पहले उल्लेख किया गया है, ईएस 6 वर्तमान जेएस मानक है। यह ऐसी विशेषताओं का एक समूह है जो किसी भी ब्राउज़र द्वारा पूरी तरह से समर्थित नहीं है (केवल सेट का हिस्सा समर्थित है)। नतीजतन, सवाल उठता है: क्या होगा अगर हम आधुनिक ES6 पर लिखना चाहते हैं, और केवल ES5.1 ब्राउज़रों में समर्थित है? यहाँ बचाव के लिए ट्रांसप्लिंग आता है। उनका विचार इस प्रकार है:

1. हमारे पास ईएस 6 में लिखा कोड है;
2. हम इसे संकलित करते हैं (ES6 को ES5.1 में बदल दिया जाता है);
3. परिणामी JS-ku को ब्राउज़र पृष्ठों पर रखा जा सकता है।

परिणामस्वरूप, न केवल ES6, बल्कि विभिन्न बोलियों और एक्सटेंशन का उपयोग करना संभव हो जाता है, जिससे जेएस की शक्ति बढ़ जाती है, उदाहरण के लिए:

• "टाइप" जावास्क्रिप्ट टाइपस्क्रिप्ट (टीएस);
• JSX - JS (प्रतिक्रिया रूपरेखा) में XHTML;
• प्रवाह - स्थिर प्रकार चेकर।

सबसे लोकप्रिय और शक्तिशाली ट्रांसपिलिंग में से एक बबेल है। यह वह था जिसका उपयोग खुले पाठ की समस्याओं को हल करने के लिए किया गया था।

विधानसभा लाभ:

• आप एक बंडल में सभी जेएस फाइलें एकत्र कर सकते हैं;
• बंडलों को छोटा और बाधित किया जा सकता है;
• आप एक साथ LESS-> CSS आदि चला सकते हैं।

Webpack

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

एक उदाहरण के लिए, webpack.config.js को वेबिनार श्रोताओं को दिखाया गया था और फ़ाइल की प्रत्येक पंक्ति को पूरी तरह से शब्दावली समझने के लिए विस्तार से जांच की गई थी।

अगला कदम पूर्व-कॉन्फ़िगर किए गए रिएक्ट और वेबपैक (npx न्यूनतम-प्रतिक्रिया क्लाइंट या आलसी लोगों के लिए git चेकआउट 3 कमांड) के साथ एक क्लाइंट बनाना है। उसके बाद, आप इस तरह से बनाए गए cd क्लाइंट / फ़ोल्डर में जा सकते हैं और webpack.config.js फ़ाइल खोल सकते हैं, जिसका एक टुकड़ा थोड़ा पहले दिखाया गया था।

प्रतिक्रिया

धीरे-धीरे, रिएक्ट से परिचित होने का समय आ गया - उपयोगकर्ता इंटरफ़ेस विकसित करने के लिए एक खुला स्रोत जावास्क्रिप्ट पुस्तकालय।

पहली बार रिएक्ट और उसके वातावरण में एक "सॉफ्ट" विसर्जन के लिए, छात्रों को क्लाइंट / src / index.js खोलने के लिए कहा गया और, अगर कुछ नहीं हुआ, तो क्लाइंट / src / घटक / app.js. खोलें।
प्रतिक्रिया का मूल JSX है। यह JS और XHTML की JS में लिखी गई बोली है। इस तथ्य के बावजूद कि रिएक्ट का उपयोग जेएसएक्स के बिना किया जा सकता है, जेएसएक्स में इसकी सारी शक्ति ठीक है। जैसा कि रिएक्ट के लिए है, यह एक घटक दृष्टिकोण के आधार पर हैकर्नून के अनुसार सबसे लोकप्रिय रूपरेखाओं में से एक है। इसमें बड़ी संख्या में सहायता पैकेज और एक विशाल बुनियादी ढांचा है। आवेदन स्वयं घटकों का एक सेट है जिसमें उनके मार्कअप और व्यवहार होते हैं।

प्रतिक्रिया सुविधाएँ:

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

रिएक्ट से परिचित होने के बाद, वेबिनार का व्यावहारिक हिस्सा जारी रहा, जिसके परिणामस्वरूप निम्नलिखित चरणों का पालन किया गया:

1. क्लाइंट फ़ोल्डर में लॉन्च वेबपैक (क्लाइंट / एनपीएम रन देव);
2. शिक्षक के निर्देशों के अनुसार या git चेकआउट 4 के माध्यम से अपना स्वयं का सरल घटक लिखना (वेबपैक को रोका नहीं जा सकता)।

इसके बाद, छात्रों को प्रॉपर ऑब्जेक्ट्स का उपयोग करने और एक टाइपोडायनामिक रेंडरिंग करने के लिए कहा गया (git checkout 5)।
सहारा की बारीकियों:

• घटकों के गुण होते हैं
• आप न केवल तार, बल्कि वस्तुओं को भी स्थानांतरित कर सकते हैं;
• आदर्श रूप से, प्रतिक्रिया घटक लाइन पर संचार हमेशा प्रॉप्स पर आधारित होता है।

व्यावहारिक प्रशिक्षण के अंतिम चरण में, बैकएंड और वेब सर्वर जुड़े थे (git checkout 6)।

अंत

आपके ध्यान के लिए धन्यवाद और हमेशा की तरह हम आपकी टिप्पणियों और सुझावों की प्रतीक्षा कर रहे हैं।