40 से अधिक उम्र, बिना किसी तकनीकी पृष्ठभूमि के, मैंने 2 सप्ताह में फ्रंटएंड फ्रेमवर्क इस तरह सीखा

पिछले दो हफ्तों में, मैंने बिना किसी पूर्व ज्ञान, अनुभव या मार्गदर्शन के HTML, CSS और जावास्क्रिप्ट की मूल बातें तेजी से सीखने के अपने व्यक्तिगत अनुभव साझा किए हैं। हालाँकि, यदि आपका लक्ष्य, मेरी तरह, एक पूर्ण-स्टैक वेब डेवलपर या अपने स्वयं के उत्पाद बनाने में सक्षम एक स्वतंत्र डेवलपर बनना है, तो इन तीन बुनियादी तकनीकी स्टैक में महारत हासिल करना पर्याप्त नहीं है। इसलिए, इस सप्ताह, मैं फ्रंटएंड फ्रेमवर्क की मूल बातें जल्दी से सीखने और सरल उत्पाद बनाने के लिए एक संपूर्ण शुरुआती मार्गदर्शिका साझा करूंगा। इस पोस्ट में शामिल सभी शिक्षण संसाधन निःशुल्क हैं!

अपनी पढ़ाई पूरी करने के बाद, मैंने इस वेब ऐप की तरह एक वेब ऐप बनाया। कृपया मुझे अपना स्वयं का प्रोजेक्ट परिनियोजित न करने, बल्कि संबंधित ट्यूटोरियल में प्रोजेक्ट उदाहरण का उपयोग करने के लिए क्षमा करें। यहाँ मेरा अपना भंडार है। वास्तव में, मैंने नमूना प्रोजेक्ट में 90% से अधिक प्रभावों को दोहराया है। तैनाती न करने के कारणों पर बाद में चर्चा की जाएगी। जैसा कि आप देख सकते हैं, यह एक अपेक्षाकृत पूर्ण परियोजना है, जिसमें फ्रंटएंड और बैकएंड संचार, फ्रंटएंड एनीमेशन डिज़ाइन, जीवनचक्र हुक डिज़ाइन, बैकएंड डेटा संरचना डिज़ाइन, राज्य प्रबंधन, मार्ग प्रबंधन इत्यादि जैसे कई पहलू शामिल हैं। मैंने इस प्रोजेक्ट में एक रिच टेक्स्ट एडिटर और टेलविंडसीएसएस को भी एकीकृत किया है, जिससे फ्रंटएंड बहुत पेशेवर दिखता है। अगर मैं फ्रंटएंड फ्रेमवर्क की बुनियादी बातों में जल्दी से महारत हासिल कर सकता हूं, तो आप क्यों नहीं कर सकते?

हमेशा की तरह, आइए सबसे पहले उन चक्करों के बारे में बात करें जो मैंने अपने फ्रंटएंड फ्रेमवर्क सीखने की प्रक्रिया के दौरान उठाए।

इतने सारे फ्रंटएंड फ्रेमवर्क के साथ, एक नौसिखिया को किसे चुनना चाहिए?

यह शुरुआती लोगों के लिए सबसे भ्रमित करने वाले प्रश्नों में से एक है, खासकर स्व-सिखाया शुरुआती लोगों के लिए। यह एक अत्यधिक वैयक्तिकृत प्रश्न है जिसमें आपके बुनियादी कौशल, सीखने की राह का चुनाव, सीखने की क्षमता, लघु और दीर्घकालिक लक्ष्य और यहां तक कि आप जिस देश और क्षेत्र में रहते हैं, वह भी शामिल है। इसलिए, एक मानक उत्तर देना मुश्किल है। इन सभी कारकों के बीच सबसे अच्छे विकल्प का मूल्यांकन करने के लिए शुरुआती लोगों के पास अक्सर ज्ञान और उद्योग के अनुभव की कमी होती है।

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

