Inngangur
Hvort sem þú ert nýr í forritun eða vanur verktaki, þá er nauðsynlegt að læra ný hugtök og tungumál/ramma í þessum iðnaði til að fylgjast með þróuninni.
Tökum sem dæmi React, sem Facebook gaf út opinn hugbúnað fyrir aðeins fjórum árum og hefur þegar orðið númer eitt fyrir JavaScript forritara um allan heim.
Vue og Angular hafa auðvitað líka sinn eigin lögmæta aðdáendahóp. Og svo er það Svelte og önnur alhliða ramma eins og Next.js eða Nuxt.js. Og Gatsby, og Gridsome, og Quasar... og margt fleira.
Ef þú vilt sanna þig sem reyndur JavaScript forritari ættir þú að hafa að minnsta kosti nokkra reynslu af ýmsum ramma og bókasöfnum - auk þess að vinna með gamla góða JS.
Til að hjálpa þér að verða framandi meistari árið 2020 hef ég sett saman níu mismunandi verkefni, sem hvert um sig einbeitir þér að mismunandi JavaScript ramma og bókasafni sem tæknistafla sem þú getur smíðað og bætt við eignasafnið þitt. Mundu að ekkert hjálpar þér meira en að búa til hluti í raun og veru, svo farðu áfram, notaðu hugann og láttu það gerast
Greinin var þýdd með stuðningi EDISON Software, sem Og .
Kvikmyndaleitarforrit með React (með krókum)
Það fyrsta sem þú gætir byrjað á er að búa til kvikmyndaleitarforrit með React. Hér að neðan er mynd af því hvernig lokaumsóknin mun líta út:
Hvað muntu læra
Með því að smíða þetta forrit muntu bæta React færni þína með því að nota tiltölulega nýja Hooks API. Dæmiverkefnið notar React íhluti, fullt af krókum, utanaðkomandi API og auðvitað smá CSS stíl.
Tæknistafla og eiginleikar
- Bregðast við með krókum
- búa til-bregðast við-app
- JSX
- CSS
Án þess að nota neina flokka gefa þessi verkefni þér hið fullkomna inngangspunkt í hagnýt React og munu örugglega hjálpa þér árið 2020. þú getur fundið . Fylgdu leiðbeiningunum eða gerðu það að þínu eigin.
Spjallforrit með Vue
Annað frábært verkefni fyrir þig að gera er að búa til spjallforrit með því að nota uppáhalds JavaScript bókasafnið mitt: VueJS. Forritið mun líta eitthvað svona út:
Hvað muntu læra
Í þessari kennslu muntu læra hvernig á að búa til Vue app frá grunni - búa til íhluti, meðhöndla ástand, búa til leiðir, tengjast þjónustu þriðja aðila og jafnvel meðhöndla auðkenningu.
Tæknistafla og eiginleikar
- Vue
- vuex
- Vue leið
- CLI útsýni
- Pusher
- CSS
Þetta er virkilega frábært verkefni til að byrja með Vue eða bæta núverandi færni þína til að komast í þróun árið 2020. þú getur fundið .
Fallegt veðurapp með Angular 8
Þetta dæmi mun hjálpa þér að búa til fallegt veðurforrit með því að nota Angular 8:
Hvað muntu læra
Þetta verkefni mun kenna þér dýrmæta færni í að byggja upp forrit frá grunni - frá hönnun til þróunar, alla leið til dreifingar-tilbúið forrits.
Tæknistafla og eiginleikar
- Hyrndur 8
- Firebase
- Tjónahlið flutningur
- CSS með Grid og Flexbox
- Farsímavænt og aðlögunarhæfni
- Dökkur háttur
- Fallegt viðmót
Það sem ég virkilega elska við þetta alltumlykjandi verkefni er að þú lærir ekki hlutina í einangrun. Þess í stað lærir þú allt þróunarferlið, frá hönnun til loka dreifingar.
Verkefnisforrit sem notar Svelte
Svelte er eins og nýi strákurinn í íhlutabundinni nálgun - að minnsta kosti svipað og React, Vue og Angular. Og þetta er ein heitasta nýja vara ársins 2020.
Verkefnisforrit eru ekki endilega heitasta umræðuefnið, en það mun virkilega hjálpa þér að skerpa á Svelte-kunnáttu þinni. Það mun líta svona út:
Hvað muntu læra
Þessi kennsla mun sýna þér hvernig á að búa til forrit með Svelte 3, frá upphafi til enda. Þú munt nota íhluti, stíl og viðburðastjórnun
Tæknistafla og eiginleikar
- Svelte 3
- Hluti
- Stíll með CSS
- ES 6 setningafræði
Það eru ekki mörg góð Svelte byrjendaverkefni, svo ég fann .
Rafræn viðskipti app með Next.js
Next.js er vinsælasta ramminn til að smíða React forrit sem styðja flutning á netþjóni út úr kassanum.
Þetta verkefni mun sýna þér hvernig á að búa til rafræn viðskipti sem lítur svona út:
Hvað muntu læra
Í þessu verkefni muntu læra hvernig á að þróa með Next.js—búa til nýjar síður og íhluti, draga út gögn og stíla og setja upp Next forrit.
Tæknistafla og eiginleikar
- Next.js
- Íhlutir og síður
- Sýnataka úr gögnum
- Styling
- Verkefnadreifing
- SSR og SPA
Það er alltaf frábært að hafa raunverulegt dæmi eins og netverslunarforrit til að læra eitthvað nýtt. Þú getur .
Fullbúið fjöltyngt blogg með Nuxt.js
Nuxt.js er fyrir Vue, það sem Next.js er fyrir React: frábær umgjörð til að sameina kraft birgingar á netþjóni og forrita á einni síðu
Lokaforritið sem þú getur búið til mun líta svona út:
Hvað muntu læra
Í þessu sýnishornsverkefni lærir þú hvernig á að búa til fullkomna vefsíðu með Nuxt.js, frá upphaflegri uppsetningu til lokauppsetningar.
Það nýtir sér marga af þeim flottu eiginleikum sem Nuxt hefur upp á að bjóða, svo sem síður og íhluti, og stíl með SCSS.
Tæknistafla og eiginleikar
- Nuxt.js
- Íhlutir og síður
- Storyblock mát
- Hagfiskur
- Vuex fyrir ríkisstjórnun
- SCSS fyrir stíl
- Nuxt millivörur
, sem inniheldur marga frábæra Nuxt.js eiginleika. Ég persónulega elska að vinna með Nuxt svo þú ættir að prófa það þar sem það mun líka gera þig að frábærum Vue verktaki.
Bloggaðu með Gatsby
Gatsby er frábær kyrrstöðuframleiðandi sem notar React og GraphQL. Þetta er niðurstaða verkefnisins:
Hvað muntu læra
Í þessari kennslu muntu læra hvernig á að nota Gatsby til að búa til blogg sem þú munt nota til að skrifa þínar eigin greinar með React og GraphQL.
Tæknistafla og eiginleikar
- Gatsby
- Bregðast
- GraphQL
- Viðbætur og þemu
- MDX/Markdown
- Bootstrap CSS
- Sniðmát
Ef þig hefur einhvern tíma langað til að stofna blogg, um hvernig á að gera það með React og GraphQL.
Ég er ekki að segja að WordPress sé slæmur kostur, en með Gatsby geturðu byggt upp afkastamikil vefsíður með því að nota React - sem er mögnuð samsetning.
Bloggaðu með Gridsome
Gridsome fyrir Vue... Allt í lagi, við höfðum þetta þegar með Next/Nuxt.
En það sama á við um Gridsome og Gatsby. Báðir nota GraphQL sem gagnalag sitt, en Gridsome notar VueJS. Þetta er líka ótrúlegur kyrrstæður vefur sem mun hjálpa þér að búa til frábær blogg:
Hvað muntu læra
Þetta verkefni mun kenna þér hvernig á að búa til einfalt blogg til að byrja með Gridsome, GraphQL og Markdown. Það fjallar einnig um hvernig á að dreifa forriti í gegnum Netlify.
Tæknistafla og eiginleikar
- Gríðarlegt
- Vue
- GraphQL
- Markdown
- Netlify
Þetta er vissulega ekki umfangsmesta kennsluefnið, en það nær yfir grunnhugtök Gridsome og .
SoundCloud-líkur hljóðspilari með Quasar
Quasar er annar Vue ramma sem hægt er að nota til að búa til farsímaforrit. Í þessu verkefni muntu búa til hljóðspilaraforrit, til dæmis:
Hvað muntu læra
Þó önnur verkefni einblíni aðallega á vefforrit, mun þetta sýna þér hvernig á að búa til farsímaforrit með Vue og Quasar ramma.
Þú ættir nú þegar að hafa Cordova í gangi með Android Studio/Xcode stillt. Ef ekki, þá hefur handbókin tengil á Quasar vefsíðuna þar sem þeir sýna þér hvernig á að setja allt upp.
Tæknistafla og eiginleikar
- Quasar
- Vue
- Cordova
- WaveSurfer
- HÍ íhlutir
, sem sýnir getu Quasar til að búa til farsímaforrit.
Heimild: www.habr.com