Amanye amaphrojekthi ayi-9 wokucija amakhono akho e-Front-End

Isingeniso

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

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

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

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

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

I-athikili ihunyushwe ngosekelo lwe-EDISON Software, okuyiyona yenza amagumbi okulingana okubonakalayo ezitolo zemikhiqizo eminingiFuthi isofthiwe yokuhlola.

Uhlelo lokusebenza lokusesha i-movie usebenzisa i-React (enezingwegwe)

Into yokuqala ongaqala ngayo ukudala uhlelo lokusebenza lokusesha imuvi usebenzisa i-React. Ngezansi isithombe sokuthi uhlelo lokusebenza lokugcina luzobukeka kanjani:

Yini ozoyifunda
Ngokwakha lolu hlelo lokusebenza, uzothuthukisa amakhono akho e-React ngokusebenzisa i-Hooks API entsha. Iphrojekthi eyisibonelo isebenzisa izingxenye ze-React, izingwegwe eziningi, i-API yangaphandle, kanye nesitayela esithile se-CSS.

Isitaki sobuchwepheshe nezici

• Sabela ngezingwegwe
• Dala-uhlelo lokusebenza
• JSX
• CSS

Ngaphandle kokusebenzisa noma yimaphi amakilasi, lawa maphrojekthi akunikeza indawo ephelele yokungena ku-Functional React futhi azokusiza nakanjani ngo-2020. ungathola isibonelo iphrojekthi lapha. Landela imiyalelo noma ukwenze eyakho.

Xoxa App nge Vue

Enye iphrojekthi enhle ongayenza ukudala uhlelo lokusebenza lokuxoxa usebenzisa umtapo wezincwadi wami oyintandokazi we-JavaScript: I-VueJS. Uhlelo lokusebenza luzobukeka kanje:

Yini ozoyifunda
Kulesi sifundo, uzofunda ukwenza uhlelo lokusebenza lwe-Vue kusukela ekuqaleni - ukudala izingxenye, isimo sokuphatha, ukudala imizila, ukuxhuma kumasevisi ezinkampani zangaphandle, kanye nokuphatha ukufakazela ubuqiniso.

Isitaki sobuchwepheshe nezici

• Buka
• vux
• I-Vue Router
• Bheka i-CLI
• Pusher
• CSS

Lena iphrojekthi enhle kakhulu ukuqalisa nge-Vue noma uthuthukise amakhono akho akhona ukuze ungene ekuthuthukisweni ngo-2020. ungathola okokufundisa lapha.

Uhlelo lokusebenza oluhle lwesimo sezulu olune-Angular 8

Lesi sibonelo sizokusiza ukuthi udale uhlelo lokusebenza lwesimo sezulu oluhle usebenzisa i-Angular 8:

Yini ozoyifunda
Le phrojekthi izokufundisa amakhono abalulekile ekwakheni izinhlelo zokusebenza kusukela ekuqaleni - kusukela ekwakhiweni kuya ekuthuthukisweni, kuze kufike ohlelweni lokusebenza olulungele ukuthunyelwa.

Isitaki sobuchwepheshe nezici

• I-Angular 8
• I-Firebase
• Ukunikezwa kohlangothi lweseva
• I-CSS eneGridi neFlexbox
• Iselula inobungane futhi iyavumelana nezimo
• Imodi emnyama
• Isikhombikubona esihle

Engikuthanda kakhulu ngale phrojekthi ehlanganisa konke ukuthi awufundi izinto uwedwa. Kunalokho, ufunda yonke inqubo yokuthuthukisa, kusukela ekuklanyweni kuya ekusetshenzisweni kokugcina.

Isicelo sokwenza usebenzisa i-Svelte

U-Svelte ufana nengane entsha endleleni esekelwe engxenyeni - okungenani efana ne-React, Vue ne-Angular. Futhi lo ngomunye wemikhiqizo emisha eshisa kakhulu ka-2020.

Izinhlelo zokusebenza zokuthi-Do azisona isihloko esishisa izikhotha, kodwa zizokusiza ukuthi ucije amakhono akho e-Svelte. Kuzobukeka kanje:

Yini ozoyifunda
Lesi sifundo sizokukhombisa ukuthi ulwakha kanjani uhlelo lokusebenza usebenzisa i-Svelte 3, kusukela ekuqaleni kuya ekugcineni. Uzosebenzisa izingxenye, isitayela, nezibambi zomcimbi

Isitaki sobuchwepheshe nezici

• Isiqephu 3
• Izingxenye
• Isitayela nge-CSS
• I-syntax ye-ES6

Awekho maningi amaphrojekthi esiqalo esihle se-Svelte, ngakho ngitholile lena inketho enhle ukuqala ngayo.

Uhlelo lokusebenza lwe-E-commerce lisebenzisa i-Next.js

I-Next.js iwuhlaka oludume kakhulu lokwakha izinhlelo zokusebenza ze-React ezisekela ukunikezwa kohlangothi lweseva ngaphandle kwebhokisi.

Le phrojekthi izokukhombisa ukuthi ulwakha kanjani uhlelo lwe-e-commerce olubukeka kanje:

Yini ozoyifunda
Kule phrojekthi, uzofunda ukuthi ungathuthukisa kanjani nge-Next.js—ukudala amakhasi amasha nezingxenye, khipha idatha, nesitayela bese usebenzisa uhlelo lokusebenza olulandelayo.

