kirish
Siz dasturlashda yangimisiz yoki tajribali dasturchi bo'lasizmi, yangi tushunchalar va tillarni/ramkalarni o'rganish ushbu sohada tendentsiyalardan xabardor bo'lish uchun zarurdir.
Misol uchun, Facebook atigi to'rt yil oldin ochiq manbali bo'lgan va butun dunyo bo'ylab JavaScript ishlab chiquvchilari uchun birinchi raqamli tanlovga aylangan Reactni olaylik.
Vue va Angular, albatta, o'zlarining qonuniy muxlislar bazasiga ega. Keyin Svelte va Next.js yoki Nuxt.js kabi boshqa universal ramkalar mavjud. Va Gatsby, Gridsome va Kvazar... va yana ko'p narsalar.
Agar siz o'zingizni tajribali JavaScript dasturchisi sifatida isbotlamoqchi bo'lsangiz, eski yaxshi JS bilan ishlashdan tashqari, kamida turli ramkalar va kutubxonalar bilan tajribaga ega bo'lishingiz kerak.
2020-yilda front-end ustasi bo‘lishingizga yordam berish uchun men to‘qqizta turli loyihalarni jamladim, ularning har biri turli JavaScript ramkalari va kutubxonasiga qaratilgan texnologik stek sifatida siz yaratishingiz va portfelingizga qo‘shishingiz mumkin. Esda tutingki, hech narsa sizga narsalarni yaratishdan ko'ra ko'proq yordam beradi, shuning uchun oldinga intiling, fikringizni ishlating va uni amalga oshiring
Maqola EDISON Software ko'magida tarjima qilingan , shuningdek .
React yordamida film qidirish ilovasi (ilgaklar bilan)
Siz boshlashingiz mumkin bo'lgan birinchi narsa - React yordamida film qidirish ilovasini yaratish. Quyida yakuniy ilova qanday ko'rinishi tasvirlangan:
Siz nimani o'rganasiz
Ushbu ilovani yaratish orqali siz nisbatan yangi Hooks API yordamida React ko‘nikmalaringizni yaxshilaysiz. Misol loyihasida React komponentlari, ko'plab ilgaklar, tashqi API va, albatta, ba'zi CSS uslublari qo'llaniladi.
Texnik stack va xususiyatlar
- Kancalar bilan reaksiyaga kirishing
- yaratish-reaksiya-ilova
- JSX
- CSS
Hech qanday darslardan foydalanmasdan, ushbu loyihalar sizga funktsional Reactga mukammal kirish nuqtasini beradi va 2020 yilda sizga albatta yordam beradi. topishingiz mumkin . Ko'rsatmalarga rioya qiling yoki uni o'zingiz qiling.
Vue bilan suhbat ilovasi
Siz uchun yana bir ajoyib loyiha - bu mening sevimli JavaScript kutubxonam: VueJS yordamida chat ilovasini yaratish. Ilova quyidagicha ko'rinadi:
Siz nimani o'rganasiz
Ushbu qo'llanmada siz Vue ilovasini noldan qanday yaratishni o'rganasiz - komponentlarni yaratish, holatni boshqarish, marshrutlarni yaratish, uchinchi tomon xizmatlariga ulanish va hatto autentifikatsiyani boshqarish.
Texnik stack va xususiyatlar
- Vue
- vuex
- Vue Router
- CLI ko'rinishi
- Pusher
- CSS
Bu Vue bilan boshlash yoki 2020 yilda rivojlanishga kirishish uchun mavjud ko'nikmalaringizni yaxshilash uchun haqiqatan ham ajoyib loyiha. topishingiz mumkin .
Angular 8 bilan chiroyli ob-havo ilovasi
Ushbu misol Angular 8 yordamida chiroyli ob-havo ilovasini yaratishga yordam beradi:
Siz nimani o'rganasiz
Ushbu loyiha sizga noldan ilovalar yaratish bo'yicha qimmatli ko'nikmalarni o'rgatadi - dizayndan ishlab chiqishgacha, ishga tushirishga tayyor dasturgacha.
Texnik stack va xususiyatlar
- Burchak 8
- Firebase
- Server tomoni renderlash
- Grid va Flexbox bilan CSS
- Mobil qulaylik va moslashuvchanlik
- Qorong'i rejim
- Chiroyli interfeys
Bu hamma narsani qamrab oluvchi loyihaning menga yoqadigan jihati shundaki, siz narsalarni alohida o‘rganmaysiz. Buning o'rniga siz dizayndan tortib to yakuniy joylashtirishgacha bo'lgan butun rivojlanish jarayonini o'rganasiz.
Svelte yordamida bajariladigan dastur
Svelte komponentga asoslangan yondashuvdagi yangi bolaga o'xshaydi - hech bo'lmaganda React, Vue va Angular-ga o'xshaydi. Va bu 2020 yil uchun eng issiq yangi mahsulotlardan biri.
Vazifalar ilovalari har doim ham eng dolzarb mavzu emas, lekin bu sizning Svelte ko'nikmalaringizni rivojlantirishga yordam beradi. Bu shunday ko'rinadi:
Siz nimani o'rganasiz
Ushbu qo'llanma sizga boshidan oxirigacha Svelte 3 yordamida qanday qilib dastur yaratishni ko'rsatib beradi. Siz komponentlar, uslublar va hodisalarni qayta ishlash vositalaridan foydalanasiz
Texnik stack va xususiyatlar
- Svelte 3
- komponentlar
- CSS bilan uslublash
- ES 6 sintaksisi
Svelte boshlang'ich loyihalari ko'p emas, shuning uchun men topdim .
Next.js yordamida elektron tijorat ilovasi
Next.js - server tomonida renderlashni qo'llab-quvvatlaydigan React ilovalarini yaratish uchun eng mashhur ramka.
Ushbu loyiha sizga qanday qilib elektron tijorat ilovasini yaratishni ko'rsatib beradi:
Siz nimani o'rganasiz
Ushbu loyihada siz Next.js yordamida qanday ishlab chiqishni oʻrganasiz — yangi sahifalar va komponentlar yaratish, maʼlumotlarni ajratib olish, uslub va Keyingi ilovani joylashtirish.
Texnik stack va xususiyatlar
- Keyingi.js
- Komponentlar va sahifalar
- Ma'lumotlardan namuna olish
- Stilizatsiya
- Loyihani joylashtirish
- SSR va SPA
Yangi narsalarni o'rganish uchun elektron tijorat ilovasi kabi haqiqiy misolga ega bo'lish har doim ajoyib. Siz .. qila olasiz; siz ... mumkin .
Nuxt.js bilan to'liq huquqli ko'p tilli blog
Nuxt.js Vue uchun, Next.js esa React uchun: server tomonidagi renderlash va bitta sahifali ilovalarning kuchini birlashtirish uchun ajoyib ramka.
Siz yaratishingiz mumkin bo'lgan oxirgi dastur quyidagicha ko'rinadi:
Siz nimani o'rganasiz
Ushbu namunaviy loyihada siz Nuxt.js yordamida toʻliq veb-saytni qanday yaratishni oʻrganasiz, uni dastlabki sozlashdan tortib yakuniy joylashtirishgacha.
U Nuxt taqdim etayotgan sahifalar va komponentlar va SCSS bilan uslublash kabi ko'plab ajoyib xususiyatlardan foydalanadi.
Texnik stack va xususiyatlar
- Nuxt.js
- Komponentlar va sahifalar
- Storyblock moduli
- Hagfish
- Vuex davlat boshqaruvi uchun
- Styling uchun SCSS
- Nuxt o'rta dasturlari
, bu juda ko'p ajoyib Nuxt.js xususiyatlarini o'z ichiga oladi. Shaxsan men Nuxt bilan ishlashni yaxshi ko'raman, shuning uchun uni sinab ko'rishingiz kerak, chunki bu sizni ajoyib Vue dasturchisiga aylantiradi.
Gatsby bilan blog
Gatsby React va GraphQL-dan foydalanadigan ajoyib statik sayt generatoridir. Bu loyihaning natijasi:
Siz nimani o'rganasiz
Ushbu qo'llanmada siz React va GraphQL-dan foydalanib o'z maqolalaringizni yozish uchun foydalanadigan blog yaratish uchun Gatsby-dan qanday foydalanishni o'rganasiz.
Texnik stack va xususiyatlar
- Gatsbi
- munosabat
- GraphQL
- Plaginlar va mavzular
- MDX/Markdown
- Bootstrap CSS
- Shablonlar
Agar siz blog ochmoqchi bo'lsangiz, React va GraphQL yordamida buni qanday qilish haqida.
Men WordPressni yomon tanlov demayman, lekin Gatsby bilan siz React yordamida yuqori unumdor veb-saytlar yaratishingiz mumkin - bu ajoyib kombinatsiya.
Gridsome bilan blog
Vue uchun Gridsome ... Mayli, bizda Next/Nuxt bilan allaqachon mavjud edi.
Ammo Gridsome va Gatsby uchun ham xuddi shunday. Ikkalasi ham ma'lumotlar qatlami sifatida GraphQL-dan foydalanadi, ammo Gridsome VueJS-dan foydalanadi. Bu, shuningdek, ajoyib bloglar yaratishga yordam beradigan ajoyib statik sayt generatoridir:
Siz nimani o'rganasiz
Ushbu loyiha sizga Gridsome, GraphQL va Markdown bilan ishlashni boshlash uchun oddiy blog yaratishni o'rgatadi. Shuningdek, u Netlify orqali dasturni qanday joylashtirishni o'z ichiga oladi.
Texnik stack va xususiyatlar
- G'alati
- Vue
- GraphQL
- Markdown
- Netify
Bu, albatta, eng keng qamrovli o'quv qo'llanma emas, lekin u Gridsome va asosiy tushunchalarni qamrab oladi. .
Quasar yordamida SoundCloud-ga o'xshash audio pleer
Quasar mobil ilovalar yaratish uchun ishlatilishi mumkin bo'lgan yana bir Vue ramkasidir. Ushbu loyihada siz audio pleer dasturini yaratasiz, masalan:
Siz nimani o'rganasiz
Boshqa loyihalar asosan veb-ilovalarga qaratilgan bo'lsa-da, bu sizga Vue va Quasar ramkalaridan foydalangan holda mobil ilovani qanday yaratishni ko'rsatib beradi.
Sizda allaqachon Android Studio/Xcode bilan ishlaydigan Cordova bo'lishi kerak. Agar yo'q bo'lsa, qo'llanmada Quasar veb-saytiga havola mavjud bo'lib, ular sizga hamma narsani qanday sozlashni ko'rsatadi.
Texnik stack va xususiyatlar
- Kvasar
- Vue
- Cordova
- WaveSurfer
- UI komponentlari
, mobil ilovalar yaratish uchun Quasar imkoniyatlarini namoyish qilish.
Manba: www.habr.com