तपाईंको फ्रन्ट-एन्ड सीपहरू सुधार गर्न 9 थप परियोजनाहरू

परिचय

चाहे तपाईं प्रोग्रामिङमा नयाँ हुनुहुन्छ वा एक अनुभवी विकासकर्ता, नयाँ अवधारणाहरू र भाषाहरू/ढाँचाहरू सिक्नु यस उद्योगमा प्रचलनहरूसँग रहन आवश्यक छ।

उदाहरणका लागि, प्रतिक्रियालाई लिनुहोस्, जुन फेसबुकले चार वर्षअघि मात्र खुला स्रोत खोलेको थियो र संसारभरिका जाभास्क्रिप्ट विकासकर्ताहरूको लागि पहिले नै नम्बर एक छनौट भएको छ।

Vue र Angular, अवश्य पनि, तिनीहरूको आफ्नै वैध प्रशंसक आधार पनि छ। र त्यसपछि त्यहाँ Svelte र अन्य विश्वव्यापी फ्रेमवर्कहरू जस्तै Next.js वा Nuxt.js छन्। र Gatsby, र Gridsome, र Quasar... र अधिक।

यदि तपाईं आफूलाई एक अनुभवी JavaScript विकासकर्ताको रूपमा प्रमाणित गर्न चाहनुहुन्छ भने, तपाईंसँग विभिन्न फ्रेमवर्क र पुस्तकालयहरूको साथमा कम्तिमा केही अनुभव हुनुपर्दछ - राम्रो पुरानो JS सँग काम गर्नुको अतिरिक्त।

तपाईंलाई २०२० मा फ्रन्ट-एन्ड मास्टर बन्न मद्दत गर्न, मैले नौवटा फरक परियोजनाहरू सँगै राखेको छु, प्रत्येकले फरक JavaScript ढाँचा र पुस्तकालयमा टेक स्ट्याकको रूपमा फोकस गर्दै तपाईंले आफ्नो पोर्टफोलियो बनाउन र थप्न सक्नुहुन्छ। याद गर्नुहोस् कि तपाईलाई वास्तवमा चीजहरू सिर्जना गर्नु भन्दा बढि मद्दत गर्दैन, त्यसैले अगाडि बढ्नुहोस्, आफ्नो दिमाग प्रयोग गर्नुहोस् र यसलाई बनाउनुहोस्

लेख एडिसन सफ्टवेयरको समर्थनमा अनुवाद गरिएको थियो, जुन बहु-ब्रान्ड स्टोरहरूको लागि भर्चुअल फिटिङ कोठाहरू बनाउँछर परीक्षण सफ्टवेयर.

प्रतिक्रिया प्रयोग गरेर चलचित्र खोज एप (हुकको साथ)

तपाईंले सुरु गर्न सक्नुहुने पहिलो कुरा भनेको प्रतिक्रिया प्रयोग गरेर चलचित्र खोज एप सिर्जना गर्नु हो। तल अन्तिम आवेदन कस्तो देखिनेछ को एक छवि छ:

तपाइँ के सिक्नुहुनेछ
यो एप निर्माण गरेर, तपाईंले अपेक्षाकृत नयाँ Hooks API प्रयोग गरेर आफ्नो React कौशल सुधार गर्नुहुनेछ। उदाहरण परियोजनाले प्रतिक्रिया कम्पोनेन्टहरू, धेरै हुकहरू, एक बाह्य API, र निश्चित रूपमा केही CSS स्टाइल प्रयोग गर्दछ।

टेक स्ट्याक र सुविधाहरू

• हुकहरूसँग प्रतिक्रिया गर्नुहोस्
• सिर्जना-प्रतिक्रिया-अनुप्रयोग
• JSX
• CSS

