Ezinye iiprojekthi ezili-9 zokulola izakhono zakho ze-Front-End

Intshayelelo

Независимо от того, являетесь ли вы новичком в программировании или уже опытным разработчиком, в этой отрасли изучение новых концепций и языков/фреймворков является обязательно чтобы успевать за трендами.

Возьмем, к примеру, React — код которого, Facebook открыл всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.

Vue и Angular, конечно же, также имеют свою законную базу поклонников. И еще есть Svelte и другие универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и многое другое.

Если вы хотите проявить себя как опытный разработчик JavaScript, у вас должен быть хотя бы некоторый опыт работы с различными фреймворками и библиотеками — помимо выполнения работы с хорошим старым JS.

Чтобы помочь вам стать мастером фронт-енда в 2020 году, я собрал девять различных проектов, каждый из которых был посвящен разным фреймворкам и библиотекам JavaScript в качестве технического стека, который вы можете создать и добавить в свое портфолио. Помните, что ничто не помогает вам больше, чем на практике создавать вещи, поэтому двигайтесь вперед, включите свой ум и сделайте это возможным

Eli nqaku liguqulelwe ngenkxaso ye-EDISON Software, leyo yenza amagumbi afakelweyo kwiivenkile ezininzi, kwakunye iimvavanyo zesoftware.

I-app yokukhangela imuvi usebenzisa i-React (enegwegwe)

Into yokuqala onokuthi uqale ngayo kukwenza usetyenziso lokukhangela imuvi usebenzisa iReact. Apha ngezantsi ngumfanekiso wokuba isicelo sokugqibela siya kujongeka njani:

Uza kufunda ntoni
Ngokwakha le app, uyakuphucula izakhono zakho zeReact ngokusebenzisa iHooks API entsha. Umzekelo weprojekthi usebenzisa i-React components, ii-hooks ezininzi, i-API yangaphandle, kwaye ngokuqinisekileyo isimbo se-CSS.

Isitaki sobugcisa kunye neempawu

• Yabelana ngamagwegwe
• Yakha-yenza-app
• JSX
• CSS

Ngaphandle kokusebenzisa naziphi na iiklasi, ezi projekthi zikunika indawo efanelekileyo yokungena kwi-Functional React kwaye ngokuqinisekileyo ziya kukunceda ngo-2020. ungafumana Umzekelo weprojekthi apha. Landela imiyalelo okanye uzenzele eyakho.

Ncokola App kunye Vue

Enye iprojekthi enkulu onokuyenza kukwenza usetyenziso lwencoko usebenzisa ilayibrari yam endiyithandayo yeJavaScript: VueJS. Isicelo siya kujongeka ngolu hlobo:

Uza kufunda ntoni
Kwesi sifundo, uya kufunda ukwenza i-app ye-Vue ukusuka ekuqaleni-ukwenza izinto, ukuphatha ilizwe, ukwenza iindlela, ukuqhagamshela kwiinkonzo zomntu wesithathu, kunye nokuphatha ubunyani.

Isitaki sobugcisa kunye neempawu

• Vue
• vux
• Vue Router
• Jonga i-CLI
• Ukuqhubela phambili
• CSS

Le yiprojekthi entle ngokwenene ukuqalisa ngeVue okanye uphucule izakhono zakho ezikhoyo ukuze ungene kuphuhliso ngo-2020. ungafumana isifundo apha.

Imozulu entle ene-Angular 8

Lo mzekelo uya kukunceda wenze imozulu entle usebenzisa iAngular 8:

Uza kufunda ntoni
Le projekthi iya kukufundisa izakhono ezixabisekileyo ekwakheni izicelo ukusuka ekuqaleni - ukusuka kuyilo ngophuhliso, yonke indlela ukuya kwisicelo esilungele ukuthunyelwa.

Isitaki sobugcisa kunye neempawu

• I-angular 8
• Firebase
• Unikezelo lwecala lomncedisi
• CSS kunye Grid kunye Flexbox
• Mobile friendly kunye nokuguquguquka
• Imo emnyama
• Ujongano oluhle

Eyona nto ndiyithanda kakhulu ngale projekthi ibandakanya konke kukuba awufundi izinto wedwa. Endaweni yoko, ufunda yonke inkqubo yophuhliso, ukusuka kuyilo ukuya ekuhanjisweni kokugqibela.

Ukwenza isicelo usebenzisa iSvelte

I-Svelte ifana nomntwana omtsha kwindlela esekwe kwinxalenye - ubuncinci iyafana neReact, Vue kunye ne-Angular. Kwaye le yenye yezona mveliso zishushu kakhulu zika-2020.

Ii-apps ze-To-Do ayisosona sihloko sishushu, kodwa iya kukunceda ngenene ulolonge izakhono zakho ze-Svelte. Iya kujongeka ngolu hlobo:

Uza kufunda ntoni
Esi sifundo siya kukubonisa indlela yokwenza isicelo usebenzisa iSvelte 3, ukusuka ekuqaleni ukuya ekugqibeleni. Uya kusebenzisa amacandelo, isimbo, kunye nabaphathi beminyhadala

Isitaki sobugcisa kunye neempawu

• Inyathelo 3
• Izixhobo
• Isitayile ngeCSS
• ES 6 isivakalisi

Azikho zininzi iiprojekthi ezilungileyo zokuqalisa iSvelte, ndiye ndafumanisa olu lukhetho olulungileyo ukuqala ngalo.

I-app yorhwebo usebenzisa i-Next.js

