Pasiuna
Bag-o ka man sa programming o usa ka batid nga developer, ang pagkat-on sa bag-ong mga konsepto ug mga lengguwahe/mga balangkas usa ka kinahanglan niini nga industriya aron makasunod sa mga uso.
Dad-a ang React, pananglitan, nga Facebook open-sourced upat lang ka tuig ang milabay ug nahimo na nga numero uno nga kapilian alang sa mga developer sa JavaScript sa tibuok kalibutan.
Ang Vue ug Angular, siyempre, adunay ilang kaugalingon nga lehitimong fan base. Ug unya adunay Svelte ug uban pang unibersal nga mga balangkas sama sa Next.js o Nuxt.js. Ug si Gatsby, ug Gridsome, ug Quasar... ug daghan pa.
Kung gusto nimo pamatud-an ang imong kaugalingon ingon usa ka eksperyensiyado nga JavaScript developer, kinahanglan nga adunay labing menos pipila ka kasinatian sa lainlaing mga frameworks ug librarya - dugang sa pagbuhat sa trabaho sa maayo nga daan nga JS.
Aron matabangan ka nga mahimong usa ka front-end master sa 2020, nagtipon ako og siyam ka lainlaing mga proyekto, ang matag usa nagpunting sa usa ka lainlaing balangkas sa JavaScript ug librarya ingon usa ka tech stack nga mahimo nimong tukuron ug idugang sa imong portfolio. Hinumdumi nga walaβy makatabang kanimo labi pa sa paghimo sa mga butang, busa padayon, gamita ang imong hunahuna ug himoa kini nga mahitabo
Ang artikulo gihubad uban ang suporta sa EDISON Software, nga Ug .
Aplikasyon sa pagpangita sa sine gamit ang React (nga adunay mga kaw-it)
Ang unang butang nga mahimo nimong sugdan mao ang paghimo og movie search app gamit ang React. Sa ubos usa ka imahe kung unsa ang hitsura sa katapusan nga aplikasyon:
Unsa ang imong mahibal-an
Pinaagi sa paghimo niini nga app, mapauswag nimo ang imong kahanas sa React pinaagi sa paggamit sa medyo bag-o nga Hooks API. Ang pananglitan nga proyekto naggamit sa mga sangkap sa React, daghang mga kaw-it, usa ka eksternal nga API, ug siyempre pipila ka estilo sa CSS.
Tech stack ug mga feature
- Pag-react gamit ang mga kaw-it
- paghimo-reaksyon-app
- JSX
- CSS
Kung walaβy paggamit sa bisan unsang klase, kini nga mga proyekto naghatag kanimo ang hingpit nga punto sa pagsulod sa functional React ug siguradong makatabang kanimo sa 2020. makit-an nimo . Sunda ang mga instruksyon o himoa kini nga imong kaugalingon.
Chat App gamit ang Vue
Laing nindot nga proyekto nga imong buhaton mao ang paghimo og chat app gamit ang akong paborito nga JavaScript library: VueJS. Ang aplikasyon tan-awon sama niini:
Unsa ang imong mahibal-an
Sa kini nga panudlo, mahibal-an nimo kung giunsa paghimo ang usa ka Vue app gikan sa wala - paghimo sa mga sangkap, pagdumala sa estado, paghimo og mga ruta, pagkonekta sa mga serbisyo sa ikatulo nga partido, ug bisan ang pagdumala sa pag-authenticate.
Tech stack ug mga feature
- Vue
- vuex
- Vue nga Router
- Vue CLI
- Pusher
- CSS
Kini usa ka maayo kaayo nga proyekto aron makasugod sa Vue o mapaayo ang imong naa na mga kahanas aron mapauswag sa 2020. makit-an nimo .
Nindot nga weather app nga adunay Angular 8
Kini nga pananglitan makatabang kanimo sa paghimo og usa ka matahum nga app sa panahon gamit ang Angular 8:
Unsa ang imong mahibal-an
Kini nga proyekto magtudlo kanimo og bililhon nga mga kahanas sa pagtukod og mga aplikasyon gikan sa wala - gikan sa disenyo hangtod sa pag-uswag, hangtod sa usa ka aplikasyon nga andam na sa pag-deploy.
Tech stack ug mga feature
- Anggulo 8
- Firebase
- Pag-render sa kilid sa server
- CSS uban sa Grid ug Flexbox
- Mobile mahigalaon ug adaptability
- Ngitngit nga mode
- Nindot nga interface
Ang ganahan kaayo nako niining tanan nga proyekto mao nga dili ka magtuon sa mga butang nga nag-inusara. Hinuon, nahibal-an nimo ang tibuuk nga proseso sa pag-uswag, gikan sa disenyo hangtod sa katapusan nga pag-deploy.
Ang aplikasyon nga buhaton gamit ang Svelte
Ang Svelte sama sa bag-ong bata sa component-based approach - labing menos susama sa React, Vue ug Angular. Ug kini usa sa labing kainit nga bag-ong mga produkto alang sa 2020.
Ang mga To-Do nga mga app dili kinahanglan ang labing mainit nga hilisgutan, apan makatabang gyud kini kanimo nga mapauswag ang imong kahanas sa Svelte. Kini tan-awon sama niini:
Unsa ang imong mahibal-an
Kini nga panudlo magpakita kanimo kung giunsa paghimo ang usa ka aplikasyon gamit ang Svelte 3, gikan sa pagsugod hangtod sa katapusan. Magamit nimo ang mga sangkap, estilo, ug tigdumala sa panghitabo
Tech stack ug mga feature
- Hayag 3
- Mga Bahin
- Pag-istilo gamit ang CSS
- ES 6 nga syntax
Wala'y daghang maayo nga mga proyekto sa pagsugod sa Svelte, mao nga nakit-an nako .
E-commerce app gamit ang Next.js
Ang Next.js mao ang pinakasikat nga balangkas alang sa paghimo og mga aplikasyon sa React nga nagsuporta sa pag-render sa kilid sa server sa gawas sa kahon.
Kini nga proyekto magpakita kanimo kung giunsa paghimo ang usa ka aplikasyon sa e-commerce nga ingon niini:
Unsa ang imong mahibal-an
Niini nga proyekto, makakat-on ka unsaon pag-develop gamit ang Next.jsβpaghimo ug bag-ong mga panid ug mga component, pagkuha sa datos, ug estilo ug pag-deploy ug Next nga aplikasyon.
Tech stack ug mga feature
- Sunod.js
- Mga sangkap ug mga panid
- Pag-sampol sa datos
- Pag-istilo
- Pag-deploy sa Proyekto
- SSR ug SPA
Kanunay nga maayo nga adunay usa ka tinuod nga kalibutan nga pananglitan sama sa usa ka e-commerce app aron makakat-on og bag-o. Mahimo nimo .
Bug-os nga multilinggwal nga blog uban sa Nuxt.js
Ang Nuxt.js para sa Vue, kung unsa ang Next.js para sa React: usa ka maayo nga balangkas alang sa paghiusa sa gahum sa pag-render sa kilid sa server ug mga aplikasyon sa usa ka panid
Ang katapusan nga aplikasyon nga imong mahimo mahimo tan-awon sama niini:
Unsa ang imong mahibal-an
Niini nga sampol nga proyekto, makakat-on ka unsaon paghimo og kompleto nga website gamit ang Nuxt.js, gikan sa inisyal nga pag-setup hangtod sa kataposang pag-deploy.
Gipahimuslan niini ang daghang mga cool nga bahin nga gitanyag sa Nuxt, sama sa mga panid ug sangkap, ug pag-istilo gamit ang SCSS.
Tech stack ug mga feature
- Nuxt.js
- Mga sangkap ug mga panid
- Module sa block sa istorya
- Hagfish
- Vuex alang sa pagdumala sa estado
- SCSS para sa pag-istilo
- Nuxt middlewares
, nga naglakip sa daghang nindot nga mga feature sa Nuxt.js. Ako personal nga ganahan nga magtrabaho uban sa Nuxt mao nga kinahanglan nimo nga sulayan kini tungod kay kini makahimo usab kanimo nga usa ka maayo nga developer sa Vue.
Blog uban ni Gatsby
Ang Gatsby usa ka maayo kaayo nga static site generator gamit ang React ug GraphQL. Mao kini ang resulta sa proyekto:
Unsa ang imong mahibal-an
Sa kini nga panudlo, mahibal-an nimo kung giunsa ang paggamit sa Gatsby aron makahimo usa ka blog nga imong gamiton sa pagsulat sa imong kaugalingon nga mga artikulo gamit ang React ug GraphQL.
Tech stack ug mga feature
- gatsby
- React
- GraphQL
- Mga plugin ug tema
- MDX/Markdown
- Bootstrap CSS
- Mga pattern
Kung gusto nimo magsugod usa ka blog, kung giunsa kini paghimo gamit ang React ug GraphQL.
Wala ko nag-ingon nga ang WordPress usa ka dili maayo nga pagpili, apan sa Gatsby mahimo ka nga magtukod og mga website nga adunay taas nga performance gamit ang React - nga usa ka talagsaon nga kombinasyon.
Blog uban sa Gridsome
Gridsome para sa Vue... Okay, naa na namo kini sa Next/Nuxt.
Apan tinuod usab kini alang sa Gridsome ug Gatsby. Ang duha naggamit sa GraphQL isip ilang data layer, apan ang Gridsome naggamit sa VueJS. Kini usa usab ka talagsaon nga static nga site generator nga makatabang kanimo sa paghimo og maayo nga mga blog:
Unsa ang imong mahibal-an
Kini nga proyekto magtudlo kanimo kung giunsa paghimo ang usa ka yano nga blog aron makasugod sa Gridsome, GraphQL ug Markdown. Gisakup usab niini kung giunsa ang pag-deploy sa usa ka aplikasyon pinaagi sa Netlify.
Tech stack ug mga feature
- Makalilisang
- Vue
- GraphQL
- Markdown
- netlify
Dili gyud kini ang labing komprehensibo nga panudlo, apan gisakup niini ang sukaranan nga mga konsepto sa Gridsome ug .
Sama sa SoundCloud nga audio player gamit ang Quasar
Ang Quasar maoy laing Vue framework nga magamit sa paghimo og mga mobile application. Niini nga proyekto maghimo ka usa ka aplikasyon sa audio player, pananglitan:
Unsa ang imong mahibal-an
Samtang ang ubang mga proyekto nagpunting sa panguna sa mga aplikasyon sa web, kini magpakita kanimo kung giunsa paghimo ang usa ka mobile application gamit ang Vue ug ang Quasar framework.
Kinahanglan nga naa na nimo ang Cordova nga nagdagan sa Android Studio/Xcode nga gi-configure. Kung dili, ang manwal adunay link sa website sa Quasar diin gipakita nila kanimo kung giunsa ang pag-set up sa tanan.
Tech stack ug mga feature
- quasar
- Vue
- Cordova
- wavesurfer
- Mga sangkap sa UI
, nga nagpakita sa mga kapabilidad ni Quasar sa paghimo og mga mobile application.
Source: www.habr.com