कुनै पनि कक्षाहरू प्रयोग नगरिकन, यी परियोजनाहरूले तपाईंलाई कार्यात्मक प्रतिक्रियामा उत्तम प्रविष्टि बिन्दु दिन्छ र निश्चित रूपमा २०२० मा तपाईंलाई मद्दत गर्नेछ। तपाईं फेला पार्न सक्नुहुन्छ उदाहरण परियोजना यहाँ। निर्देशनहरू पालना गर्नुहोस् वा यसलाई आफ्नै बनाउनुहोस्।

Vue सँग च्याट एप

तपाइँको लागि अर्को उत्कृष्ट परियोजना मेरो मनपर्ने JavaScript पुस्तकालय प्रयोग गरेर च्याट एप सिर्जना गर्नु हो: VueJS। अनुप्रयोग यस्तो केहि देखिनेछ:

तपाइँ के सिक्नुहुनेछ
यस ट्यूटोरियलमा, तपाईंले स्क्र्याचबाट Vue एप कसरी बनाउने भन्ने सिक्नुहुनेछ - कम्पोनेन्टहरू सिर्जना गर्ने, स्थिति ह्यान्डल गर्ने, मार्गहरू सिर्जना गर्ने, तेस्रो-पक्ष सेवाहरूमा जडान गर्ने, र प्रमाणीकरणलाई ह्यान्डल गर्ने।

टेक स्ट्याक र सुविधाहरू

• Vue
• भ्वेक्स
• भ्यू राउटर
• CLI दृश्य
• पुशर
• CSS

यो Vue को साथ सुरु गर्न वा 2020 मा विकासमा जानको लागि तपाइँको अवस्थित कौशल सुधार गर्न को लागी एक साँच्चै ठूलो परियोजना हो। तपाईं फेला पार्न सक्नुहुन्छ यहाँ ट्यूटोरियल.

Angular 8 संग सुन्दर मौसम एप

यो उदाहरणले तपाईंलाई Angular 8 प्रयोग गरी सुन्दर मौसम एप सिर्जना गर्न मद्दत गर्नेछ:

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

टेक स्ट्याक र सुविधाहरू

• कोणीय २
• Firebase
• सर्भर साइड रेन्डरिङ
• ग्रिड र फ्लेक्सबक्सको साथ CSS
• मोबाइल अनुकूल र अनुकूलन क्षमता
• गाढा मोड
• सुन्दर इन्टरफेस

यो सबै-समावेश परियोजनाको बारेमा मलाई साँच्चिकै मनपर्ने कुरा यो हो कि तपाईले चीजहरू एक्लोपनमा अध्ययन गर्नुहुन्न। यसको सट्टा, तपाइँ सम्पूर्ण विकास प्रक्रिया सिक्नुहुन्छ, डिजाइन देखि अन्तिम तैनाती सम्म।

Svelte प्रयोग गरेर गर्न को लागी अनुप्रयोग

Svelte कम्पोनेन्ट-आधारित दृष्टिकोणमा नयाँ बच्चा जस्तै छ - कम्तिमा प्रतिक्रिया, Vue र Angular जस्तै। र यो २०२० को लागि सबैभन्दा लोकप्रिय नयाँ उत्पादनहरू मध्ये एक हो।

गर्नका लागि एपहरू सबै भन्दा तातो विषय होइनन्, तर यसले वास्तवमै तपाइँको Svelte कौशललाई सुधार्न मद्दत गर्नेछ। यो यस्तो देखिनेछ:

तपाइँ के सिक्नुहुनेछ
यस ट्यूटोरियलले तपाइँलाई Svelte 3 को प्रयोग गरेर कसरी एप सिर्जना गर्ने भनेर देखाउनेछ, सुरु देखि अन्त्य सम्म। तपाईंले कम्पोनेन्टहरू, स्टाइलिङ र घटना ह्यान्डलरहरू प्रयोग गर्नुहुनेछ

टेक स्ट्याक र सुविधाहरू

• Svelte 3
• अवयव
• CSS को साथ स्टाइल
• ES 6 वाक्य रचना