Isitaki sobuchwepheshe nezici

• Okulandelayo
• Izingxenye namakhasi
• Ukusampula kwedatha
• Ukwenza isitayela
• Ukuthunyelwa Kwephrojekthi
• I-SSR ne-SPA

Kuhlale kukuhle ukuba nesibonelo somhlaba wangempela njengohlelo lokusebenza lwe-e-commerce ukuze ufunde okuthile okusha. Ungakwazi thola okokufundisa lapha.

Ibhulogi egcwele izilimi eziningi ene-Nuxt.js

I-Nuxt.js eye-Vue, iyini i-Next.js eye-React: uhlaka oluhle lokuhlanganisa amandla okunikezela ohlangothini lweseva kanye nezinhlelo zokusebenza zekhasi elilodwa.
Uhlelo lokusebenza lokugcina ongalwenza luzobukeka kanje:

Yini ozoyifunda

Kule phrojekthi yesampula, uzofunda ukuthi ungakha kanjani iwebhusayithi ephelele usebenzisa i-Nuxt.js, kusukela ekusethweni kwasekuqaleni kuya ekusetshenzisweni kokugcina.

Isebenzisa izici eziningi ezinhle ezinikezwa yi-Nuxt, njengamakhasi nezingxenye, nokwenza isitayela nge-SCSS.

Isitaki sobuchwepheshe nezici

• I-Nuxt.js
• Izingxenye namakhasi
• I-storyblock module
• I-Hagfish
• I-Vuex yokuphatha isimo
• I-SCSS yokwenza isitayela
• I-Nuxt middlewares

Lena iphrojekthi epholile ngempela, okuhlanganisa izici eziningi ezinhle ze-Nuxt.js. Mina ngokwami ​​ngiyakuthanda ukusebenza ne-Nuxt ngakho-ke kufanele uyizame njengoba izophinda ikwenze unjiniyela we-Vue omuhle.

Ibhulogi nge-Gatsby

I-Gatsby iyijeneretha yesayithi emile enhle kakhulu esebenzisa i-React ne-GraphQL. Lona umphumela wephrojekthi:

Yini ozoyifunda

Kulesi sifundo, uzofunda indlela yokusebenzisa i-Gatsby ukuze wakhe ibhulogi ozoyisebenzisela ukubhala izindatshana zakho usebenzisa i-React ne-GraphQL.

Isitaki sobuchwepheshe nezici

• UGatsby
• Yenza
• IgrafuQL
• Ama-plugins nezindikimba
• I-MDX/Markdown
• I-Bootstrap CSS
• Amaphethini

Uma wake wafuna ukuqala ibhulogi, lesi yisibonelo esihle ukuthi ungayenza kanjani usebenzisa i-React ne-GraphQL.

Angisho ukuthi i-WordPress iyisinqumo esibi, kodwa nge-Gatsby ungakha amawebhusayithi asebenza kahle kakhulu usebenzisa i-React - okuyinhlanganisela emangalisayo.

Ibhulogi ene-Gridsome

I-Gridsome ye-Vue... Kulungile, besivele sinalokhu nge-Next/Nuxt.
Kodwa okufanayo ku-Gridsome ne-Gatsby. Bobabili basebenzisa i-GraphQL njengesendlalelo sabo sedatha, kodwa i-Gridsome isebenzisa i-VueJS. Lesi futhi isikhiqizi sesayithi esimile esimangalisayo esizokusiza ukuthi udale amabhulogi amahle:

Yini ozoyifunda

Le phrojekthi izokufundisa indlela yokudala ibhulogi elula ukuze uqalise nge-Gridsome, GraphQL kanye ne-Markdown. Iphinde ihlanganise indlela yokufaka isicelo nge-Netlify.

Isitaki sobuchwepheshe nezici

• I-Gridsome
• Buka
• IgrafuQL
• Ukuphawula
• I-Netify

Lokhu ngokuqinisekile akusona isifundo esiphelele, kodwa sihlanganisa imiqondo eyisisekelo ye-Gridsome kanye I-Markdown ingaba isiqalo esihle.

Isidlali somsindo esifana ne-SoundCloud sisebenzisa i-Quasar

I-Quasar ingolunye uhlaka lwe-Vue olungasetshenziswa ukudala izinhlelo zokusebenza zeselula. Kule phrojekthi uzodala uhlelo lokusebenza lwesidlali somsindo, isibonelo:

Yini ozoyifunda

Ngenkathi amanye amaphrojekthi egxile kakhulu ezinhlelweni zokusebenza zewebhu, lena izokukhombisa ukuthi ulwakha kanjani uhlelo lokusebenza lweselula usebenzisa i-Vue kanye nohlaka lwe-Quasar.
Kufanele usuvele unayo i-Cordova esebenza ne-Android Studio/Xcode emisiwe. Uma kungenjalo, imanuwali inesixhumanisi sewebhusayithi ye-Quasar lapho ikukhombisa ukuthi ungamisa kanjani yonke into.

Isitaki sobuchwepheshe nezici

• I-Quasar
• Buka
• I-Cordova
• I-WaveSurfer
• Izingxenye ze-UI

Iphrojekthi encane, ekhombisa amakhono e-Quasar okudala izinhlelo zokusebenza zeselula.

Source: www.habr.com