پېژندنه
که تاسو برنامه کولو ته نوي یاست یا تجربه لرونکي پراختیا کونکي ، د رجحاناتو سره ساتلو لپاره پدې صنعت کې د نوي مفکورو او ژبو / چوکاټونو زده کول لازمي دي.
عکس العمل واخلئ ، د مثال په توګه ، کوم چې فیسبوک یوازې څلور کاله دمخه خلاص شوی و او دمخه یې په ټوله نړۍ کې د جاواسکریپټ پراختیا کونکو لپاره لومړی نمبر انتخاب شو.
Vue او Angular، البته، د دوی خپل مشروع فین بیس هم لري. او بیا Svelte او نور نړیوال چوکاټونه شتون لري لکه Next.js یا Nuxt.js. او ګټسبي، او ګریډسم، او کواسار ... او نور ډیر څه.
که تاسو غواړئ خپل ځان د تجربه لرونکي جاواسکریپټ پراختیا کونکي په توګه ثابت کړئ، تاسو باید لږترلږه د مختلفو چوکاټونو او کتابتونونو سره تجربه ولرئ - د ښه زاړه JS سره کار کولو سربیره.
تاسو سره په 2020 کې د مخکښې پای ماسټر کیدو کې د مرستې لپاره ، ما نهه بیلابیل پروژې یوځای کړې ، هر یو د مختلف جاواسکریپټ چوکاټ او کتابتون باندې د تخنیکي سټیک په توګه تمرکز کوي تاسو کولی شئ خپل پورټ فولیو کې رامینځته او اضافه کړئ. په یاد ولرئ چې هیڅ شی تاسو سره د شیانو له رامینځته کولو څخه ډیر مرسته نه کوي ، نو مخکې لاړشئ ، خپل ذهن وکاروئ او دا پیښ کړئ
مقاله د EDISON سافټویر په ملاتړ ژباړل شوې ، کوم چې او همدارنګه .
د عکس العمل په کارولو سره د فلم لټون ایپ (د هکسونو سره)
لومړی شی چې تاسو یې پیل کولی شئ د عکس العمل په کارولو سره د فلم لټون ایپ رامینځته کول دي. لاندې یو عکس دی چې وروستی غوښتنلیک به څنګه ښکاري:
تاسو به څه زده کړئ
د دې اپلیکیشن په جوړولو سره، تاسو به د نسبتا نوي Hooks API په کارولو سره خپل د غبرګون مهارتونه ښه کړئ. د مثال پروژه د عکس العمل اجزا ، ډیری هکونه ، یو بهرنی API ، او البته ځینې CSS سټایل کاروي.
ټیک سټیک او ځانګړتیاوې
- د هکونو سره غبرګون وکړئ
- د - عکس العمل ایپ
- JSX
- سی ایس ایس
د کوم ټولګیو کارولو پرته ، دا پروژې تاسو ته په فعال عکس العمل کې د ننوتلو کامل نقطه درکوي او یقینا به په 2020 کې ستاسو سره مرسته وکړي. تاسو موندلی شئ . لارښوونې تعقیب کړئ یا خپل ځان جوړ کړئ.
د Vue سره د چیټ ایپ
ستاسو لپاره بله عالي پروژه زما د غوره جاواسکریپټ کتابتون په کارولو سره د چیټ ایپ رامینځته کول دي: VueJS. غوښتنلیک به داسې ښکاري:
تاسو به څه زده کړئ
پدې ټیوټوریل کې ، تاسو به زده کړئ چې څنګه له سکریچ څخه Vue ایپ رامینځته کړئ - د اجزاو رامینځته کول ، حالت اداره کول ، لارې رامینځته کول ، د دریمې ډلې خدماتو سره وصل کول ، او حتی د تصدیق اداره کول.
ټیک سټیک او ځانګړتیاوې
- پیشنهاد
- وویکس
- Vue راوټر
- Vue CLI
- Pusher
- سی ایس ایس
دا واقعیا یوه عالي پروژه ده چې د Vue سره پیل وکړئ یا په 2020 کې پراختیا ته د رسیدو لپاره خپل موجوده مهارتونه ښه کړئ. تاسو موندلی شئ .
د Angular 8 سره د هوا ښکلی ایپ
دا مثال به تاسو سره د Angular 8 په کارولو سره د ښکلي هوا ایپ رامینځته کولو کې مرسته وکړي:
تاسو به څه زده کړئ
دا پروژه به تاسو ته له سکریچ څخه د غوښتنلیکونو په جوړولو کې ارزښتناکه مهارتونه درکړي - د ډیزاین څخه د پراختیا له لارې، د پلي کولو لپاره چمتو غوښتنلیک پورې.
ټیک سټیک او ځانګړتیاوې
- انګړ 8
- د اور وژنې
- د سرور اړخ وړاندې کول
- د ګریډ او فلیکس بکس سره CSS
- د ګرځنده دوستانه او تطبیق وړ
- تیاره حالت
- ښکلی انٹرفیس
هغه څه چې زه واقعیا د دې هر اړخیزې پروژې په اړه خوښوم دا دی چې تاسو شیان په انزوا کې مه مطالعه کوئ. پرځای یې ، تاسو د ډیزاین څخه تر وروستي ګمارلو پورې د پراختیا ټوله پروسه زده کړئ.
د Svelte په کارولو سره د ترسره کولو غوښتنلیک
سویلټ د برخې پراساس چلند کې د نوي ماشوم په څیر دی - لږترلږه د عکس العمل ، ویو او انګولر سره ورته. او دا د 2020 لپاره یو له خورا ګرمو نویو محصولاتو څخه دی.
د ترسره کولو ایپس اړین ندي چې ترټولو ګرمه موضوع وي، مګر دا به واقعیا تاسو سره ستاسو د سویلټ مهارتونو په ښه کولو کې مرسته وکړي. دا به داسې ښکاري:
تاسو به څه زده کړئ
دا ټیوټوریل به تاسو ته وښیې چې څنګه د پیل څخه تر پای پورې د Svelte 3 په کارولو سره غوښتنلیک رامینځته کړئ. تاسو به اجزا، سټایل، او د پیښې سمبالونکي وکاروئ
ټیک سټیک او ځانګړتیاوې
- Svelte 3
- اجزاء
- د CSS سره سټایل کول
- ES 6 ترکیب
دلته ډیری ښه سویلټ سټارټر پروژې شتون نلري ، نو ما وموندله .
د Next.js په کارولو سره د ای کامرس ایپ
Next.js د عکس العمل غوښتنلیکونو جوړولو لپاره خورا مشهور چوکاټ دی چې د بکس څخه بهر د سرور اړخ رینډرنګ ملاتړ کوي.
دا پروژه به تاسو ته وښیې چې څنګه د ای کامرس غوښتنلیک رامینځته کړئ چې داسې ښکاري:
تاسو به څه زده کړئ
په دې پروژه کې، تاسو به زده کړئ چې څنګه د Next.js سره وده وکړئ—نوې پاڼې او برخې جوړې کړئ، ډاټا استخراج کړئ، او سټایل او د راتلونکی غوښتنلیک ځای په ځای کړئ.
ټیک سټیک او ځانګړتیاوې
- Next.js
- اجزا او پاڼې
- د معلوماتو نمونه کول
- سټایلیزیشن
- د پروژې پلي کول
- SSR او SPA
دا تل خورا ښه دی چې د ریښتیني نړۍ مثال ولرئ لکه د ای کامرس ایپ ترڅو یو څه نوي زده کړئ. تاسو یې کولای شئ .
د Nuxt.js سره بشپړ څو ژبی بلاګ
Nuxt.js د Vue لپاره دی، څه Next.js د عکس العمل لپاره دی: د سرور-سایډ رینډرینګ او واحد مخ غوښتنلیکونو ځواک ترکیب لپاره عالي چوکاټ
وروستی غوښتنلیک چې تاسو یې رامینځته کولی شئ داسې ښکاري:
تاسو به څه زده کړئ
په دې نمونه پروژه کې، تاسو به زده کړئ چې څنګه د Nuxt.js په کارولو سره یوه بشپړه ویب پاڼه جوړه کړئ، د ابتدايي ترتیب څخه تر وروستي ګمارلو پورې.
دا د ډیری غوره ځانګړتیاو څخه ګټه پورته کوي چې Nuxt یې وړاندیز کوي، لکه پاڼې او برخې، او د SCSS سره سټایل کول.
ټیک سټیک او ځانګړتیاوې
- نکسټ. js
- اجزا او پاڼې
- د کیسې بلاک ماډل
- هګ فش
- د دولت مدیریت لپاره Vuex
- د سټایل کولو لپاره SCSS
- Nuxt Middlewares
په کوم کې چې د Nuxt.js ډیری غوره ځانګړتیاوې شاملې دي. زه په شخصي توګه د Nuxt سره کار کولو سره مینه لرم نو تاسو باید دا هڅه وکړئ ځکه چې دا به تاسو ته یو لوی Vue پراختیا کونکی هم کړي.
د ګټسبي سره بلاګ
ګیټسبي د عکس العمل او ګراف کیو ایل په کارولو سره یو عالي جامد سایټ جنریټر دی. دا د پروژې پایله ده:
تاسو به څه زده کړئ
پدې ټیوټوریل کې ، تاسو به زده کړئ چې څنګه د ګیټسبي کارولو لپاره یو بلاګ رامینځته کړئ چې تاسو به یې د عکس العمل او ګراف کیو ایل په کارولو سره د خپلو مقالو لیکلو لپاره وکاروئ.
ټیک سټیک او ځانګړتیاوې
- ګيټسبي
- غبرګون
- ګراف
- پلگ انونه او موضوعات
- MDX/مارک ډاون
- بوټسټراپ سی ایس ایس
- کينډۍ
که تاسو کله هم غوښتل چې بلاګ پیل کړئ، د عکس العمل او ګراف کیو ایل په کارولو سره دا څنګه جوړ کړئ.
زه نه وایم چې ورڈپریس یو بد انتخاب دی، مګر د ګیټسبي سره تاسو کولی شئ د عکس العمل په کارولو سره د لوړ فعالیت ویب پاڼې جوړې کړئ - کوم چې یو حیرانتیا ترکیب دی.
د Gridsome سره بلاګ
د Vue لپاره Gridsome... ښه، موږ دا دمخه د Next/Nuxt سره درلودل.
مګر ورته د ګریډسم او ګټسبي لپاره ریښتیا ده. دواړه GraphQL د دوی د ډیټا پرت په توګه کاروي ، مګر ګریډسم VueJS کاروي. دا یو حیرانونکی جامد سایټ جنریټر هم دی چې تاسو سره به د عالي بلاګونو رامینځته کولو کې مرسته وکړي:
تاسو به څه زده کړئ
دا پروژه به تاسو ته درس درکړي چې څنګه د Gridsome، GraphQL او Markdown سره پیل کولو لپاره یو ساده بلاګ جوړ کړئ. دا د Netlify له لارې د غوښتنلیک پلي کولو څرنګوالی هم پوښي.
ټیک سټیک او ځانګړتیاوې
- سخت
- پیشنهاد
- ګراف
- نښه کول
- Netliify
دا په حقیقت کې خورا هراړخیز ټیوټوریل ندی ، مګر دا د ګریډسم لومړني مفکورې پوښي او .
د ساونډ کلاډ په څیر آډیو پلیر د Quasar په کارولو سره
Quasar یو بل Vue چوکاټ دی چې د ګرځنده غوښتنلیکونو جوړولو لپاره کارول کیدی شي. پدې پروژه کې به تاسو د آډیو پلیر غوښتنلیک رامینځته کړئ ، د مثال په توګه:
تاسو به څه زده کړئ
پداسې حال کې چې نورې پروژې په عمده توګه په ویب غوښتنلیکونو تمرکز کوي، دا به تاسو ته وښيي چې څنګه د Vue او Quasar چوکاټ په کارولو سره د ګرځنده غوښتنلیک رامینځته کول.
تاسو باید دمخه د Android سټوډیو/ ایکس کوډ ترتیب شوي سره کارډووا چل کړئ. که نه، لارښود د Quasar ویب پاڼې سره اړیکه لري چیرې چې دوی تاسو ته ښیې چې څنګه هرڅه تنظیم کړئ.
ټیک سټیک او ځانګړتیاوې
- کوثر
- پیشنهاد
- Cordova
- WaveSurfer
- د UI اجزا
د موبایل اپلیکیشنونو جوړولو لپاره د Quasar وړتیاوې ښودل.
سرچینه: www.habr.com