تعارف
Независимо от того, являетесь ли вы новичком в программировании или уже опытным разработчиком, в этой отрасли изучение новых концепций и языков/фреймворков является обязательно чтобы успевать за трендами.
Возьмем, к примеру, React — код которого, Facebook открыл всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.
Vue и Angular, конечно же, также имеют свою законную базу поклонников. И еще есть Svelte и другие универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и многое другое.
Если вы хотите проявить себя как опытный разработчик JavaScript, у вас должен быть хотя бы некоторый опыт работы с различными фреймворками и библиотеками — помимо выполнения работы с хорошим старым JS.
Чтобы помочь вам стать мастером фронт-енда в 2020 году, я собрал девять различных проектов, каждый из которых был посвящен разным фреймворкам и библиотекам JavaScript в качестве технического стека, который вы можете создать и добавить в свое портфолио. Помните, что ничто не помогает вам больше, чем на практике создавать вещи, поэтому двигайтесь вперед, включите свой ум и сделайте это возможным
مضمون جو ترجمو EDISON سافٽ ويئر جي مدد سان ڪيو ويو، جيڪو ، انهي سان گڏوگڏ .
React استعمال ڪندي مووي سرچ ايپ (هڪس سان)
پهرين شيء جيڪا توهان شروع ڪري سگهو ٿا اهو آهي هڪ فلم سرچ ايپ ٺاهڻ ري ايڪٽ استعمال ڪندي. هيٺ ڏنل هڪ تصوير آهي جيڪا آخري ايپليڪيشن وانگر نظر ايندي:
توهان learnا سکندا
هن ايپ کي ٺاهڻ سان، توهان نسبتا نئين Hooks API استعمال ڪندي پنهنجي React صلاحيتن کي بهتر ڪندا. مثال پروجيڪٽ استعمال ڪري ٿو React اجزاء، گھڻا ٿلها، ھڪڙو خارجي API، ۽ يقينا ڪجھ سي ايس ايس اسٽائل.
ٽيڪنيڪل اسٽيڪ ۽ خاصيتون
- ٿلهن سان رد عمل
- ٺاهي-رد عمل-ايپ
- JSX
- ايس ايم ايس
بغير ڪنهن ڪلاس جي استعمال جي، اهي منصوبا توهان کي فنڪشنل ريڪٽ ۾ مڪمل داخلا پوائنٽ ڏين ٿا ۽ 2020 ۾ ضرور توهان جي مدد ڪندا. توهان ڳولي سگهو ٿا . هدايتن تي عمل ڪريو يا ان کي پنهنجو ٺاهيو.
Vue سان چيٽ ايپ
هڪ ٻيو وڏو منصوبو توهان لاءِ ڪرڻ آهي منهنجي پسنديده JavaScript لائبريري استعمال ڪندي چيٽ ايپ ٺاهڻ: VueJS. اپليڪيشن ڪجهه هن طرح نظر ايندي:
توهان learnا سکندا
هن سبق ۾، توهان سکندا ته ڪيئن هڪ Vue ايپ شروع کان ٺاهيو - اجزاء ٺاهڻ، رياست کي سنڀالڻ، رستا ٺاهڻ، ٽئين پارٽي جي خدمتن سان ڳنڍڻ، ۽ اڃا تائين تصديق ڪرڻ.
ٽيڪنيڪل اسٽيڪ ۽ خاصيتون
- وو
- ويڪس
- وي روٽر
- Vue CLI
- پusher
- ايس ايم ايس
هي واقعي هڪ عظيم منصوبو آهي شروع ڪرڻ لاءِ Vue سان يا توهان جي موجوده صلاحيتن کي بهتر بنائڻ لاءِ 2020 ۾ ترقي حاصل ڪرڻ لاءِ. توهان ڳولي سگهو ٿا .
Angular 8 سان خوبصورت موسم واري ايپ
هي مثال توهان کي Angular 8 استعمال ڪندي هڪ خوبصورت موسم ايپ ٺاهڻ ۾ مدد ڏيندو:
توهان learnا سکندا
هي پروجيڪٽ توهان کي سيکاريندو قابل قدر مهارتن ۾ ايپليڪيشنون ٺاهڻ ۾ شروع کان - ڊيزائن کان وٺي ڊولپمينٽ تائين، سڀني طريقي سان ڊيپلائيمينٽ لاءِ تيار ايپليڪيشن تائين.
ٽيڪنيڪل اسٽيڪ ۽ خاصيتون
- ڪنڊ 8
- باهه
- سرور طرف رينجرنگ
- CSS گرڊ ۽ Flexbox سان
- موبائل دوستانه ۽ موافقت
- اونداهي موڊ
- خوبصورت انٽرفيس
جيڪو مون کي واقعي پسند آهي هن سموري پراجيڪٽ بابت اهو آهي ته توهان شين کي اڪيلائي ۾ نه پڙهو. ان جي بدران، توهان مڪمل ترقي جي عمل کي سکو، ڊيزائن کان فائنل تائين.
Svelte استعمال ڪندي ڪرڻ لاءِ ايپليڪيشن
Svelte جزو جي بنياد تي نئين ٻار وانگر آهي - گهٽ ۾ گهٽ React، Vue ۽ Angular سان ملندڙ جلندڙ. ۽ هي 2020 لاءِ گرم ترين نئين شين مان هڪ آهي.
ڪرڻ لاءِ ائپس ضروري نه آهن ته سڀ کان وڌيڪ گرم موضوع هجن، پر اهو واقعي توهان جي مدد ڪندي توهان جي Svelte صلاحيتن کي وڌائڻ ۾. اهو هن طرح نظر ايندو:
توهان learnا سکندا
هي سبق توهان کي ڏيکاريندو ته ڪيئن Svelte 3 استعمال ڪندي ايپليڪيشن ٺاهي، شروع کان ختم ڪرڻ تائين. توھان استعمال ڪندا اجزاء، اسٽائل، ۽ ايونٽ ھينڊلر
ٽيڪنيڪل اسٽيڪ ۽ خاصيتون
- سڪل 3
- اجزاء
- CSS سان اسٽائلنگ
- ES 6 نحو
اتي ڪيترائي سٺا Svelte اسٽارٽر منصوبا نه آھن، تنھنڪري مون کي مليو .
Next.js استعمال ڪندي اي ڪامرس ايپ
Next.js React ايپليڪيشنن جي تعمير لاءِ تمام مشهور فريم ورڪ آهي جيڪي سرور-سائڊ رينڊرنگ کي باڪس کان ٻاهر جي مدد ڪن ٿيون.
هي پروجيڪٽ توهان کي ڏيکاريندو ته هڪ اي ڪامرس ايپليڪيشن ڪيئن ٺاهجي جيڪا هن وانگر نظر اچي ٿي:
توهان learnا سکندا
هن پروجيڪٽ ۾، توهان سکندا ته ڪيئن ترقي ڪجي Next.js سان- نوان صفحا ۽ جزا ٺاهيو، ڊيٽا ڪڍو، ۽ انداز ٺاهيو ۽ هڪ ايندڙ ايپليڪيشن کي ترتيب ڏيو.
ٽيڪنيڪل اسٽيڪ ۽ خاصيتون
- اڳيون
- اجزاء ۽ صفحا
- ڊيٽا نموني
- اسٽائلائيزيشن
- پروجيڪٽ لڳائڻ
- SSR ۽ SPA
اهو هميشه بهترين آهي حقيقي دنيا جو مثال جيئن هڪ اي ڪامرس ايپ ڪجهه نئين سکڻ لاءِ. توهان ڪري سگهو ٿا .
Nuxt.js سان مڪمل گهڻ لساني بلاگ
Nuxt.js Vue لاءِ آهي، React لاءِ ڇا آهي Next.js: سرور-سائڊ رينڊرنگ ۽ سنگل پيج ايپليڪيشنن جي طاقت کي گڏ ڪرڻ لاءِ هڪ بهترين فريم ورڪ
آخري ايپليڪيشن جيڪا توهان ٺاهي سگهو ٿا هن وانگر نظر ايندي:
توهان learnا سکندا
هن نموني پروجيڪٽ ۾، توهان سکندا ته ڪيئن ٺاهيو مڪمل ويب سائيٽ Nuxt.js استعمال ڪندي، شروعاتي سيٽ اپ کان فائنل ڊيپلائيشن تائين.
اهو فائدو وٺي ٿو ڪيترن ئي بهترين خاصيتن مان جيڪي Nuxt کي پيش ڪرڻو آهي، جهڙوڪ صفحا ۽ اجزاء، ۽ SCSS سان اسٽائل.
ٽيڪنيڪل اسٽيڪ ۽ خاصيتون
- نيٽ ورڪ
- اجزاء ۽ صفحا
- ڪهاڻي بلاڪ ماڊل
- هيگ مڇي
- رياست جي انتظام لاء Vuex
- اسٽائل لاء SCSS
- Nuxt Middlewares
، جنهن ۾ ڪيترائي عظيم Nuxt.js خاصيتون شامل آهن. مون کي ذاتي طور تي Nuxt سان ڪم ڪرڻ پسند آهي تنهنڪري توهان کي اها ڪوشش ڪرڻ گهرجي ڇو ته اهو توهان کي هڪ عظيم Vue ڊولپر پڻ بڻائيندو.
بلاگ گيٽسبي سان
Gatsby React ۽ GraphQL استعمال ڪندي هڪ بهترين جامد سائيٽ جنريٽر آهي. هن منصوبي جو نتيجو آهي:
توهان learnا سکندا
هن سبق ۾، توهان سکندا ته ڪيئن استعمال ڪجي گيٽسبي هڪ بلاگ ٺاهڻ لاءِ جيڪو توهان استعمال ڪندا پنهنجا مضمون لکڻ لاءِ React ۽ GraphQL استعمال ڪندي.
ٽيڪنيڪل اسٽيڪ ۽ خاصيتون
- گٽسبي
- تصديق ڪريو
- گرافڪ
- پلگ ان ۽ موضوع
- MDX / مارڪ ڊائون
- بوٽ اسٽريپ CSS
- نشانيون
جيڪڏهن توهان ڪڏهن به هڪ بلاگ شروع ڪرڻ چاهيو ٿا، React ۽ GraphQL استعمال ڪندي ان کي ڪيئن ٺاهيو.
مان اهو نه ٿو چوان ته ورڈپریس هڪ خراب انتخاب آهي، پر گيٽسبي سان توهان React استعمال ڪندي اعليٰ ڪارڪردگي واريون ويب سائيٽون ٺاهي سگهو ٿا - جيڪو هڪ شاندار ميلاپ آهي.
Gridsome سان بلاگ
Gridsome for Vue... ٺيڪ آهي، اسان وٽ اڳ ۾ ئي هي آهي Next/Nuxt.
پر اهو ساڳيو آهي Gridsome ۽ Gatsby لاءِ. ٻئي استعمال ڪن ٿا GraphQL انهن جي ڊيٽا پرت جي طور تي، پر Gridsome استعمال ڪري ٿو VueJS. هي پڻ هڪ شاندار جامد سائيٽ جنريٽر آهي جيڪو توهان جي مدد ڪندو عظيم بلاگ ٺاهڻ ۾:
توهان learnا سکندا
هي پروجيڪٽ توهان کي سيکاريندو ته ڪيئن ٺاهيو هڪ سادو بلاگ Gridsome، GraphQL ۽ Markdown سان شروع ڪرڻ لاءِ. اهو پڻ احاطو ڪري ٿو ته Netlify ذريعي ايپليڪيشن کي ڪيئن ترتيب ڏيڻ.
ٽيڪنيڪل اسٽيڪ ۽ خاصيتون
- سخت
- وو
- گرافڪ
- Markdown
- Netliify
هي يقيناً سڀ کان وڌيڪ جامع سبق نه آهي، پر اهو Gridsome جي بنيادي تصورن تي پکڙيل آهي ۽ .
Quasar استعمال ڪندي SoundCloud جهڙو آڊيو پليئر
Quasar هڪ ٻيو Vue فريم ورڪ آهي جيڪو موبائل ايپليڪيشن ٺاهڻ لاءِ استعمال ٿي سگهي ٿو. هن پروجيڪٽ ۾ توهان هڪ آڊيو پليئر ايپليڪيشن ٺاهيندا، مثال طور:
توهان learnا سکندا
جڏهن ته ٻيا منصوبا خاص طور تي ويب ايپليڪيشنن تي ڌيان ڏين ٿا، هي هڪ توهان کي ڏيکاريندو ته ڪيئن موبائل ايپليڪيشن ٺاهي وئي Vue ۽ Quasar فريم ورڪ استعمال ڪندي.
توهان کي اڳ ۾ ئي Android اسٽوڊيو / Xcode ترتيب سان Cordova هلائڻ گهرجي. جيڪڏهن نه، دستياب ۾ Quasar ويب سائيٽ جي لنڪ آهي جتي اهي توهان کي ڏيکاريندا آهن ته هر شي کي ڪيئن سيٽ ڪيو وڃي.
ٽيڪنيڪل اسٽيڪ ۽ خاصيتون
- قصر
- وو
- Cordova
- WaveSurfer
- UI اجزاء
، موبائيل ايپليڪيشن ٺاهڻ لاءِ Quasar جي صلاحيتن جو مظاهرو ڪندي.
جو ذريعو: www.habr.com