? सभी नए ग्राहकों और लौटने वाले घटक कोडर्स का स्वागत है! मैं 10 भाग की एक नई ट्यूटोरियल शृंखला शुरू कर रहा हूँ। जबकि मेरे अन्य ट्यूटोरियल्स ने पोकेमॉन डांस पार्टियों, रेट्रो एक्सट्रूडेड टेक्स्ट एडिटर्स, या वीडियो गेम गैलरी जैसे विशिष्ट, मजेदार छोटे ऐप्स बनाने के लिए मॉड्यूलो.जेएस का उपयोग किया है, यह ट्यूटोरियल श्रृंखला बुनियादी सिद्धांतों पर आधारित होगी, जो वर्ग एक से शुरू होगी: क्या एक वेब घटक है?

HTML और CSS के बाद अगला कदम

क्या आपने अभी HTML और CSS की मूल बातें सीखी हैं, और अगला कदम उठाने के बारे में उत्सुक हैं, और बड़े और अधिक संपूर्ण वेब एप्लिकेशन बनाना चाहते हैं? या, क्या आप पहले से ही एक वेब डेवलपर या जावास्क्रिप्ट समर्थक हैं, और बहुत अधिक ब्लोट, टूलींग या अतिरिक्त निर्भरता के बिना त्वरित और हल्के वेब ऐप्स बनाना चाहते हैं?

यदि हां, तो वेब घटक आपके लिए हैं! वे आपको कोड के पुन: प्रयोज्य भाग बनाने देते हैं। इस ट्यूटोरियल को पढ़कर, आप सीखेंगे कि दोहराए जाने वाले, बनाए रखने में मुश्किल HTML और CSS को कैसे ठीक किया जाए। यह केवल न्यूनतम टूल और लाइब्रेरी का उपयोग करता है, जिसका अर्थ है कि आपको Node.js, NPM, या बड़े पैमाने पर node_modules की आवश्यकता नहीं होगी। यह आपको आधुनिक फ्रंटएंड वेब विकास में अपने कौशल को निखारने की सुविधा भी देता है: इस श्रृंखला के भविष्य के ट्यूटोरियल में, आप slots, shadowDOM, props जैसी अवधारणाएं सीखेंगे। , टेम्पलेटिंग, राज्य प्रबंधन, और भी बहुत कुछ! ये ऐसी अवधारणाएँ हैं जो अन्य लोकप्रिय ढाँचों का उपयोग करने के लिए हस्तांतरणीय हैं, और मॉड्यूलो का सरल, घोषणात्मक दृष्टिकोण जटिल सेटअप में फंसे बिना मूल अवधारणाओं को सीखने का एक अधिक आकर्षक तरीका हो सकता है।

मॉड्यूलो फ्रेमवर्क का परिचय

मोडुलो क्या है? मोडुलो एक मुफ्त सॉफ्टवेयर/ओपन सोर्स, जावास्क्रिप्ट में लिखा गया छोटा-लेकिन-शक्तिशाली वेब फ्रेमवर्क है। इसकी कोई निर्भरता नहीं है, और HTML सिंटैक्स का उपयोग करता है ताकि यह Node.js या संकलन की आवश्यकता के बिना, पेज लोड पर खुद को सेट कर सके। आप इसे एक सादे HTML "स्थैतिक साइट" में उपयोग कर सकते हैं (उदाहरण के लिए जब आप स्थिर वेब होस्ट पर लॉन्च करने के लिए निर्देशिका में HTML, CSS और अन्य स्थिर संपत्तियों को इकट्ठा करते हैं), या किसी अन्य मौजूदा वेब ऐप में। यह ट्यूटोरियल वेब कंपोनेंट बनाने के लिए मॉड्यूलो को एक टूल के रूप में उपयोग करने के बारे में है।

भाग 1 का परिचय

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

चरण 1: मोडुलो सहित

मोडुलो का उपयोग करने से पहले, हमें फ्रेमवर्क को शामिल करना होगा। संपूर्ण ढाँचा "Modulo.js" में समाहित है, एक फ़ाइल जिसमें जावास्क्रिप्ट की 2000-पंक्तियाँ हैं। इसका मतलब है कि मॉड्यूलो प्रोजेक्ट शुरू करने के लिए आपके ब्राउज़र और संपादक से परे वस्तुतः कोई निर्भरता नहीं चाहिए। तो, बस एक खाली HTML फ़ाइल खोलें और निम्नलिखित बहुत ही सरल स्टार्टर कोड के साथ आगे बढ़ें:

चरण 2: अपने पहले घटक को परिभाषित करना

अब जब हमने इसे शामिल कर लिया है, तो हम मोडुलो परिभाषाएं लिखना शुरू कर सकते हैं और सामान्य रूप से ढांचे का उपयोग कर सकते हैं। हम अपने पहले घटक को एक मॉड्यूलो परिभाषा बनाकर और उसके अंदर एक परिभाषा डालकर परिभाषित करते हैं, जैसा कि नीचे दिया गया है:

यह "टेम्पलेट" इस प्रकार हमारे घटक के लिए "टेम्पलेट" बन जाता है: हर बार जब हमारा घटक पृष्ठ पर दिखाई देता है, तो यह उसके अंदर दिए गए टेम्पलेट को प्रस्तुत करेगा।

चरण 3: अपने पहले घटक का उपयोग करना

एक बार परिभाषित होने के बाद, आप किसी घटक का नाम संदर्भित करके उसका उपयोग कर सकते हैं जैसे कि वह एक सादा HTML टैग हो:

इससे स्क्रीन पर निम्नलिखित दिखाई देगा:

हैलो मोडुलो विश्व!

ध्यान दें कि एक बार पंजीकृत होने के बाद, घटक कहीं भी जा सकते हैं जहां सादे HTML टैग जा सकते हैं, और सीएसएस के साथ भी उसी तरह स्टाइल किया जा सकता है। दूसरे शब्दों में, एक घटक बनाना बिल्कुल नए प्रकार के HTML टैग बनाने जैसा है, जिसका उपयोग कहीं भी किया जा सकता है, बिल्कुल

One time: 
Another time: 

Learning Modulo Part 1
Your first Web Component

    
One time: 
    
Another time: