įvedimas
Nesvarbu, ar esate programavimo naujokas, ar patyręs kūrėjas, norint neatsilikti nuo tendencijų šioje pramonės šakoje būtina išmokti naujų sąvokų ir kalbų/sistemų.
Paimkite, pavyzdžiui, „React“, kurį „Facebook“ sukūrė atvirasis šaltinis vos prieš ketverius metus ir jau tapo „JavaScript“ kūrėjų pasirinkimu visame pasaulyje.
Žinoma, „Vue“ ir „Angular“ taip pat turi savo teisėtą gerbėjų bazę. Ir tada yra Svelte ir kitos universalios sistemos, tokios kaip Next.js arba Nuxt.js. Ir Getsby, ir Gridsome, ir Quasar... ir daug daugiau.
Jei norite įrodyti, kad esate patyręs „JavaScript“ kūrėjas, turėtumėte turėti bent šiek tiek patirties dirbant su įvairiais karkasais ir bibliotekomis – be darbo su senu geru JS.
Siekdamas padėti jums 2020 m. tapti priekinės dalies meistru, sujungiau devynis skirtingus projektus, kurių kiekvienas sutelkia dėmesį į skirtingą „JavaScript“ sistemą ir biblioteką kaip technologijų krūvą, kurią galite sukurti ir pridėti prie savo portfelio. Atminkite, kad niekas jums nepadeda labiau, kaip iš tikrųjų kurti dalykus, todėl judėkite į priekį, naudokite savo protą ir padarykite tai
Straipsnis buvo išverstas su EDISON Software pagalba, kuri Ir .
Filmų paieškos programa naudojant „React“ (su kabliukais)
Pirmas dalykas, nuo kurio galėtumėte pradėti, yra sukurti filmų paieškos programą naudojant „React“. Toliau pateikiamas vaizdas, kaip atrodys galutinė programa:
Ką išmoksi
Sukūrę šią programą pagerinsite savo React įgūdžius naudodami palyginti naują Hooks API. Pavyzdiniame projekte naudojami „React“ komponentai, daug kabliukų, išorinė API ir, žinoma, tam tikras CSS stilius.
Technika ir funkcijos
- Reaguokite kabliukais
- sukurti-reaguoti-programą
- JSX
- CSS
Nenaudojant jokių klasių, šie projektai suteikia jums puikų įėjimo tašką į funkcinę React ir tikrai padės jums 2020 m. tu gali rasti . Vykdykite instrukcijas arba sukurkite ją savo.
Pokalbių programa su „Vue“.
Kitas puikus projektas, kurį galite padaryti, yra sukurti pokalbių programą naudojant mano mėgstamą „JavaScript“ biblioteką: „VueJS“. Programa atrodys maždaug taip:
Ką išmoksi
Šioje pamokoje sužinosite, kaip sukurti „Vue“ programą nuo nulio – kurti komponentus, tvarkyti būseną, kurti maršrutus, prisijungti prie trečiųjų šalių paslaugų ir net tvarkyti autentifikavimą.
Technika ir funkcijos
- Vue
- „Vuex“
- Vue maršrutizatorius
- Viu CLI
- Stumtuvas
- CSS
Tai tikrai puikus projektas norint pradėti dirbti su „Vue“ arba patobulinti turimus įgūdžius, kad 2020 m. tu gali rasti .
Gražių orų programa su Angular 8
Šis pavyzdys padės sukurti nuostabią orų programą naudojant Angular 8:
Ką išmoksi
Šis projektas išmokys jus vertingų įgūdžių kuriant programas nuo nulio – nuo projektavimo iki kūrimo ir iki diegimui paruoštos programos.
Technika ir funkcijos
- Kampinis 8
- "Firebase"
- Serverio pusės atvaizdavimas
- CSS su tinkleliu ir „Flexbox“.
- Patogus mobiliesiems ir prisitaikantis
- Tamsus režimas
- Graži sąsaja
Šiame visa apimančiame projekte man labai patinka tai, kad dalykų nestudijuoji atskirai. Vietoj to, jūs išmoksite visą kūrimo procesą nuo projektavimo iki galutinio diegimo.
To-Do programa naudojant Svelte
„Svelte“ yra tarsi naujas vaikas pagal komponentų metodą – bent jau panašus į „React“, „Vue“ ir „Angular“. Ir tai yra vienas karščiausių naujų produktų 2020 m.
To-Do programos nebūtinai yra karščiausia tema, tačiau jos tikrai padės patobulinti savo Svelte įgūdžius. Tai atrodys taip:
Ką išmoksi
Ši pamoka parodys, kaip sukurti programą naudojant Svelte 3 nuo pradžios iki pabaigos. Naudosite komponentus, stilių ir įvykių tvarkykles
Technika ir funkcijos
- Švelnus 3
- Komponentai
- Stilius su CSS
- ES 6 sintaksė
Gerų Svelte starterių projektų nėra daug, tad radau .
El. prekybos programa naudojant Next.js
Next.js yra populiariausia sistema, skirta kurti React programas, kurios palaiko serverio pusės atvaizdavimą.
Šis projektas parodys, kaip sukurti el. prekybos programą, kuri atrodytų taip:
Ką išmoksi
Šiame projekte sužinosite, kaip kurti naudojant Next.js – kurti naujus puslapius ir komponentus, išgauti duomenis ir stilių bei įdiegti Next programą.
Technika ir funkcijos
- Kitas.js
- Komponentai ir puslapiai
- Duomenų atranka
- Stilingas
- Projekto diegimas
- SSR ir SPA
Visada puiku turėti realų pavyzdį, pvz., el. prekybos programą, kad išmoktumėte ko nors naujo. Tu gali .
Visavertis daugiakalbis tinklaraštis su Nuxt.js
Nuxt.js skirtas Vue, o Next.js skirtas React: puiki sistema serverio atvaizdavimo ir vieno puslapio programų galiai derinti
Galutinė programa, kurią galite sukurti, atrodys taip:
Ką išmoksi
Šiame pavyzdiniame projekte sužinosite, kaip sukurti visą svetainę naudojant Nuxt.js, nuo pradinės sąrankos iki galutinio diegimo.
Jis naudojasi daugeliu puikių „Nuxt“ siūlomų funkcijų, pvz., puslapių ir komponentų bei stiliaus su SCSS.
Technika ir funkcijos
- Nuxt.js
- Komponentai ir puslapiai
- Storyblock modulis
- Eglė žuvis
- Vuex valstybės valdymui
- SCSS stiliaus formavimui
- Nuxt tarpinės programinės įrangos
, kuriame yra daug puikių Nuxt.js funkcijų. Man asmeniškai patinka dirbti su „Nuxt“, todėl turėtumėte tai išbandyti, nes tai taip pat pavers jus puikiu „Vue“ kūrėju.
Tinklaraštis su Gatsby
„Gatsby“ yra puikus statinių svetainių generatorius, naudojant „React“ ir „GraphQL“. Tai yra projekto rezultatas:
Ką išmoksi
Šioje pamokoje sužinosite, kaip naudoti „Gatsby“ kuriant tinklaraštį, kurį naudosite rašydami savo straipsnius naudodami „React“ ir „GraphQL“.
Technika ir funkcijos
- Gatsby
- Reaguoti
- „GraphQL“
- Papildiniai ir temos
- MDX / Markdown
- „Bootstrap CSS“
- šablonai
Jei kada nors norėjote sukurti tinklaraštį, kaip tai padaryti naudojant React ir GraphQL.
Nesakau, kad „WordPress“ yra blogas pasirinkimas, tačiau naudodami „Gatsby“ galite sukurti didelio našumo svetaines naudodami „React“ – tai nuostabus derinys.
Tinklaraštis su Gridsome
Gridsome for Vue... Gerai, mes jau turėjome tai su Next/Nuxt.
Tačiau tas pats pasakytina apie Gridsome ir Gatsby. Abu naudoja „GraphQL“ kaip duomenų sluoksnį, tačiau „Gridsome“ naudoja „VueJS“. Tai taip pat nuostabus statinis svetainių generatorius, kuris padės sukurti puikius tinklaraščius:
Ką išmoksi
Šis projektas išmokys jus sukurti paprastą tinklaraštį, kad galėtumėte pradėti naudotis „Gridsome“, „GraphQL“ ir „Markdown“. Taip pat aprašoma, kaip įdiegti programą per „Netlify“.
Technika ir funkcijos
- Graudu
- Vue
- „GraphQL“
- Akcijos kainos
- „Netlify“
Tai tikrai nėra pati išsamiausia pamoka, tačiau ji apima pagrindines Gridsome ir .
SoundCloud panašus garso grotuvas naudojant Quasar
„Quasar“ yra dar viena „Vue“ sistema, kurią galima naudoti kuriant mobiliąsias programas. Šiame projekte sukursite garso grotuvo programą, pavyzdžiui:
Ką išmoksi
Nors kituose projektuose daugiausia dėmesio skiriama žiniatinklio programoms, šis parodys, kaip sukurti mobiliąją programą naudojant Vue ir Quasar sistemą.
„Cordova“ jau turėtų veikti su sukonfigūruota „Android Studio“ / „Xcode“. Jei ne, vadove yra nuoroda į Quasar svetainę, kurioje parodyta, kaip viską nustatyti.
Technika ir funkcijos
- kvazaras
- Vue
- Cordova
- „WaveSurfer“.
- UI komponentai
, demonstruojantis Quasar galimybes kuriant mobiliąsias programas.
Šaltinis: www.habr.com