त्यहाँ धेरै राम्रो Svelte स्टार्टर परियोजनाहरू छैनन्, त्यसैले मैले फेला पारे यो सुरु गर्न को लागी एक राम्रो विकल्प हो.

Next.js प्रयोग गरेर ई-वाणिज्य एप

Next.js प्रतिक्रिया अनुप्रयोगहरू निर्माण गर्नको लागि सबैभन्दा लोकप्रिय फ्रेमवर्क हो जसले सर्भर-साइड रेन्डरिङलाई बाकसमा समर्थन गर्दछ।

यस परियोजनाले तपाइँलाई यो जस्तो देखिने ई-वाणिज्य अनुप्रयोग कसरी सिर्जना गर्ने भनेर देखाउनेछ:

तपाइँ के सिक्नुहुनेछ
यस परियोजनामा, तपाइँ कसरी Next.js को साथ विकास गर्ने सिक्नुहुनेछ — नयाँ पृष्ठहरू र कम्पोनेन्टहरू सिर्जना गर्नुहोस्, डेटा निकाल्नुहोस्, र शैली र अर्को अनुप्रयोग प्रयोग गर्नुहोस्।

टेक स्ट्याक र सुविधाहरू

• Next.js
• अवयव र पृष्ठहरू
• डाटा नमूना
• शैलीकरण
• परियोजना परिनियोजन
• SSR र SPA

नयाँ कुरा सिक्नको लागि इ-कमर्स एप जस्तै वास्तविक संसारको उदाहरण पाउनु सधैं राम्रो हुन्छ। तिमी सक्छौ यहाँ ट्यूटोरियल फेला पार्नुहोस्.

Nuxt.js को साथ पूर्ण बहुभाषिक ब्लग

Nuxt.js Vue का लागि हो, Next.js प्रतिक्रियाको लागि के हो: सर्भर-साइड रेन्डरिङ र एकल-पृष्ठ अनुप्रयोगहरूको शक्ति संयोजनको लागि उत्कृष्ट फ्रेमवर्क।
तपाईंले सिर्जना गर्न सक्ने अन्तिम अनुप्रयोग यस्तो देखिन्छ:

तपाइँ के सिक्नुहुनेछ

यस नमूना परियोजनामा, तपाइँ कसरी Nuxt.js प्रयोग गरेर एक पूर्ण वेबसाइट सिर्जना गर्ने सिक्नुहुनेछ, प्रारम्भिक सेटअप देखि अन्तिम डिप्लोयमेन्ट सम्म।

यसले Nuxt ले प्रस्ताव गर्ने धेरै उत्कृष्ट सुविधाहरूको फाइदा लिन्छ, जस्तै पृष्ठहरू र कम्पोनेन्टहरू, र SCSS सँग स्टाइल।

टेक स्ट्याक र सुविधाहरू

• Nuxt.js
• अवयव र पृष्ठहरू
• स्टोरीब्लक मोड्युल
• ह्यागफिस
• राज्य व्यवस्थापनको लागि Vuex
• स्टाइलको लागि SCSS
• Nuxt Middlewares

यो साँच्चै राम्रो परियोजना हो, जसमा धेरै उत्कृष्ट Nuxt.js सुविधाहरू समावेश छन्। म व्यक्तिगत रूपमा Nuxt सँग काम गर्न मन पराउँछु त्यसैले तपाईंले यसलाई प्रयास गर्नुपर्छ किनकि यसले तपाईंलाई उत्कृष्ट Vue विकासकर्ता पनि बनाउनेछ।

Gatsby संग ब्लग

Gatsby प्रतिक्रिया र GraphQL प्रयोग गरेर एक उत्कृष्ट स्थिर साइट जनरेटर हो। यस्तो छ परियोजनाको नतिजा:

तपाइँ के सिक्नुहुनेछ