मैं इस मुद्दे के बारे में 10,000 शब्दों का लेख लिख सकता हूं, लेकिन आज की पोस्ट का मुद्दा यह नहीं है। तो यहाँ मेरा संक्षिप्त उत्तर है: यदि आप नौकरी की तलाश में हैं, तो रिएक्ट सीखना और इसे अपना मुख्य ढांचा बनाना सबसे अच्छा है। यदि आप मेरी तरह थोड़े पूर्व ज्ञान वाले नौसिखिया हैं और जल्दी से सीखना, जल्दी से निर्माण करना और भविष्य में स्वतंत्र रूप से उत्पाद विकसित करना चाहते हैं, तो आप Vue3 चुन सकते हैं। इसकी सीखने की प्रक्रिया अपेक्षाकृत आसान है और शुरुआती लोगों के लिए इसे शुरू करना आसान है।

क्या एक नौसिखिया के लिए सिर्फ एक रूपरेखा सीखना पर्याप्त है?

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

उदाहरण के लिए, मैं वर्तमान में अल्केमी यूनिवर्सिटी का सॉलिडिटी बूटकैंप सीख रहा हूं। इस पाठ्यक्रम के लिए आधिकारिक शर्त जावास्क्रिप्ट का बुनियादी ज्ञान है। मैंने सोचा कि मैं इस पाठ्यक्रम को आसानी से संभाल सकता हूँ क्योंकि मैंने न केवल HTML, CSS, JavaScript, बल्कि Vue3 भी सीखा है। हालाँकि, तीसरे सप्ताह में, मुझे अचानक पता चला कि सप्ताह का प्रोजेक्ट रिएक्ट के फ्रंटएंड के साथ बनाया गया था। मैं अवाक रह गया. सौभाग्य से, सप्ताह का प्रोजेक्ट सीधा था और इसमें केवल रिएक्ट की बुनियादी बातों की आवश्यकता थी। फिर भी, मुझे रिएक्ट की मूल बातें जल्दी से सीखने में आधा दिन लग गया, और मैंने अंततः सप्ताह का प्रोजेक्ट सफलतापूर्वक पूरा कर लिया। इसलिए, एक नौसिखिया के रूप में, अपनी आशाओं को कभी भी एक ही तकनीकी स्टैक पर न रखें। त्वरित सीखना और अनुकूलन क्षमता हमारे लिए आवश्यक कौशल हैं।

मेरी फ्रंट-एंड फ्रेमवर्क लर्निंग रणनीति

सरलता, व्यावहारिकता और लक्ष्य-अभिविन्यास

मैं केवल 2 सप्ताह में फ्रंट-एंड फ्रेमवर्क में विशेषज्ञ बनने की उम्मीद नहीं कर रहा हूं। रिएक्ट की तुलना में Vue3 अधिक शुरुआती-अनुकूल होने के बावजूद, इसका पारिस्थितिकी तंत्र समृद्ध और सामग्री से भरा है, जिसमें Vue3 के अपने, Vite, Vue राउटर, पिनिया और बहुत कुछ जैसे कई दस्तावेज़ शामिल हैं। यदि आप एक गुणवत्तापूर्ण फ्रंटएंड यूआई बनाना चाहते हैं, तो आपको एलिमेंट प्लस जैसी यूआई लाइब्रेरी का भी अध्ययन करना होगा। साथ ही, यदि हमारे उत्पाद में कुछ विशेष विशेषताएं हैं, तो हमें उस सुविधा के लिए विशेष रूप से कुछ लाइब्रेरी सीखने की जरूरत है, जैसे कि रिच टेक्स्ट एडिटर, वांगएडिटर, जिसे मैंने अपने वेब ऐप में एकीकृत किया है।

यह सब 2 सप्ताह में सीखना असंभव है, इसलिए मैंने Vue3 के मुख्य कार्यों को समझने और शुरुआत में एक पेशेवर दिखने वाला फ्रंटएंड बनाने का अपना लक्ष्य निर्धारित किया है।

