Pagpapakilala
Bago ka man sa programming o isang batikang developer, ang pag-aaral ng mga bagong konsepto at wika/framework ay kinakailangan sa industriyang ito upang makasabay sa mga uso.
Kunin ang React, halimbawa, na open-source ng Facebook apat na taon lamang ang nakalipas at naging numero unong pagpipilian para sa mga developer ng JavaScript sa buong mundo.
Ang Vue at Angular, siyempre, ay mayroon ding sariling lehitimong fan base. At pagkatapos ay mayroong Svelte at iba pang unibersal na balangkas tulad ng Next.js o Nuxt.js. At si Gatsby, at Gridsome, at Quasar... at marami pang iba.
Kung gusto mong patunayan ang iyong sarili bilang isang bihasang developer ng JavaScript, dapat ay mayroon kang hindi bababa sa ilang karanasan sa iba't ibang mga frameworks at library - bilang karagdagan sa paggawa ng trabaho sa magandang lumang JS.
Para matulungan kang maging isang front-end master sa 2020, nagsama-sama ako ng siyam na magkakaibang proyekto, bawat isa ay tumutuon sa ibang JavaScript framework at library bilang isang tech stack na maaari mong buuin at idagdag sa iyong portfolio. Tandaan na walang makakatulong sa iyo nang higit pa sa aktwal na paglikha ng mga bagay, kaya sumulong, gamitin ang iyong isip at gawin itong mangyari
Ang artikulo ay isinalin sa suporta ng EDISON Software, na At .
App sa paghahanap ng pelikula gamit ang React (na may mga kawit)
Ang unang bagay na maaari mong simulan ay ang gumawa ng movie search app gamit ang React. Nasa ibaba ang isang imahe ng kung ano ang magiging hitsura ng huling aplikasyon:
Ano ang matutunan mo
Sa pamamagitan ng pagbuo ng app na ito, mapapabuti mo ang iyong mga kasanayan sa React sa pamamagitan ng paggamit ng medyo bagong Hooks API. Ang halimbawang proyekto ay gumagamit ng mga bahagi ng React, maraming kawit, isang panlabas na API, at siyempre ilang CSS styling.
Tech stack at mga tampok
- Gumamit ng mga kawit
- lumikha-reaksyon-app
- JSX
- CSS
Nang hindi gumagamit ng anumang klase, binibigyan ka ng mga proyektong ito ng perpektong entry point sa functional React at tiyak na makakatulong sa iyo sa 2020. mahahanap mo . Sundin ang mga tagubilin o gawin itong sarili mo.
Chat App gamit ang Vue
Ang isa pang magandang proyekto na gagawin mo ay ang gumawa ng chat app gamit ang paborito kong JavaScript library: VueJS. Magiging ganito ang hitsura ng application:
Ano ang matutunan mo
Sa tutorial na ito, matututunan mo kung paano gumawa ng Vue app mula sa simula - paggawa ng mga bahagi, paghawak ng estado, paggawa ng mga ruta, pagkonekta sa mga serbisyo ng third-party, at kahit na paghawak sa pagpapatunay.
Tech stack at mga tampok
- Vue
- vuex
- Vue Router
- CLI view
- Pusher
- CSS
Isa itong napakagandang proyekto upang makapagsimula sa Vue o pagbutihin ang iyong mga umiiral nang kakayahan upang makapasok sa pag-unlad sa 2020. mahahanap mo .
Magandang weather app na may Angular 8
Tutulungan ka ng halimbawang ito na lumikha ng magandang weather app gamit ang Angular 8:
Ano ang matutunan mo
Ang proyektong ito ay magtuturo sa iyo ng mahahalagang kasanayan sa pagbuo ng mga application mula sa simula - mula sa disenyo hanggang sa pag-unlad, hanggang sa isang deployment-ready na application.
Tech stack at mga tampok
- anggulo 8
- Firebase
- Pag-render sa gilid ng server
- CSS na may Grid at Flexbox
- Mobile friendly at kakayahang umangkop
- Madilim na mode
- Magandang interface
Ang talagang gusto ko sa lahat-lahat na proyektong ito ay hindi mo pinag-aaralan ang mga bagay nang nag-iisa. Sa halip, matutunan mo ang buong proseso ng pag-develop, mula sa disenyo hanggang sa huling pag-deploy.
To-Do application gamit ang Svelte
Si Svelte ay tulad ng bagong bata sa component-based na diskarte - hindi bababa sa katulad ng React, Vue at Angular. At ito ang isa sa pinakamainit na bagong produkto para sa 2020.
Ang mga To-Do app ay hindi naman ang pinakamainit na paksa, ngunit ito ay talagang makakatulong sa iyo na mahasa ang iyong mga kasanayan sa Svelte. Magiging ganito ang hitsura:
Ano ang matutunan mo
Ipapakita sa iyo ng tutorial na ito kung paano lumikha ng isang application gamit ang Svelte 3, mula simula hanggang matapos. Gagamitin mo ang mga bahagi, pag-istilo, at mga tagapangasiwa ng kaganapan
Tech stack at mga tampok
- Makinis 3
- Piraso
- Pag-istilo gamit ang CSS
- ES 6 syntax
Walang maraming magagandang Svelte starter projects, kaya nakahanap ako .
E-commerce app gamit ang Next.js
Ang Next.js ay ang pinakasikat na framework para sa pagbuo ng mga React application na sumusuporta sa server-side rendering sa labas ng kahon.
Ipapakita sa iyo ng proyektong ito kung paano lumikha ng isang e-commerce na application na ganito ang hitsura:
Ano ang matutunan mo
Sa proyektong ito, matututunan mo kung paano bumuo gamit ang Next.jsβgumawa ng mga bagong page at bahagi, kumuha ng data, at istilo at mag-deploy ng Susunod na application.
Tech stack at mga tampok
- Susunod.js
- Mga Bahagi at Mga Pahina
- Pagsa-sample ng data
- Stylization
- Project Deployment
- SSR at SPA
Laging magandang magkaroon ng isang tunay na halimbawa sa mundo tulad ng isang e-commerce app upang matuto ng bago. Kaya mo .
Ganap na maraming wikang blog na may Nuxt.js
Ang Nuxt.js ay para sa Vue, kung ano ang Next.js para sa React: isang mahusay na framework para sa pagsasama-sama ng kapangyarihan ng pag-render sa gilid ng server at mga single-page na application
Ang huling application na maaari mong gawin ay magiging ganito:
Ano ang matutunan mo
Sa sample na proyektong ito, matututunan mo kung paano gumawa ng kumpletong website gamit ang Nuxt.js, mula sa paunang pag-setup hanggang sa huling deployment.
Sinasamantala nito ang marami sa mga cool na feature na iniaalok ng Nuxt, gaya ng mga page at component, at pag-istilo gamit ang SCSS.
Tech stack at mga tampok
- Nuxt.js
- Mga Bahagi at Mga Pahina
- Storyblock module
- Hagfish
- Vuex para sa pamamahala ng estado
- SCSS para sa pag-istilo
- Nuxt middlewares
, na kinabibilangan ng maraming magagandang feature ng Nuxt.js. Personal kong gustong makipagtulungan sa Nuxt kaya dapat mo itong subukan dahil gagawin ka rin nitong isang mahusay na developer ng Vue.
Blog kasama si Gatsby
Ang Gatsby ay isang mahusay na static na site generator gamit ang React at GraphQL. Ito ang resulta ng proyekto:
Ano ang matutunan mo
Sa tutorial na ito, matututunan mo kung paano gamitin ang Gatsby para gumawa ng blog na gagamitin mo sa pagsulat ng sarili mong mga artikulo gamit ang React at GraphQL.
Tech stack at mga tampok
- gatsby
- Gantihin
- GraphQL
- Mga plugin at tema
- MDX/Markdown
- Bootstrap CSS
- Template
Kung gusto mo nang magsimula ng isang blog, kung paano ito gagawin gamit ang React at GraphQL.
Hindi ko sinasabing ang WordPress ay isang masamang pagpipilian, ngunit sa Gatsby maaari kang bumuo ng mga website na may mataas na pagganap gamit ang React - na isang kamangha-manghang kumbinasyon.
Blog na may Gridsome
Gridsome para sa Vue... Okay, mayroon na kami nito sa Next/Nuxt.
Ngunit totoo rin ito para sa Gridsome at Gatsby. Parehong gumagamit ng GraphQL bilang kanilang data layer, ngunit ang Gridsome ay gumagamit ng VueJS. Isa rin itong kamangha-manghang static na generator ng site na tutulong sa iyong lumikha ng magagandang blog:
Ano ang matutunan mo
Ang proyektong ito ay magtuturo sa iyo kung paano lumikha ng isang simpleng blog upang makapagsimula sa Gridsome, GraphQL at Markdown. Sinasaklaw din nito kung paano mag-deploy ng application sa pamamagitan ng Netlify.
Tech stack at mga tampok
- nakakadiri
- Vue
- GraphQL
- Markdown
- netlify
Ito ay tiyak na hindi ang pinaka-komprehensibong tutorial, ngunit ito ay sumasaklaw sa mga pangunahing konsepto ng Gridsome at .
SoundCloud-like na audio player gamit ang Quasar
Ang Quasar ay isa pang balangkas ng Vue na maaaring magamit upang lumikha ng mga mobile application. Sa proyektong ito gagawa ka ng isang application ng audio player, halimbawa:
Ano ang matutunan mo
Habang ang ibang mga proyekto ay pangunahing nakatuon sa mga web application, ang isang ito ay magpapakita sa iyo kung paano lumikha ng isang mobile application gamit ang Vue at ang Quasar framework.
Dapat ay mayroon ka nang Cordova na tumatakbo nang naka-configure ang Android Studio/Xcode. Kung hindi, may link ang manual sa website ng Quasar kung saan ipinapakita nila sa iyo kung paano i-set up ang lahat.
Tech stack at mga tampok
- quasar
- Vue
- Cordova
- WaveSurfer
- Mga Bahagi ng UI
, na nagpapakita ng mga kakayahan ni Quasar para sa paglikha ng mga mobile application.
Pinagmulan: www.habr.com