Sarrera
Programazioan berria izan edo garatzaile ondua izan, kontzeptu eta hizkuntza/esparru berriak ikastea ezinbestekoa da industria honetan joerekin jarraitzeko.
Hartu React, adibidez, Facebook-ek duela lau urte besterik ez zuen kode irekia eta dagoeneko mundu osoko JavaScript garatzaileen lehen aukera bihurtu dena.
Vue-k eta Angular-ek, noski, beren zale-base legitimoa ere badute. Eta gero Svelte eta beste esparru unibertsal batzuk daude, hala nola Next.js edo Nuxt.js. Eta Gatsby, eta Gridsome, eta Quasar... eta askoz gehiago.
JavaScript garatzaile esperientziadun gisa frogatu nahi baduzu, esperientzia pixka bat izan beharko zenuke hainbat esparru eta liburutegitan - JS zahar onekin lan egiteaz gain.
2020an front-end maisua izaten laguntzeko, bederatzi proiektu ezberdin bildu ditut, bakoitza JavaScript esparru eta liburutegi ezberdin batean zentratuta, zure zorroan eraiki eta gehi dezakezun teknologia-pila gisa. Gogoratu ezerk ez zaituela gauzak benetan sortzen baino gehiago laguntzen, beraz, aurrera egin, erabili gogoa eta gauzatu
Artikulua EDISON Software-ren laguntzarekin itzuli da Eta .
Filmak bilatzeko aplikazioa React erabiliz (kakoekin)
Hasteko lehenengo gauza React erabiliz filmak bilatzeko aplikazio bat sortzea da. Jarraian, azken aplikazioa nolakoa izango den irudi bat duzu:
Zer ikasiko duzu
Aplikazio hau eraikiz, zure React trebetasunak hobetuko dituzu Hooks API berri samarra erabiliz. Adibide proiektuak React osagaiak, kako asko, kanpoko API bat eta, noski, CSS estilo batzuk erabiltzen ditu.
Teknologia pila eta ezaugarriak
- Erreakzionatu kakoekin
- sor-erreakzionatzen-aplikazioa
- JSX
- CSS
Inongo klaserik erabili gabe, proiektu hauek React funtzionalerako sarrera-puntu ezin hobea ematen dizute eta 2020an lagunduko dizute zalantzarik gabe. aurki dezakezu . Jarraitu argibideak edo egin ezazu zeure burua.
Txateatu aplikazioa Vue-rekin
Egin behar duzun beste proiektu handi bat txat-aplikazio bat sortzea da nire JavaScript liburutegi gogokoena erabiliz: VueJS. Aplikazioak honelako itxura izango du:
Zer ikasiko duzu
Tutorial honetan, Vue aplikazioa hutsetik nola egiten ikasiko duzu: osagaiak sortzen, egoera maneiatzen, ibilbideak sortzen, hirugarrenen zerbitzuetara konektatzen eta autentifikazioa ere maneiatzen.
Teknologia pila eta ezaugarriak
- ikuspegi
- vuex
- Vue Router
- Ikusi CLI
- Pusher
- CSS
Proiektu bikaina da Vue-rekin hasteko edo zure trebetasunak hobetzeko 2020an garapenean sartzeko. aurki dezakezu .
Eguraldi aplikazio ederra Angular 8-rekin
Adibide honek eguraldi aplikazio eder bat sortzen lagunduko dizu Angular 8 erabiliz:
Zer ikasiko duzu
Proiektu honek aplikazioak hutsetik eraikitzeko trebetasun baliotsuak irakatsiko dizkizu: diseinutik garapenera arte, inplementatzeko prest dagoen aplikazioraino.
Teknologia pila eta ezaugarriak
- 8. angelua
- Firebase
- Zerbitzariaren aldean errendatzea
- CSS Grid eta Flexbox-ekin
- Mugikorretarako errespetua eta moldagarritasuna
- Modu iluna
- Interfaze ederra
Oso gogoko dudana proiektu guzti-guzti honetan ez duzula gauzak isolatuta ikasten da. Horren ordez, garapen prozesu osoa ikasten duzu, diseinutik azken inplementazioraino.
To-Do aplikazioa Svelte erabiliz
Svelte osagaietan oinarritutako ikuspegian ume berria bezalakoa da - React, Vue eta Angular-en antzekoa, gutxienez. Eta hau 2020rako produktu berrienetako bat da.
Egin beharreko aplikazioak ez dira zertan gairik beroena, baina benetan lagunduko dizu zure Svelte gaitasunak hobetzen. Honela izango da:
Zer ikasiko duzu
Tutorial honek Svelte 3 erabiliz aplikazio bat nola sortu erakutsiko dizu, hasieratik amaierara. Osagaiak, estiloa eta gertaeren kudeatzaileak erabiliko dituzu
Teknologia pila eta ezaugarriak
- Svelte 3
- Osagaiak
- Estiloa CSS-rekin
- ES 6 sintaxia
Ez dago Svelte hasierako proiektu on asko, beraz, aurkitu dut .
Merkataritza elektronikoko aplikazioa Next.js erabiliz
Next.js zerbitzariaren aldetik errendatzea onartzen duten React aplikazioak eraikitzeko esparru ezagunena da.
Proiektu honek honelako itxura duen merkataritza elektronikoko aplikazio bat nola sortu erakutsiko dizu:
Zer ikasiko duzu
Proiektu honetan, Next.js-ekin nola garatzen ikasiko duzu: orri eta osagai berriak sortu, datuak atera eta Next aplikazio bat estiloa eta inplementatu.
Teknologia pila eta ezaugarriak
- Hurrengoa.js
- Osagaiak eta Orrialdeak
- Datuen laginketa
- stylization
- Proiektuaren hedapena
- SSR eta SPA
Beti ona da mundu errealeko adibide bat izatea merkataritza elektronikoko aplikazio bat bezalakoa zerbait berria ikasteko. Ahal duzu .
Blog eleanitza osoa Nuxt.js-ekin
Nuxt.js Vue-rentzat da, Next.js zer den React-entzat: zerbitzariaren alboko errendatzearen boterea eta orrialde bakarreko aplikazioak konbinatzeko esparru bikaina.
Sor dezakezun azken aplikazioa itxura hau izango du:
Zer ikasiko duzu
Lagin proiektu honetan, Nuxt.js erabiliz webgune osoa nola sortu ikasiko duzu, hasierako konfiguraziotik azken inplementaziora arte.
Nuxtek eskaintzen dituen funtzio eder asko aprobetxatzen ditu, hala nola orriak eta osagaiak, eta SCSS-ekin estiloa.
Teknologia pila eta ezaugarriak
- Nuxt.js
- Osagaiak eta Orrialdeak
- Storyblock modulua
- Arraina
- Estatuko kudeaketarako Vuex
- Estilorako SCSS
- Nuxt middlewareak
, Nuxt.js ezaugarri bikain asko biltzen dituena. Pertsonalki maite dut Nuxt-ekin lan egitea, beraz, probatu beharko zenuke Vue garatzaile bikaina bihurtuko zaitu eta.
Gatsbyrekin bloga
Gatsby gune estatikoko sorgailu bikaina da React eta GraphQL erabiliz. Hau da proiektuaren emaitza:
Zer ikasiko duzu
Tutorial honetan, Gatsby nola erabiltzen ikasiko duzu React eta GraphQL erabiliz zure artikuluak idazteko erabiliko duzun blog bat sortzeko.
Teknologia pila eta ezaugarriak
- gatsby
- Erreakzionatzeko
- GraphQL
- Pluginak eta gaiak
- MDX/Markdown
- Bootstrap CSS
- txantiloiak
Inoiz blog bat sortu nahi izan baduzu, React eta GraphQL erabiliz nola egin.
Ez dut esaten WordPress aukera txarra denik, baina Gatsbyrekin errendimendu handiko webguneak eraiki ditzakezu React erabiliz, konbinazio harrigarria da.
Bloga Gridsomerekin
Gridsome Vue-rako... Ados, hau jada bagenuen Next/Nuxt-ekin.
Baina gauza bera gertatzen da Gridsome eta Gatsbyrekin. Biek GraphQL erabiltzen dute datu-geruza gisa, baina Gridsomek VueJS erabiltzen du. Hau ere blog bikainak sortzen lagunduko dizun gune-sorgailu estatiko harrigarria da:
Zer ikasiko duzu
Proiektu honek blog sinple bat nola sortzen irakatsiko dizu Gridsome, GraphQL eta Markdown-ekin hasteko. Netlify-ren bidez aplikazio bat nola zabaldu ere azaltzen du.
Teknologia pila eta ezaugarriak
- Gridsome
- ikuspegi
- GraphQL
- Markdown
- Netlify
Hau ez da, zalantzarik gabe, tutorial zabalena, baina Gridsome eta oinarrizko kontzeptuak biltzen ditu .
SoundCloud antzeko audio erreproduzitzailea Quasar erabiliz
Quasar mugikorretarako aplikazioak sortzeko erabil daitekeen Vue marko bat da. Proiektu honetan audio erreproduzitzailearen aplikazio bat sortuko duzu, adibidez:
Zer ikasiko duzu
Beste proiektu batzuek batez ere web aplikazioetan oinarritzen diren bitartean, honek Vue eta Quasar markoa erabiliz mugikorretarako aplikazio bat nola sortu erakutsiko dizu.
Dagoeneko Cordova izan beharko zenuke exekutatzen Android Studio/Xcode konfiguratuta. Hala ez bada, eskuliburuak Quasar webgunerako esteka du eta bertan dena nola konfiguratu erakusten dizute.
Teknologia pila eta ezaugarriak
- quasar
- ikuspegi
- Cordova
- WaveSurfer
- UI osagaiak
, Quasar-ek mugikorretarako aplikazioak sortzeko dituen gaitasunak erakutsiz.
Iturria: www.habr.com