تعارف
Независимо от того, являетесь ли вы новичком в программировании или уже опытным разработчиком, в этой отрасли изучение новых концепций и языков/фреймворков является обязательно чтобы успевать за трендами.
Возьмем, к примеру, React — код которого, Facebook открыл всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.
Vue и Angular, конечно же, также имеют свою законную базу поклонников. И еще есть Svelte и другие универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и многое другое.
Если вы хотите проявить себя как опытный разработчик JavaScript, у вас должен быть хотя бы некоторый опыт работы с различными фреймворками и библиотеками — помимо выполнения работы с хорошим старым JS.
Чтобы помочь вам стать мастером фронт-енда в 2020 году, я собрал девять различных проектов, каждый из которых был посвящен разным фреймворкам и библиотекам JavaScript в качестве технического стека, который вы можете создать и добавить в свое портфолио. Помните, что ничто не помогает вам больше, чем на практике создавать вещи, поэтому двигайтесь вперед, включите свой ум и сделайте это возможным
مضمون کا ترجمہ EDISON سافٹ ویئر کے تعاون سے کیا گیا تھا، جو اور .
ری ایکٹ کا استعمال کرتے ہوئے مووی سرچ ایپ (ہکس کے ساتھ)
پہلی چیز جس کے ساتھ آپ شروع کر سکتے ہیں وہ ہے React کا استعمال کرتے ہوئے مووی سرچ ایپ بنانا۔ ذیل میں ایک تصویر دی گئی ہے کہ حتمی درخواست کیسی نظر آئے گی:
آپ کیا سیکھیں گے۔
اس ایپ کو بنا کر، آپ نسبتاً نئے Hooks API کا استعمال کر کے اپنی React کی مہارت کو بہتر بنائیں گے۔ مثال کے طور پر پروجیکٹ React اجزاء، بہت سے ہکس، ایک بیرونی API، اور یقیناً کچھ CSS اسٹائل کا استعمال کرتا ہے۔
ٹیک اسٹیک اور خصوصیات
- ہکس کے ساتھ رد عمل ظاہر کریں۔
- تخلیق-رد عمل-ایپ
- جے ایس ایکس
- CSS
بغیر کسی کلاس کا استعمال کیے، یہ پروجیکٹس آپ کو فنکشنل ری ایکٹ میں بہترین انٹری پوائنٹ فراہم کرتے ہیں اور 2020 میں یقینی طور پر آپ کی مدد کریں گے۔ آپ تلاش کر سکتے ہیں . ہدایات پر عمل کریں یا اسے اپنا بنائیں۔
Vue کے ساتھ چیٹ ایپ
آپ کے لیے ایک اور زبردست پروجیکٹ میری پسندیدہ JavaScript لائبریری کا استعمال کرتے ہوئے ایک چیٹ ایپ بنانا ہے: VueJS۔ ایپلیکیشن کچھ اس طرح نظر آئے گی:
آپ کیا سیکھیں گے۔
اس ٹیوٹوریل میں، آپ سیکھیں گے کہ شروع سے Vue ایپ کیسے بنائی جاتی ہے - اجزاء بنانا، حالت کو ہینڈل کرنا، راستے بنانا، فریق ثالث کی خدمات سے جڑنا، اور یہاں تک کہ تصدیق کو ہینڈل کرنا۔
ٹیک اسٹیک اور خصوصیات
- قول
- ویویکس
- ویو راؤٹر
- Vue CLI
- پاؤڈر
- CSS
Vue کے ساتھ شروع کرنے یا 2020 میں ترقی حاصل کرنے کے لیے اپنی موجودہ صلاحیتوں کو بہتر بنانے کے لیے یہ واقعی ایک بہت اچھا پروجیکٹ ہے۔ آپ تلاش کر سکتے ہیں .
کونیی 8 کے ساتھ موسم کی خوبصورت ایپ
یہ مثال آپ کو انگولر 8 کا استعمال کرتے ہوئے ایک خوبصورت موسمی ایپ بنانے میں مدد کرے گی۔
آپ کیا سیکھیں گے۔
یہ پروجیکٹ آپ کو شروع سے ایپلیکیشنز بنانے میں قابل قدر مہارتیں سکھائے گا - ڈیزائن سے لے کر ڈیولپمنٹ تک، تعیناتی کے لیے تیار ایپلیکیشن تک۔
ٹیک اسٹیک اور خصوصیات
- کونیی 8
- فائر بیس
- سرور سائیڈ رینڈرنگ
- گرڈ اور فلیکس باکس کے ساتھ سی ایس ایس
- موبائل دوستانہ اور موافقت
- ڈارک موڈ
- خوبصورت انٹرفیس
مجھے اس ہمہ جہت منصوبے کے بارے میں جو چیز واقعی پسند ہے وہ یہ ہے کہ آپ چیزوں کا تنہائی میں مطالعہ نہیں کرتے ہیں۔ اس کے بجائے، آپ ڈیزائن سے لے کر حتمی تعیناتی تک پورے ترقیاتی عمل کو سیکھتے ہیں۔
Svelte کا استعمال کرتے ہوئے ٹو ڈو ایپلیکیشن
Svelte اجزاء پر مبنی نقطہ نظر پر نئے بچے کی طرح ہے - کم از کم React، Vue اور Angular سے ملتا جلتا ہے۔ اور یہ 2020 کی سب سے مشہور نئی مصنوعات میں سے ایک ہے۔
ضروری نہیں کہ ٹو ڈو ایپس سب سے زیادہ گرم موضوع ہوں، لیکن یہ واقعی آپ کو اپنی Svelte مہارتوں کو بہتر بنانے میں مدد کرے گی۔ یہ اس طرح نظر آئے گا:
آپ کیا سیکھیں گے۔
یہ ٹیوٹوریل آپ کو دکھائے گا کہ شروع سے آخر تک Svelte 3 کا استعمال کرتے ہوئے ایک ایپلیکیشن کیسے بنائی جائے۔ آپ اجزاء، اسٹائلنگ اور ایونٹ ہینڈلرز استعمال کریں گے۔
ٹیک اسٹیک اور خصوصیات
- Svelte 3
- اجزاء
- سی ایس ایس کے ساتھ اسٹائلنگ
- ES 6 نحو
بہت سے اچھے Svelte سٹارٹر پروجیکٹس نہیں ہیں، تو میں نے پایا .
Next.js کا استعمال کرتے ہوئے ای کامرس ایپ
Next.js ری ایکٹ ایپلی کیشنز بنانے کا سب سے مشہور فریم ورک ہے جو سرور سائیڈ رینڈرنگ کو باکس کے باہر سپورٹ کرتا ہے۔
یہ پروجیکٹ آپ کو دکھائے گا کہ ای کامرس ایپلی کیشن کیسے بنائی جائے جو اس طرح نظر آئے:
آپ کیا سیکھیں گے۔
اس پروجیکٹ میں، آپ Next.js کے ساتھ ترقی کرنے کا طریقہ سیکھیں گے—نئے صفحات اور اجزاء بنائیں، ڈیٹا نکالیں، اور اسٹائل کریں اور اگلی ایپلیکیشن تعینات کریں۔
ٹیک اسٹیک اور خصوصیات
- Next.js
- اجزاء اور صفحات
- ڈیٹا سیمپلنگ
- اسٹائلائزیشن
- پروجیکٹ کی تعیناتی۔
- SSR اور SPA
کچھ نیا سیکھنے کے لیے ای کامرس ایپ جیسی حقیقی دنیا کی مثال رکھنا ہمیشہ بہت اچھا ہوتا ہے۔ آپ کر سکتے ہیں۔ .
Nuxt.js کے ساتھ مکمل کثیر لسانی بلاگ
Nuxt.js Vue کے لیے ہے، React کے لیے Next.js کیا ہے: سرور سائیڈ رینڈرنگ اور سنگل پیج ایپلی کیشنز کی طاقت کو یکجا کرنے کے لیے ایک بہترین فریم ورک
آپ جو حتمی ایپلیکیشن بنا سکتے ہیں وہ اس طرح نظر آئے گی:
آپ کیا سیکھیں گے۔
اس نمونہ پروجیکٹ میں، آپ سیکھیں گے کہ Nuxt.js کا استعمال کرتے ہوئے ایک مکمل ویب سائٹ کیسے بنائی جاتی ہے، ابتدائی سیٹ اپ سے لے کر حتمی تعیناتی تک۔
یہ بہت ساری عمدہ خصوصیات سے فائدہ اٹھاتا ہے جو Nuxt کو پیش کرنا ہے، جیسے صفحات اور اجزاء، اور SCSS کے ساتھ اسٹائلنگ۔
ٹیک اسٹیک اور خصوصیات
- نکسٹ جے
- اجزاء اور صفحات
- اسٹوری بلاک ماڈیول
- ہیگ فش
- ریاستی انتظام کے لیے Vuex
- اسٹائل کے لیے SCSS
- Nuxt Middlewares
جس میں Nuxt.js کی بہت سی بہترین خصوصیات شامل ہیں۔ مجھے ذاتی طور پر Nuxt کے ساتھ کام کرنا پسند ہے لہذا آپ کو اسے ضرور آزمانا چاہیے کیونکہ یہ آپ کو ایک بہترین Vue ڈویلپر بھی بنائے گا۔
گیٹسبی کے ساتھ بلاگ
Gatsby React اور GraphQL استعمال کرنے والا ایک بہترین جامد سائٹ جنریٹر ہے۔ یہ اس منصوبے کا نتیجہ ہے:
آپ کیا سیکھیں گے۔
اس ٹیوٹوریل میں، آپ ایک بلاگ بنانے کے لیے Gatsby کا استعمال سیکھیں گے جسے آپ React اور GraphQL کا استعمال کرتے ہوئے اپنے مضامین لکھنے کے لیے استعمال کریں گے۔
ٹیک اسٹیک اور خصوصیات
- Gatsby
- جواب دیں
- گراف کیو ایل
- پلگ انز اور تھیمز
- MDX/مارک ڈاؤن
- بوٹسٹریپ سی ایس ایس
- مراسلے
اگر آپ کبھی بھی بلاگ شروع کرنا چاہتے ہیں، React اور GraphQL کا استعمال کرتے ہوئے اسے کیسے بنایا جائے۔
میں یہ نہیں کہہ رہا ہوں کہ ورڈپریس ایک برا انتخاب ہے، لیکن Gatsby کے ساتھ آپ React کا استعمال کرتے ہوئے اعلیٰ کارکردگی والی ویب سائٹس بنا سکتے ہیں - جو کہ ایک حیرت انگیز امتزاج ہے۔
Gridsome کے ساتھ بلاگ
Vue کے لیے Gridsome... ٹھیک ہے، ہمارے پاس یہ Next/Nuxt کے ساتھ پہلے ہی موجود تھا۔
لیکن گرڈسم اور گیٹسبی کے لئے بھی ایسا ہی ہے۔ دونوں GraphQL کو اپنی ڈیٹا لیئر کے طور پر استعمال کرتے ہیں، لیکن Gridsome VueJS استعمال کرتا ہے۔ یہ ایک حیرت انگیز جامد سائٹ جنریٹر بھی ہے جو آپ کو زبردست بلاگ بنانے میں مدد کرے گا:
آپ کیا سیکھیں گے۔
یہ پروجیکٹ آپ کو سکھائے گا کہ Gridsome، GraphQL اور Markdown کے ساتھ شروع کرنے کے لیے ایک سادہ بلاگ کیسے بنایا جائے۔ اس میں یہ بھی بتایا گیا ہے کہ Netlify کے ذریعے ایپلیکیشن کو کیسے تعینات کیا جائے۔
ٹیک اسٹیک اور خصوصیات
- گرڈسم
- قول
- گراف کیو ایل
- Markdown
- نیٹلائف
یہ یقینی طور پر سب سے زیادہ جامع ٹیوٹوریل نہیں ہے، لیکن یہ گرڈسم کے بنیادی تصورات کا احاطہ کرتا ہے اور .
ساؤنڈ کلاؤڈ جیسا آڈیو پلیئر Quasar استعمال کرتا ہے۔
Quasar ایک اور Vue فریم ورک ہے جسے موبائل ایپلی کیشنز بنانے کے لیے استعمال کیا جا سکتا ہے۔ اس پروجیکٹ میں آپ ایک آڈیو پلیئر ایپلی کیشن بنائیں گے، مثال کے طور پر:
آپ کیا سیکھیں گے۔
جبکہ دیگر پروجیکٹس بنیادی طور پر ویب ایپلیکیشنز پر فوکس کرتے ہیں، یہ آپ کو دکھائے گا کہ Vue اور Quasar فریم ورک کا استعمال کرتے ہوئے موبائل ایپلیکیشن کیسے بنائی جاتی ہے۔
آپ کے پاس پہلے سے ہی کورڈووا اینڈرائیڈ اسٹوڈیو/ ایکس کوڈ کنفیگرڈ کے ساتھ چل رہا ہونا چاہیے۔ اگر نہیں۔
ٹیک اسٹیک اور خصوصیات
- کوثر
- قول
- کورڈووا
- ویو سرفر
- UI اجزاء
، موبائل ایپلیکیشنز بنانے کے لیے Quasar کی صلاحیتوں کا مظاہرہ کرنا۔
ماخذ: www.habr.com