Vue3 दस्तावेज़ीकरण पर ध्यान केंद्रित करना और अभ्यास की जटिलता को धीरे-धीरे बढ़ाना

जब से मैंने स्व-अध्ययन प्रोग्रामिंग शुरू की है, मैंने कई दस्तावेज़ों की समीक्षा की है, और मुझे यह स्वीकार करना होगा कि Vue3 सबसे शुरुआती-अनुकूल दस्तावेज़ों में से एक है। दस्तावेज़ीकरण के उत्कृष्ट लेखन ने मेरे लिए फ्रंट-एंड फ्रेमवर्क सीखना संभव बना दिया। इसलिए, किसी तीसरे पक्ष के ट्यूटोरियल की अनुशंसा करने के बजाय, मैं उन लोगों को दृढ़ता से सुझाव देता हूं जो Vue सीखना चाहते हैं कि वे Vue3 के स्वयं के दस्तावेज़ को अपनी मुख्य अध्ययन सामग्री बनाएं।

किसी रूपरेखा में महारत हासिल करने के लिए केवल अच्छी अध्ययन सामग्री होना ही पर्याप्त नहीं है; किसी ढांचे को समझने का सबसे अच्छा तरीका परियोजनाओं के निर्माण के लिए इसका उपयोग करना है। हालाँकि, इस लेख की शुरुआत में मैंने जिस वेब ऐप का प्रदर्शन किया था उसे बनाने का प्रयास करना एक अच्छा विचार नहीं हो सकता है। मैंने वास्तव में अपने अध्ययन के दौरान दो परियोजनाएं बनाईं, पहली बहुत सरल थी, मुख्य रूप से ढांचे का उपयोग करने, सामान्य प्रक्रिया और मुख्य भागों को समझने के लिए। दूसरा प्रोजेक्ट पहले का विस्तार है, जो यह सीखता है कि एक फ्रेमवर्क के पारिस्थितिकी तंत्र के भीतर एक वास्तविक वेब ऐप बनाने के लिए आवश्यक संसाधनों को कैसे खोजा जाए।

अध्ययन का समय और कार्यक्रम

1. मैंने संभावित शिक्षण संसाधनों को छांटने में आधा दिन बिताया, मुख्य रूप से कुछ दस्तावेज़ और दो सावधानीपूर्वक चयनित प्रोजेक्ट ट्यूटोरियल। दस्तावेज़ों में निम्नलिखित शामिल हैं: Vue3 दस्तावेज़ीकरण , Vite दस्तावेज़ीकरण , Vue राउटर दस्तावेज़ीकरण , Axios दस्तावेज़ीकरण , एलिमेंट+ दस्तावेज़ीकरण , और पिनिया दस्तावेज़ीकरण । इनमें Vue3 दस्तावेज़ीकरण सबसे महत्वपूर्ण है।

   
   

2. फिर, मैंने अधिकांश Vue दस्तावेज़ पढ़ने में लगभग साढ़े तीन दिन बिताए। ध्यान बुनियादी बातों पर है, और एक शुरुआत के रूप में भी, मैं गारंटी देता हूं कि आप इस भाग को बिना किसी कठिनाई के पूरा कर सकते हैं। हालाँकि, जैसे-जैसे मैं बाद के भागों तक पहुँचा, कुछ सामग्री धीरे-धीरे कम स्पष्ट होती गई। शुरुआती लोगों के लिए यह सामान्य है, और यह ठीक भी है। अभी जो हिस्से मुझे समझ नहीं आ रहे थे, मैंने उन्हें नोट कर लिया और आगे बढ़ गया। कुछ हिस्सों, जैसे सर्वोत्तम अभ्यास, टाइपस्क्रिप्ट और उन्नत विषय, मैंने पूरी तरह से छोड़ने का फैसला किया। संक्षेप में, यदि आप केवल सबसे आवश्यक और बुनियादी हिस्सों पर ध्यान केंद्रित करते हैं, तो साढ़े तीन दिन पर्याप्त समय है। मैं जल्दी सीखने वाला नहीं हूं और मेरी बुनियादी बातें कमजोर थीं, शायद आपको उतने समय की आवश्यकता नहीं होगी।

   
   