I-Next.js sesona sikhokelo sidumileyo sokwakha React izicelo ezixhasa unikezelo lwecala lomncedisi ngaphandle kwebhokisi.

Le projekthi iya kukubonisa indlela yokwenza isicelo se-e-commerce esijongeka ngolu hlobo:

Uza kufunda ntoni
Kule projekthi, uya kufunda indlela yokuphuhlisa nge-Next.js-yenza amaphepha amatsha kunye namalungu, khupha idatha, kunye nesimbo kwaye usebenzise i-Elandelayo isicelo.

Isitaki sobugcisa kunye neempawu

• Okulandelayo.js
• Amacandelo kunye namaphepha
• Isampula yedatha
• Isimbo
• Ukusasazwa kweProjekthi
• I-SSR kunye ne-SPA

Kuhlala kukuhle ukuba nomzekelo wehlabathi lokwenyani njenge-app ye-e-commerce yokufunda into entsha. Unga fumana isifundo apha.

Iblogi egcwele iilwimi ezininzi ene-Nuxt.js

I-Nuxt.js yeyeVue, yintoni i-Next.js ye-React: isakhelo esikhulu sokudibanisa amandla onikezelo lwecala lomncedisi kunye nezicelo zephepha elinye.
Isicelo sokugqibela onokusenza siya kujongeka ngolu hlobo:

Uza kufunda ntoni

Kule projekthi yesampulu, uya kufunda ukwenza iwebhusayithi epheleleyo usebenzisa i-Nuxt.js, ukusuka kulungiselelo lokuqala ukuya ekusetyenzisweni kokugqibela.

Ithatha ithuba lobuninzi beempawu ezipholileyo ezinokunikezelwa yiNuxt, njengamaphepha kunye namacandelo, kunye nesimbo nge-SCSS.

Isitaki sobugcisa kunye neempawu

• I-Nuxt.js
• Amacandelo kunye namaphepha
• Imodyuli yebali
• Hagfish
• I-Vuex yolawulo lukarhulumente
• I-SCSS yokwenza isimbo
• Nuxt middlewares

Le yiprojekthi epholileyo ngokwenene, equka izinto ezininzi ezintle ze-Nuxt.js. Mna ngokobuqu ndiyakuthanda ukusebenza neNuxt ke kufuneka uzame njengoko iya kukwenza ube ngumphuhlisi omkhulu weVue.

Ibhlog kunye neGatsby

I-Gatsby yeyona ndawo igqwesileyo yejenereyitha yesiza esebenzisa iReact kunye neGraphQL. Esi sisiphumo seprojekthi:

Uza kufunda ntoni

Kule tutorial, uya kufunda ukusebenzisa iGatsby ukwenza ibhlog oya kuyisebenzisa ukubhala amanqaku akho usebenzisa iReact kunye neGraphQL.

Isitaki sobugcisa kunye neempawu

• Kwimigby
• usabela
• IgrafuQL
• Iiplagi kunye nemixholo
• MDX/Markdown
• I-Bootstrap CSS
• Iipateni

Ukuba ukhe wafuna ukuqala ibhlog, lo ngumzekelo omkhulu ngendlela yokwenza usebenzisa iReact kunye neGraphQL.

Anditsho ukuba i-WordPress lukhetho olubi, kodwa ngeGatsby unokwakha iiwebhusayithi ezisebenza kakhulu usebenzisa iReact - eyindibaniselwano emangalisayo.

Ibhlog eneGridsome

Gridsome for Vue... Kulungile, besele sinalo ngokulandelayo/Nuxt.
Kodwa kuyafana nakwiGridsome kunye neGatsby. Bobabini basebenzisa iGraphQL njengomaleko wabo wedatha, kodwa iGridsome isebenzisa iVueJS. Le ikwayinto emangalisayo yejenereyitha yesiza eya kukunceda wenze iibhlog ezintle:

Uza kufunda ntoni

Le projekthi iya kukufundisa indlela yokwenza iblogi elula ukuze uqalise ngeGridsome, GraphQL kunye neMarkdown. Ikwabandakanya indlela yokufaka isicelo ngeNetlify.

Isitaki sobugcisa kunye neempawu

• Igridsome
• Vue
• IgrafuQL
• Markdown
• Yenza

Ngokuqinisekileyo ayisosona sifundo sibanzi, kodwa sigubungela iikhonsepthi ezisisiseko zeGridsome kunye I-Markdown inokuba sisiqalo esihle.

I-SoundCloud-efana nomdlali we-audio usebenzisa i-Quasar

I-Quasar sesinye isakhelo se-Vue esinokusetyenziswa ukwenza usetyenziso lweselula. Kule projekthi uya kwenza isicelo somdlali ovakalayo, umzekelo:

Uza kufunda ntoni

Ngelixa ezinye iiprojekthi zijolise ikakhulu kwizicelo zewebhu, le iya kukubonisa indlela yokwenza isicelo esiphathwayo usebenzisa iVue kunye nesakhelo seQuasar.
Kuya kufuneka ukuba sele unayo iCordova esebenzayo kunye ne-Android Studio/Xcode emiselweyo. Ukuba akunjalo, le ncwadana inekhonkco kwiwebhusayithi yeQuasar apho ikubonisa indlela yokuseta yonke into.

Isitaki sobugcisa kunye neempawu

• Ngekota
• Vue
• Cordova
• WaveSurfer
• Amacandelo e-UI

Iprojekthi encinci, ebonisa amandla e-Quasar ekudaleni izicelo zeselula.

umthombo: www.habr.com