Cyflwyniad
P'un a ydych yn newydd i raglennu neu eisoes yn ddatblygwr profiadol, yn y diwydiant hwn, mae'n rhaid dysgu cysyniadau ac ieithoedd/fframweithiau newydd i gadw i fyny Γ’ thueddiadau.
Cymerwch, er enghraifft, React, a oedd yn ffynhonnell agored yn unig gan Facebook bedair blynedd yn Γ΄l ac sydd eisoes wedi dod yn brif ddewis i ddatblygwyr JavaScript ledled y byd.
Mae gan Vue ac Angular, wrth gwrs, eu sylfaen gefnogwyr gyfreithlon hefyd. Ac yna mae Svelte a fframweithiau pwrpas cyffredinol eraill fel Next.js neu Nuxt.js. A Gatsby, a Gridsome, a Quasar ... a llawer mwy.
Os ydych chi am brofi'ch hun fel datblygwr JavaScript profiadol, mae'n rhaid bod gennych o leiaf rywfaint o brofiad gyda gwahanol fframweithiau a llyfrgelloedd - yn ogystal Γ’ gwneud hen waith JS da.
Er mwyn eich helpu i ddod yn feistr pen blaen yn 2020, rwyf wedi llunio naw prosiect gwahanol, pob un yn canolbwyntio ar wahanol fframweithiau JavaScript a llyfrgelloedd fel pentwr technoleg y gallwch ei adeiladu a'i ychwanegu at eich portffolio. Cofiwch nad oes dim yn eich helpu chi yn fwy na rhoi pethau ar waith, felly ewch ymlaen, trowch eich meddwl ymlaen a gwnewch hynny'n bosibl.
Cyfieithwyd yr erthygl gyda chefnogaeth Meddalwedd EDISON, sydd Ac .
Ap chwilio ffilm gyda React (gyda bachau)
Y peth cyntaf y gallwch chi ddechrau ag ef yw adeiladu ap chwilio ffilm gydag React. Isod mae delwedd o sut olwg fydd ar yr ap terfynol:
Beth fyddwch chi'n ei ddysgu
Trwy adeiladu'r cymhwysiad hwn, byddwch yn gwella'ch sgiliau React gan ddefnyddio'r API Hooks cymharol newydd. Mae'r prosiect sampl yn defnyddio cydrannau React, llawer o fachau, API allanol, ac wrth gwrs rhywfaint o arddull CSS.
Pentwr technoleg a nodweddion
- Ymateb gyda bachau
- creu-ymateb-app
- jsx
- CSS
Heb ddefnyddio unrhyw ddosbarthiadau, mae'r prosiectau hyn yn rhoi'r pwynt mynediad perffaith i chi i React swyddogaethol a byddant yn bendant yn eich helpu yn 2020. gallwch ddod o hyd . Dilynwch y cyfarwyddiadau neu gwnewch ef yn un eich hun.
Ap sgwrsio gyda Vue
Prosiect gwych arall i chi yw adeiladu ap sgwrsio gan ddefnyddio fy hoff lyfrgell JavaScript: VueJS. Bydd y cais yn edrych rhywbeth fel hyn:
Beth fyddwch chi'n ei ddysgu
Yn y tiwtorial hwn, byddwch chi'n dysgu sut i wneud ap Vue o'r dechrau - creu cydrannau, trin cyflyrau, creu llwybrau, cysylltu Γ’ gwasanaethau trydydd parti, a hyd yn oed trin dilysu.
Pentwr technoleg a nodweddion
- Vue
- vuex
- Llwybrydd Vue
- Vue CLI
- Pusher
- CSS
Mae hwn yn brosiect gwych i ddechrau gyda Vue neu wella eich sgiliau presennol i ddechrau datblygu yn 2020. gallwch ddod o hyd .
Ap tywydd hyfryd gydag Angular 8
Bydd yr enghraifft hon yn eich helpu i adeiladu ap tywydd hardd gan ddefnyddio Angular 8:
Beth fyddwch chi'n ei ddysgu
Bydd y prosiect hwn yn dysgu sgiliau gwerthfawr i chi mewn adeiladu cymwysiadau o'r dechrau - o ddylunio i ddatblygiad, yr holl ffordd i gymhwysiad parod i'w ddefnyddio.
Pentwr technoleg a nodweddion
- Ongl 8
- Firebase
- Rendro Ochr y Gweinydd
- CSS gyda Grid a Flexbox
- Cyfeillgar i ffonau symudol a'r gallu i addasu
- Modd tywyll
- Rhyngwyneb hardd
Yr hyn rydw i wir yn ei hoffi am y prosiect cynhwysfawr hwn yw nad ydych chi'n astudio pethau ar eich pen eich hun. Yn lle hynny, rydych chi'n dysgu'r broses ddatblygu gyfan o'r dylunio i'r defnydd terfynol.
Ap To-Do gyda Svelte
Mae Svelte fel y plentyn newydd yn y dull cydrannol - o leiaf yn debyg i React, Vue ac Angular. A dyma un o'r cynhyrchion newydd poethaf ar gyfer 2020.
Nid apiau I'w Gwneud yw'r pwnc poethaf o reidrwydd, ond byddant yn eich helpu i fireinio'ch sgiliau Svelte. Bydd yn edrych fel hyn:
Beth fyddwch chi'n ei ddysgu
Bydd y tiwtorial hwn yn dangos i chi sut i greu cymhwysiad gan ddefnyddio Svelte 3, o'r dechrau i'r diwedd. Byddwch yn defnyddio cydrannau, steilio a thrinwyr digwyddiadau
Pentwr technoleg a nodweddion
- Svelte 3
- Cydrannau
- Steilio gyda CSS
- Cystrawen ES6
Nid oes llawer o brosiectau cychwynnol Svelte da, felly darganfyddais .
Ap e-fasnach gyda Next.js
Next.js yw'r fframwaith mwyaf poblogaidd ar gyfer adeiladu apiau React sy'n cefnogi rendro ochr y gweinydd allan o'r bocs.
Bydd y prosiect hwn yn dangos i chi sut i greu cymhwysiad e-fasnach sy'n edrych fel hyn:
Beth fyddwch chi'n ei ddysgu
Yn y prosiect hwn, byddwch yn dysgu sut i ddatblygu gyda Next.js - creu tudalennau a chydrannau newydd, adalw data, ac arddull a defnyddio rhaglen Next.
Pentwr technoleg a nodweddion
- Nesaf.js
- Cydrannau a Tudalennau
- Samplu data
- Styleiddio
- Defnyddio Prosiect
- SSR ac AGA
Mae bob amser yn wych cael enghraifft bywyd go iawn fel app e-fasnach i ddysgu rhywbeth newydd. Gallwch chi .
Blog amlieithog llawn gyda Nuxt.js
Mae Nuxt.js ar gyfer Vue, fel Next.js ar gyfer React: fframwaith gwych ar gyfer cyfuno rendrad ar ochr y gweinydd a chymwysiadau un dudalen
Bydd y cais olaf y gallwch ei greu yn edrych fel hyn:
Beth fyddwch chi'n ei ddysgu
Yn y prosiect enghreifftiol hwn, byddwch yn dysgu sut i adeiladu gwefan gyflawn gan ddefnyddio Nuxt.js, o'r gosodiad cychwynnol i'r defnydd terfynol.
Mae'n manteisio ar lawer o'r nodweddion cΕ΅l sydd gan Nuxt i'w cynnig, megis tudalennau a chydrannau, a steilio gyda SCSS.
Pentwr technoleg a nodweddion
- Nuxt.js
- Cydrannau a Tudalennau
- modiwl bloc stori
- cymysgeddau
- Vuex ar gyfer rheolaeth y wladwriaeth
- SCSS ar gyfer steilio
- Nuxt nwyddau canol
, sy'n cynnwys llawer o nodweddion gwych Nuxt.js. Yn bersonol, rydw i wrth fy modd yn gweithio gyda Nuxt felly dylech chi roi cynnig arni gan y bydd hefyd yn eich gwneud chi'n ddatblygwr Vue gwych.
Blog gyda Gatsby
Mae Gatsby yn gynhyrchydd safle sefydlog gwych gan ddefnyddio React a GraphQL. Dyma ganlyniad y prosiect:
Beth fyddwch chi'n ei ddysgu
Yn y tiwtorial hwn, byddwch yn dysgu sut i ddefnyddio Gatsby i greu blog y byddwch yn ei ddefnyddio i ysgrifennu eich erthyglau eich hun gan ddefnyddio React a GraphQL.
Pentwr technoleg a nodweddion
- Gatsby
- Ymateb
- GraffQL
- Ategion a ThemΓ’u
- MDX/Markdown
- Bootstrap CSS
- templedi
Os oeddech chi erioed eisiau dechrau blog, sut i'w wneud gan ddefnyddio React a GraphQL.
Dydw i ddim yn dweud bod WordPress yn ddewis gwael, ond gyda Gatsby gallwch chi adeiladu gwefannau perfformiad uchel gan ddefnyddio React - sy'n gyfuniad anhygoel.
Blog gyda Gridsome
Gridsome ar gyfer Vue⦠Iawn, roedd gennym ni hwnnw eisoes gyda Next/Nuxt.
Ond mae'r un peth yn wir am Gridsome a Gatsby. Mae'r ddau yn defnyddio GraphQL fel eu haen ddata, ond mae Gridsome yn defnyddio VueJS. Mae hefyd yn gynhyrchydd gwefan sefydlog anhygoel i'ch helpu chi i greu blogiau gwych:
Beth fyddwch chi'n ei ddysgu
Bydd y prosiect hwn yn eich dysgu sut i greu blog syml i ddechrau gyda Gridsome, GraphQL a Markdown. Mae hefyd yn esbonio sut i ddefnyddio cais trwy Netlify.
Pentwr technoleg a nodweddion
- gridsome
- Vue
- GraffQL
- Markdown
- rhwydi
Yn sicr nid dyma'r tiwtorial mwyaf cyflawn, ond mae'n cwmpasu cysyniadau sylfaenol Gridsome a .
Chwaraewr sain tebyg i SoundCloud gan ddefnyddio Quasar
Mae Quasar yn fframwaith Vue arall y gellir ei ddefnyddio i adeiladu apiau symudol. Yn y prosiect hwn, byddwch yn creu cymhwysiad chwaraewr sain fel:
Beth fyddwch chi'n ei ddysgu
Er bod prosiectau eraill yn canolbwyntio'n bennaf ar apiau gwe, bydd yr un hwn yn dangos i chi sut i adeiladu ap symudol gan ddefnyddio fframwaith Vue a Quasar.
Dylai fod gennych chi Cordova sy'n gweithio eisoes gyda Android Studio / Xcode wedi'i sefydlu. Os na, mae gan y llawlyfr ddolen i wefan Quasar lle maen nhw'n dangos i chi sut i sefydlu popeth.
Pentwr technoleg a nodweddion
- Quasar
- Vue
- Cordova
- TonSyrffwr
- Cydrannau UI
, gan ddangos galluoedd Quasar ar gyfer adeiladu cymwysiadau symudol.
Ffynhonnell: hab.com