Муқаддима
Новобаста аз он ки шумо дар барномасозӣ нав ҳастед ё таҳиягари ботаҷриба, омӯхтани мафҳумҳо ва забонҳо/чаҳорчӯбаҳои нав дар ин соҳа ҳатмист, то бо тамоюлҳо риоя кунед.
Масалан, React-ро бигиред, ки Facebook ҳамагӣ чор сол пеш сарчашмаи кушода буд ва аллакай интихоби рақами як барои таҳиягарони JavaScript дар саросари ҷаҳон шудааст.
Vue ва Angular, албатта, инчунин пойгоҳи мухлисони қонунии худро доранд. Ва он гоҳ Svelte ва дигар чаҳорчӯбаҳои универсалӣ ба монанди Next.js ё Nuxt.js мавҷуданд. Ва Гэтсби, Гридсом ва Квазар... ва ғайра.
Агар шумо хоҳед, ки худро ҳамчун як таҳиягари ботаҷрибаи JavaScript исбот кунед, шумо бояд ҳадди аққал каме таҷриба бо чаҳорчӯбаҳо ва китобхонаҳои гуногун дошта бошед - илова ба кор бо JS-и кӯҳна.
Барои кӯмак расонидан ба устоди пешрафта шудан дар соли 2020, ман нӯҳ лоиҳаи гуногунро ҷамъ овардам, ки ҳар кадоме ба чаҳорчӯбаи гуногуни JavaScript ва китобхона ҳамчун стеки технологӣ тамаркуз карда, шумо метавонед ба портфели худ созед ва илова кунед. Дар хотир доред, ки ҳеҷ чиз ба шумо ҷуз эҷоди чизҳо кӯмак намекунад, бинобар ин ба пеш ҳаракат кунед, ақли худро истифода баред ва онро иҷро кунед
Мақола бо дастгирии EDISON Software тарҷума шудааст, ки , инчунин .
Барномаи ҷустуҷӯи филмҳо бо истифода аз React (бо қалмоқҳо)
Аввалин чизе, ки шумо метавонед аз он оғоз кунед, ин сохтани барномаи ҷустуҷӯии филм бо истифода аз React мебошад. Дар зер тасвири он аст, ки аризаи ниҳоӣ чӣ гуна хоҳад буд:
Шумо чӣ меомӯзед
Бо сохтани ин барнома, шумо малакаҳои React-и худро бо истифода аз API-и нисбатан нави Hooks такмил медиҳед. Лоиҳаи намунавӣ ҷузъҳои React, миқдори зиёди қалмоқҳо, API-и беруна ва албатта баъзе услубҳои CSS-ро истифода мебарад.
Стек ва хусусиятҳои техникӣ
- Вокуниш ба қалмоқҳо
- эҷод-реакция-барнома
- JSX
- CSS
Бе истифодаи ягон синф, ин лоиҳаҳо ба шумо нуқтаи мукаммали вуруд ба React функсионалӣ медиҳанд ва бешубҳа ба шумо дар соли 2020 кӯмак хоҳанд кард. пайдо карда метавонед . Дастурҳоро иҷро кунед ё онро худатон созед.
Барномаи сӯҳбат бо Vue
Дигар лоиҳаи олӣ барои шумо эҷод кардани як барномаи чат бо истифода аз китобхонаи дӯстдоштаи JavaScript ман: VueJS мебошад. Ариза чунин хоҳад буд:
Шумо чӣ меомӯзед
Дар ин дастур, шумо мефаҳмед, ки чӣ тавр як барномаи Vue -ро аз сифр созед - эҷоди ҷузъҳо, коркарди ҳолат, эҷоди масирҳо, пайвастшавӣ ба хидматҳои тарафи сеюм ва ҳатто коркарди аутентификатсия.
Стек ва хусусиятҳои техникӣ
- Vue
- vuex
- Vue роутер
- Vue CLI
- Перушер
- CSS
Ин як лоиҳаи воқеан олӣ барои оғоз кардан бо Vue ё такмил додани малакаҳои мавҷудаи шумо барои рушд дар соли 2020 аст. пайдо карда метавонед .
Барномаи зебои обу ҳаво бо Angular 8
Ин мисол ба шумо кӯмак мекунад, ки бо истифода аз Angular 8 як барномаи зебои обу ҳаво эҷод кунед:
Шумо чӣ меомӯзед
Ин лоиҳа ба шумо малакаҳои арзишмандро дар сохтани барномаҳо аз сифр таълим медиҳад - аз тарҳрезӣ то таҳия, то як барномаи барои густариш.
Стек ва хусусиятҳои техникӣ
- Кунҷӣ 8
- Сӯхтор
- Намоиши тарафи сервер
- CSS бо Grid ва Flexbox
- Мобилӣ дӯстона ва мутобиқшавӣ
- Ҳолати тира
- Интерфейси зебо
Он чизе ки ман дар ин лоиҳаи фарогир дар ҳақиқат дӯст медорам, ин аст, ки шумо чизҳоро дар алоҳидагӣ намеомӯзед. Ба ҷои ин, шумо тамоми раванди рушдро аз тарҳрезӣ то ҷойгиркунии ниҳоӣ меомӯзед.
Барномаи барои кор бо истифода аз Svelte
Svelte ба кӯдаки нав дар равиши компонентҳо монанд аст - ҳадди аққал ба React, Vue ва Angular монанд аст. Ва ин яке аз гармтарин маҳсулоти нав барои соли 2020 мебошад.
Барномаҳои кор ҳатман мавзӯи гармтарин нестанд, аммо он воқеан ба шумо дар такмил додани малакаҳои Svelte-и худ кӯмак мекунад. Ин чунин хоҳад буд:
Шумо чӣ меомӯзед
Ин дастур ба шумо нишон медиҳад, ки чӣ тавр аз аввал то ба охир барномаро бо истифода аз Svelte 3 эҷод кунед. Шумо ҷузъҳо, ороиш ва коркардкунандагони рӯйдодҳоро истифода мебаред
Стек ва хусусиятҳои техникӣ
- Свелт 3
- Ҷузъҳо
- Тарзи бо CSS
- Синтаксиси ES 6
Бисёр лоиҳаҳои хуби ибтидоии Svelte нест, бинобар ин ман пайдо кардам .
Барномаи тиҷорати электронӣ бо истифода аз Next.js
Next.js маъмултарин чаҳорчӯба барои сохтани замимаҳои React мебошад, ки аз қуттӣ коркарди серверро дастгирӣ мекунад.
Ин лоиҳа ба шумо нишон медиҳад, ки чӣ тавр сохтани як барномаи тиҷорати электронӣ, ки ба ин монанд аст:
Шумо чӣ меомӯзед
Дар ин лоиҳа, шумо мефаҳмед, ки чӣ тавр бо Next.js таҳия кардан — эҷод кардани саҳифаҳо ва ҷузъҳои нав, истихроҷи маълумот ва услуб ва ҷойгиркунии барномаи Next.
Стек ва хусусиятҳои техникӣ
- Next.js
- Компонентҳо ва саҳифаҳо
- Намунаи маълумот
- Стилизатсия
- Ҷойгиркунии лоиҳа
- РСС ва SPA
Доштани намунаи воқеии ҷаҳонӣ ба мисли як барномаи тиҷорати электронӣ барои омӯхтани чизи нав ҳамеша хуб аст. Ту метавонӣ .
Блоги мукаммали бисёрзабона бо Nuxt.js
Nuxt.js барои Vue аст, он чизест, ки Next.js барои React аст: чаҳорчӯбаи олӣ барои муттаҳид кардани қудрати намоиши сервер ва замимаҳои яксаҳифа
Замимаи ниҳоӣ, ки шумо метавонед эҷод кунед, чунин хоҳад буд:
Шумо чӣ меомӯзед
Дар ин лоиҳаи намунавӣ, шумо мефаҳмед, ки чӣ тавр сохтани вебсайти мукаммал бо истифода аз Nuxt.js, аз насби аввал то ҷойгиркунии ниҳоӣ.
Он аз бисёр хусусиятҳои ҷолибе, ки Nuxt пешкаш мекунад, ба монанди саҳифаҳо ва ҷузъҳо ва ороиш бо SCSS истифода мебарад.
Стек ва хусусиятҳои техникӣ
- Nuxt.js
- Компонентҳо ва саҳифаҳо
- Модули Storyblock
- Ҳагфиш
- Vuex барои идоракунии давлатӣ
- SCSS барои ороиши
- Миёнаравҳои Nuxt
, ки дорои бисёр хусусиятҳои бузурги Nuxt.js. Ман шахсан кор карданро бо Nuxt дӯст медорам, бинобар ин шумо бояд онро санҷед, зеро он инчунин шуморо як таҳиягари олии Vue хоҳад кард.
Блог бо Гэтсби
Gatsby як генератори аълои сайти статикӣ бо истифода аз React ва GraphQL мебошад. Ин натиҷаи лоиҳа аст:
Шумо чӣ меомӯзед
Дар ин дарс, шумо мефаҳмед, ки чӣ тавр истифода бурдани Gatsby барои сохтани блоге, ки шумо барои навиштани мақолаҳои худ бо истифода аз React ва GraphQL истифода мебаред.
Стек ва хусусиятҳои техникӣ
- Гэтсби
- Натиҷа
- GraphQL
- Плагинҳо ва мавзӯъҳо
- MDX/Markdown
- Bootstrap CSS
- Шаблонҳо
Агар шумо ягон вақт мехостед блогро оғоз кунед, дар бораи чӣ гуна сохтани он бо истифода аз React ва GraphQL.
Ман намегӯям, ки WordPress интихоби бад аст, аммо бо Гэтсби шумо метавонед бо истифода аз React вебсайтҳои баландсифат созед - ин як комбинатсияи аҷиб аст.
Блог бо Gridsome
Gridsome for Vue ... Хуб, мо инро аллакай бо Next/Nuxt доштем.
Аммо ҳамин чиз барои Gridsome ва Gatsby дахл дорад. Ҳарду GraphQL-ро ҳамчун қабати додаҳои худ истифода мебаранд, аммо Gridsome VueJS-ро истифода мебарад. Ин инчунин як генератори аҷиби сайти статикӣ аст, ки ба шумо дар эҷод кардани блогҳои олӣ кӯмак мекунад:
Шумо чӣ меомӯзед
Ин лоиҳа ба шумо таълим медиҳад, ки чӣ гуна блоги оддиеро эҷод кунед, то бо Gridsome, GraphQL ва Markdown оғоз кунед. Он инчунин чӣ гуна ҷойгиркунии барномаро тавассути Netlify фаро мегирад.
Стек ва хусусиятҳои техникӣ
- Тоза
- Vue
- GraphQL
- Нишондиҳанда
- Netlify
Ин бешубҳа дастури мукаммалтарин нест, аммо он мафҳумҳои асосии Gridsome ва .
Плеери аудио ба монанди SoundCloud бо истифода аз Quasar
Quasar чаҳорчӯбаи дигари Vue аст, ки метавонад барои эҷоди замимаҳои мобилӣ истифода шавад. Дар ин лоиҳа шумо як барномаи плеери аудио эҷод мекунед, масалан:
Шумо чӣ меомӯзед
Дар ҳоле, ки лоиҳаҳои дигар асосан ба барномаҳои веб тамаркуз мекунанд, ин лоиҳа ба шумо нишон медиҳад, ки чӣ гуна барномаи мобилиро бо истифода аз Vue ва чаҳорчӯбаи Quasar эҷод кунед.
Шумо бояд аллакай кордоваро бо Android Studio/Xcode танзим карда бошед. Дар акси ҳол, дастур дорои истинод ба вебсайти Quasar мебошад, ки дар он онҳо ба шумо чӣ гуна танзим кардани ҳама чизро нишон медиҳанд.
Стек ва хусусиятҳои техникӣ
- Квазар
- Vue
- Кордова
- WaveSurfer
- Компонентҳои UI
, нишон додани имкониятҳои Quasar барои эҷоди замимаҳои мобилӣ.
Манбаъ: will.com