Вовед
Без разлика дали сте нов во програмирањето или искусен развивач, учењето нови концепти и јазици/рамки е задолжително во оваа индустрија за да бидете во тек со трендовите.
Земете го React, на пример, кој Facebook го отвори со отворен код пред само четири години и веќе стана избор број еден за развивачите на JavaScript ширум светот.
Vue и Angular, се разбира, имаат и своја легитимна база на фанови. А потоа, тука се Svelte и други универзални рамки како што се Next.js или Nuxt.js. И Гетсби, и Гридсом, и Квазар... и многу повеќе.
Ако сакате да се докажете како искусен развивач на JavaScript, треба да имате барем малку искуство со различни рамки и библиотеки - покрај тоа што работите со старите добри JS.
За да ви помогнам да станете врвен мајстор во 2020 година, составив девет различни проекти, од кои секој се фокусира на различна JavaScript рамка и библиотека како технолошки стек што можете да го изградите и додадете во вашето портфолио. Запомнете дека ништо не ви помага повеќе од создавањето нешта, затоа тргнете напред, искористете го вашиот ум и направете го тоа да се случи
Статијата е преведена со поддршка на софтверот EDISON, кој И .
Апликација за пребарување филмови користејќи React (со куки)
Првото нешто со кое можете да започнете е да креирате апликација за пребарување филмови користејќи React. Подолу е слика за тоа како ќе изгледа конечната апликација:
Што ќе научиш
Со градење на оваа апликација, ќе ги подобрите вашите вештини за React со користење на релативно новиот Hooks API. Примерниот проект користи компоненти на React, многу куки, надворешен API и секако одреден стил на CSS.
Технолошки оџак и карактеристики
- Реагирајте со куки
- креирај-реагира-апликација
- Jsx
- CSS
Без користење на класи, овие проекти ви даваат совршена влезна точка во функционалниот React и дефинитивно ќе ви помогнат во 2020 година. Можеш да најдеш . Следете ги упатствата или направете го ваш.
Апликација за разговор со Vue
Друг одличен проект што треба да го направите е да креирате апликација за разговор користејќи ја мојата омилена библиотека JavaScript: VueJS. Апликацијата ќе изгледа вака:
Што ќе научиш
Во ова упатство, ќе научите како да направите апликација Vue од нула - создавање компоненти, ракување со состојба, креирање маршрути, поврзување со услуги од трети страни, па дури и ракување со автентикација.
Технолошки оџак и карактеристики
- Vue
- vuex
- Vue рутер
- Vue CLI
- Тласкач
- CSS
Ова е навистина одличен проект за да започнете со Vue или да ги подобрите вашите постоечки вештини за да започнете со развој во 2020 година. Можеш да најдеш .
Прекрасна апликација за временски услови со Angular 8
Овој пример ќе ви помогне да креирате убава апликација за временски услови користејќи Angular 8:
Што ќе научиш
Овој проект ќе ве научи на вредни вештини за градење апликации од нула - од дизајн до развој, па сè до апликација подготвена за распоредување.
Технолошки оџак и карактеристики
- Аголна 8
- Firebase
- Рендерирање од страна на серверот
- CSS со Grid и Flexbox
- Пријателски на мобилен и приспособливост
- Темен режим
- Прекрасен интерфејс
Она што навистина го сакам во овој сеопфатен проект е тоа што не ги проучувате работите изолирано. Наместо тоа, го учите целиот процес на развој, од дизајн до конечно распоредување.
Апликација To-Do користејќи Svelte
Svelte е како новото дете на пристапот базиран на компоненти - барем сличен на React, Vue и Angular. И ова е еден од најжешките нови производи за 2020 година.
Апликациите за задачи не се нужно најжешката тема, но навистина ќе ви помогнат да ги усовршите вашите вештини Svelte. Ќе изгледа вака:
Што ќе научиш
Овој туторијал ќе ви покаже како да креирате апликација користејќи Svelte 3, од почеток до крај. Ќе користите компоненти, стајлинг и ракувачи со настани
Технолошки оџак и карактеристики
- Светло 3
- Компоненти
- Стајлирање со CSS
- ES 6 синтакса
Нема многу добри стартни проекти Svelte, па најдов .
Апликација за е-трговија користејќи Next.js
Next.js е најпопуларната рамка за градење на React апликации кои поддржуваат прикажување надвор од кутијата од страна на серверот.
Овој проект ќе ви покаже како да креирате апликација за е-трговија која изгледа вака:
Што ќе научиш
Во овој проект, ќе научите како да се развивате со Next.js - да создавате нови страници и компоненти, да извлекувате податоци и да стилизирате и распоредите Next апликација.
Технолошки оџак и карактеристики
- Следно.js
- Компоненти и страници
- Земање примероци на податоци
- Стајлинг
- Распоредување на проектот
- РБС и СПА
Секогаш е одлично да се има пример од реалниот свет како апликација за е-трговија за да научите нешто ново. Ти можеш .
Целосно повеќејазичен блог со Nuxt.js
Nuxt.js е за Vue, што е Next.js за React: одлична рамка за комбинирање на моќта на рендерирање од страна на серверот и апликации на една страница
Конечната апликација што можете да ја креирате ќе изгледа вака:
Што ќе научиш
Во овој примерок проект, ќе научите како да креирате целосна веб-локација користејќи Nuxt.js, од првичното поставување до конечното распоредување.
Искористува многу од одличните карактеристики што ги нуди Nuxt, како што се страници и компоненти и стилизирање со SCSS.
Технолошки оџак и карактеристики
- Nuxt.js
- Компоненти и страници
- Модул за блок на приказни
- Хаг риба
- Vuex за управување со државата
- SCSS за стилизирање
- Nuxt Middlewares
, кој вклучува многу одлични функции на Nuxt.js. Јас лично сакам да работам со Nuxt, па затоа треба да го пробате бидејќи исто така ќе ве направи одличен развивач на Vue.
Блог со Гетсби
Гетсби е одличен генератор на статички страници користејќи React и GraphQL. Ова е резултат на проектот:
Што ќе научиш
Во ова упатство, ќе научите како да го користите Гетсби за да креирате блог што ќе го користите за да пишувате свои написи користејќи React и GraphQL.
Технолошки оџак и карактеристики
- Гетсби
- Реагираат
- GraphQL
- Приклучоци и теми
- MDX/Markdown
- CSS за подигање
- шаблони
Ако некогаш сте сакале да започнете блог, за тоа како да го направите користејќи React и GraphQL.
Не велам дека WordPress е лош избор, но со Гетсби можете да изградите веб-страници со високи перформанси користејќи React - што е неверојатна комбинација.
Блог со Gridsome
Gridsome за Vue... Добро, веќе го имавме ова со Next/Nuxt.
Но, истото важи и за Гридсом и Гетсби. И двете користат GraphQL како нивен слој на податоци, но Gridsome користи VueJS. Ова е исто така неверојатен генератор на статички страници што ќе ви помогне да креирате одлични блогови:
Што ќе научиш
Овој проект ќе ве научи како да креирате едноставен блог за да започнете со Gridsome, GraphQL и Markdown. Исто така, опфаќа како да се распореди апликација преку Netlify.
Технолошки оџак и карактеристики
- Грозен
- Vue
- GraphQL
- Markdown
- нетолизираат
Ова секако не е најсеопфатното упатство, но ги опфаќа основните концепти на Gridsome и .
Аудио плеер сличен на SoundCloud со помош на Quasar
Quasar е уште една Vue рамка која може да се користи за креирање мобилни апликации. Во овој проект ќе креирате апликација за аудио плеер, на пример:
Што ќе научиш
Додека другите проекти се фокусираат главно на веб-апликации, овој ќе ви покаже како да креирате мобилна апликација користејќи Vue и рамката Quasar.
Веќе треба да имате Cordova што работи со конфигуриран Android Studio/Xcode. Ако не, прирачникот има врска до веб-страницата на Quasar каде што ви покажуваат како да поставите сè.
Технолошки оџак и карактеристики
- Quasar
- Vue
- Cordova
- WaveSurfer
- Компоненти на UI
, покажувајќи ги способностите на Quasar за креирање мобилни апликации.
Извор: www.habr.com