3. अगले डेढ़ दिन में, मैंने ट्रैवर्सी मीडिया के एक क्लासिक मुफ्त ट्यूटोरियल का पालन किया और एक छोटा प्रोजेक्ट - एक टास्क ट्रैकर बनाया। मैं यहां विशेष रूप से ब्रैड की शिक्षण शैली के बारे में बात करना चाहता हूं। वह निश्चित रूप से एक महान व्यक्ति हैं, जिन्हें कई स्वयं-सीखने वालों द्वारा प्रोग्रामिंग का गॉडफादर माना जाता है। जब भी मैं उनके पाठ्यक्रम देखता हूं, मुझे बहुत कुछ सीखने को मिलता है। वह एक प्रौद्योगिकी स्टैक के भीतर सीखने के लिए आवश्यक सभी पहलुओं को पूरी तरह से प्रदर्शित करने के लिए एक छोटी परियोजना का उपयोग करने में बहुत अच्छा है। ** लेकिन एक नवागंतुक के रूप में, आपको एक बात पर ध्यान देना होगा, बिना किसी आधार के उसकी कक्षाएं न सुनें। ** क्योंकि ब्रैड की शिक्षण शैली बहुत संक्षिप्त और सुरुचिपूर्ण है। यदि आपके पास कोई बुनियादी बातें नहीं हैं, तो आप उसकी गति के साथ तालमेल नहीं बिठा पाएंगे। इसलिए, मैंने जानबूझकर इस छोटे प्रोजेक्ट ट्यूटोरियल को अपने सीखने के पहले चरण में नहीं, बल्कि दूसरे चरण में निर्धारित किया है।

   
   

4. यदि आपने गंभीरता से उनके ट्यूटोरियल का अनुसरण किया है, तो मेरा मानना है कि आपको एक फ्रेमवर्क के साथ फ्रंट-एंड बनाने की भावना मिली है, लेकिन साथ ही, आपके पास और भी प्रश्न हैं। मैं ऐसा ही था, मैं वाइट, व्यू राउटर, एक्सियोस और पिनिया के दस्तावेजों को जल्दी से ब्राउज़ करने के लिए इंतजार नहीं कर सकता था। इस बार मैंने केवल डेढ़ दिन बिताया। क्योंकि मैं पहले से ही मोटे तौर पर जानता हूं कि vue3 प्रोजेक्ट बनाने के लिए उपरोक्त प्रौद्योगिकी स्टैक के बुनियादी ज्ञान की क्या आवश्यकता है, मैं इन सामग्रियों पर ध्यान केंद्रित करता हूं। और अन्य अपेक्षाकृत जटिल लेकिन आमतौर पर उपयोग नहीं की जाने वाली सामग्री, मैंने बस तुरंत ब्राउज़ कर ली। यदि आप इसे एक बार में नहीं समझ पाते हैं, तो इसे छोड़ दें।

   
   

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

   
   

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

• इसका मुख्य नुकसान यह है कि यह दो साल पहले का ट्यूटोरियल है, इसलिए अनिवार्य रूप से कुछ प्रौद्योगिकी स्टैक को अपग्रेड किया गया है। उदाहरण के लिए, ट्यूटोरियल में उपयोग किया गया व्यू-क्ली अब रखरखाव की स्थिति में है, मैंने निर्माण करते समय वाइट का उपयोग किया था। एक अन्य उदाहरण यह है कि ट्यूटोरियल में उपयोग किए गए रिच टेक्स्ट एडिटर को लंबे समय से अपडेट नहीं किया गया है, मैंने वांगएडिटर का उपयोग किया है जो हल्का भी है लेकिन इसका रखरखाव हालिया है और निर्माण करते समय vue3 के साथ बेहतर एकीकृत होता है।

  
  