यस ट्यूटोरियलमा, तपाईंले प्रतिक्रिया र GraphQL प्रयोग गरेर आफ्नै लेखहरू लेख्न प्रयोग गर्ने ब्लग सिर्जना गर्न Gatsby कसरी प्रयोग गर्ने भनेर सिक्नुहुनेछ।

टेक स्ट्याक र सुविधाहरू

• Gatsby
• प्रतिक्रिया
• ग्राफिक
• प्लगइनहरू र विषयवस्तुहरू
• MDX/मार्कडाउन
• बुटस्ट्र्याप सीएसएस
• टेम्प्लेट

यदि तपाइँ कहिल्यै ब्लग सुरु गर्न चाहनुहुन्छ भने, यो एक महान उदाहरण हो प्रतिक्रिया र GraphQL प्रयोग गरेर यसलाई कसरी बनाउने।

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

Gridsome को साथ ब्लग

Vue को लागि Gridsome... ठीक छ, हामीसँग यो पहिले नै Next/Nuxt सँग थियो।
तर ग्रिडसम र ग्याट्सबीको लागि पनि त्यस्तै हो। दुवैले आफ्नो डेटा तहको रूपमा GraphQL प्रयोग गर्छन्, तर Gridsome ले VueJS प्रयोग गर्दछ। यो पनि एक अद्भुत स्थिर साइट जनरेटर हो जसले तपाईंलाई उत्कृष्ट ब्लगहरू सिर्जना गर्न मद्दत गर्दछ:

तपाइँ के सिक्नुहुनेछ

यस परियोजनाले तपाइँलाई Gridsome, GraphQL र Markdown सँग सुरु गर्न सरल ब्लग कसरी सिर्जना गर्ने भनेर सिकाउनेछ। यसले Netlify मार्फत एप्लिकेसन कसरी डिप्लोय गर्ने भनेर पनि समेट्छ।

टेक स्ट्याक र सुविधाहरू

• ग्रिडसम
• Vue
• ग्राफिक
• छुट
• नेटलिफाई

यो पक्कै पनि सबैभन्दा व्यापक ट्यूटोरियल होइन, तर यसले Gridsome को आधारभूत अवधारणाहरू समेट्छ र मार्कडाउन एक राम्रो सुरूवात बिन्दु हुन सक्छ.

Quasar प्रयोग गरेर SoundCloud-जस्तो अडियो प्लेयर

Quasar अर्को Vue फ्रेमवर्क हो जुन मोबाइल अनुप्रयोगहरू सिर्जना गर्न प्रयोग गर्न सकिन्छ। यस परियोजनामा ​​तपाईंले अडियो प्लेयर अनुप्रयोग सिर्जना गर्नुहुनेछ, उदाहरणका लागि:

तपाइँ के सिक्नुहुनेछ

जबकि अन्य परियोजनाहरू मुख्यतया वेब अनुप्रयोगहरूमा केन्द्रित हुन्छन्, यसले तपाईंलाई Vue र Quasar फ्रेमवर्क प्रयोग गरेर मोबाइल अनुप्रयोग कसरी सिर्जना गर्ने भनेर देखाउनेछ।
तपाईंसँग पहिले नै एन्ड्रोइड स्टुडियो/एक्सकोड कन्फिगर गरिएको Cordova चलिरहेको हुनुपर्छ। यदि होइन भने, म्यानुअलसँग Quasar वेबसाइटको लिङ्क छ जहाँ तिनीहरूले तपाइँलाई सबै कुरा कसरी सेट अप गर्ने भनेर देखाउँछन्।

टेक स्ट्याक र सुविधाहरू

• Quasar
• Vue
• कोर्डोवा
• वेभसर्फर
• UI अवयवहरू

सानो परियोजना, मोबाइल अनुप्रयोगहरू सिर्जना गर्न Quasar को क्षमताहरू प्रदर्शन गर्दै।

स्रोत: www.habr.com