6. इस ट्यूटोरियल का बैकएंड बनाने के लिए फायरबेस का उपयोग करता है, हालांकि यह जटिल नहीं है, लेकिन यह हमारी अपनी अभ्यास आवश्यकताओं को पूरा नहीं कर सकता है। उदाहरण के लिए, मेरा आदर्श बैकएंड node.js+express+mongodb+mongoose के साथ निर्मित एक रेस्टफुल एपीआई है। इसलिए, मैंने फायरबेस बैकएंड बनाने के लिए ट्यूटोरियल का पालन नहीं किया, लेकिन रेस्टफुल एपीआई के व्यवहार को अनुकरण करने के लिए अस्थायी रूप से json-server के साथ एक वर्चुअल बैकएंड बनाया। यही कारण है कि मैंने अपना प्रोजेक्ट ऑनलाइन तैनात नहीं किया। क्योंकि जीथब पेज और वर्सेल दोनों केवल स्थिर वेब पेजों को तैनात कर सकते हैं, और जेसन-सर्वर का टर्मिनल केवल स्थानीय रूप से चल सकता है, इसे उन पर तैनात नहीं किया जा सकता है। आप इस ट्यूटोरियल का अनुसरण करते समय अपनी आवश्यकताओं के अनुसार चयन कर सकते हैं, या आप इसके जैसा फायरबेस बैकएंड बना सकते हैं।

   
   

7. यह ट्यूटोरियल साढ़े छह घंटे तक चलता है। आम तौर पर, यदि आप प्रतिदिन एक घंटे की सामग्री का अध्ययन करते हैं, तो छह दिन पर्याप्त से अधिक होने चाहिए। चूँकि मैं बड़ा हूँ, मेरी सीखने की गति धीमी है। आप छह दिनों से भी कम समय में निर्माण पूरा करने में सक्षम हो सकते हैं। आखिरी दिन, मैंने अभी भी हमेशा की तरह पिछली सामग्री की समीक्षा की, सबसे महत्वपूर्ण बात यह है कि सीखने के दो सप्ताह के दौरान मेरे द्वारा बनाए गए नोट्स को व्यवस्थित करना और एक अच्छी चीट शीट बनाना। क्योंकि मुझे यह कार्रवाई महत्वपूर्ण लगी. अक्सर, सीखने के एक महीने बाद, जब मैं अपना कोड दोबारा खोलता हूं, तो ऐसे कई हिस्से होते हैं जो मुझे समझ में नहीं आते या याद नहीं होते। इस बिंदु पर, यदि आप एक नया प्रोजेक्ट बनाना चाहते हैं, तो नोट्स और चीट शीट अक्सर काम में आ सकते हैं।

कुछ अंतिम सलाह:

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

   
   

2. फ्रंट-एंड फ्रेमवर्क सीखना कुछ हद तक जावास्क्रिप्ट सीखने के समान है जिसके बारे में हमने पिछले सप्ताह बात की थी, दो सप्ताह में सब कुछ पूरा करने की उम्मीद न करें। इसके पारिस्थितिकी तंत्र में बहुत सारी सामग्री है, और इसे लगातार उन्नत किया जा रहा है। उल्लेख करने की आवश्यकता नहीं है, जैसा कि हमने पहले चर्चा की थी, केवल एक ढांचे को सीखने के साथ सभी पहलुओं पर विजय प्राप्त करने की उम्मीद करना अवास्तविक है, इसलिए यह एक सतत सीखने की प्रक्रिया है। हमें इस सबका आनंद लेना चाहिए और इसे बोझ के रूप में नहीं देखना चाहिए।

   
   

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

   
   

#वेबडेवलपमेंट #फ्रंटएंडडेवलपमेंट #VueJS #जावास्क्रिप्ट #LearningToCode #CodeNewbie #TraversyMedia #SelfImprovement #SelfTaught #CodingResources #React