Uvod
Bez obzira jeste li novi u programiranju ili iskusni programer, učenje novih koncepata i jezika/frameworka ključno je za praćenje trendova u ovoj industriji.
Uzmimo za primjer React – otvorenog koda od strane Facebooka prije samo četiri godine, već je postao izbor broj jedan za JavaScript developere diljem svijeta.
Vue i Angular, naravno, također imaju svoju legitimnu bazu obožavatelja. A tu su i Svelte i drugi općeniti okviri poput Next.js ili Nuxt.js. I Gatsby, Gridsome, Quasar… i mnogi drugi.
Ako se želite dokazati kao vješt JavaScript programer, trebali biste imati barem neko iskustvo u radu s raznim frameworkima i bibliotekama - uz rad s dobrim starim JS-om.
Kako bih vam pomogao da postanete front-end majstor u 2020. godini, sastavio sam devet različitih projekata, od kojih se svaki fokusira na različite JavaScript okvire i biblioteke, kako biste predstavili svoj tehnološki stack i dodali ga u svoj portfolio. Zapamtite, ništa vam ne pomaže više od samog stvaranja, stoga se pokrenite, uključite svoj um i ostvarite svoje ciljeve.
Članak je preveden uz potporu EDISON Softwarea, koji I .
Aplikacija za pretraživanje filmova s Reactom (s kukicama)
Prva stvar s kojom biste mogli početi jest izrada aplikacije za pretraživanje filmova s Reactom. Ispod je slika kako će konačna aplikacija izgledati:
Što ćete naučiti
Izgradnjom ove aplikacije poboljšat ćete svoje React vještine koristeći relativno novi Hooks API. Uzorak projekta koristi komponente Reacta, puno kuka, vanjski API i, naravno, neke CSS stilove.
Tehnički skup i značajke
- Reagirajte kukicama
- stvoriti reagirati putem aplikacije
- jsx
- CSS
Bez korištenja ikakvih klasa, ovi vam projekti daju savršenu ulaznu točku u funkcionalni React i sigurno će vam pomoći u 2020. možeš naći . Slijedite upute ili napravite sami.
Aplikacija za chat s Vueom
Još jedan sjajan projekt za vas je izrada aplikacije za chat pomoću moje omiljene JavaScript biblioteke: VueJS. Aplikacija će izgledati otprilike ovako:
Što ćete naučiti
U ovom vodiču naučit ćete kako napraviti Vue aplikaciju od nule - stvoriti komponente, rukovati stanjima, kreirati rute, povezati se s uslugama treće strane, pa čak i upravljati autentifikacijom.
Tehnički skup i značajke
- Vue
- vuex
- Vue usmjerivač
- CLI prikaz
- laktaroš
- CSS
Ovo je doista sjajan projekt za početak rada s Vueom ili poboljšanje postojećih vještina za ulazak u razvoj 2020. možeš naći .
Aplikacija za prekrasno vrijeme uz Angular 8
Ovaj primjer će vam pomoći da napravite prekrasnu vremensku aplikaciju koristeći Angular 8:
Što ćete naučiti
Ovaj projekt će vas naučiti vrijednim vještinama u izradi aplikacija od nule - od dizajna do razvoja, sve do aplikacije spremne za implementaciju.
Tehnički skup i značajke
- Kutni 8
- Firebase
- Renderiranje na strani poslužitelja
- CSS s Gridom i Flexboxom
- Prilagođenost mobilnim uređajima i prilagodljivost
- Tamni način rada
- Lijepo sučelje
Ono što mi se jako sviđa kod ovog sveobuhvatnog projekta je to što ne proučavate stvari izolirano. Umjesto toga, učite cijeli proces razvoja, od dizajna do konačne implementacije.
Aplikacija To-Do uz Svelte
Svelte je poput novog klinca u komponentnom pristupu - barem sličan Reactu, Vueu i Angularu. A ovo je jedan od najpopularnijih novih proizvoda za 2020.
To-Do aplikacije nisu nužno najvrućija tema, ali će vam stvarno pomoći da usavršite svoje vještine u Svelteu. Izgledat će ovako:
Što ćete naučiti
Ovaj vodič će vam pokazati kako izraditi aplikaciju koristeći Svelte 3, od početka do kraja. Koristit ćete komponente, stilove i rukovatelje događajima
Tehnički skup i značajke
- Lijep 3
- Komponente
- Stiliziranje s CSS-om
- Sintaksa ES6
Nema mnogo dobrih početnih projekata za Svelte, pa sam pronašao .
Aplikacija za e-trgovinu s Next.js
Next.js je najpopularniji okvir za izradu React aplikacija koje podržavaju iscrtavanje na strani poslužitelja odmah po izlasku.
Ovaj projekt će vam pokazati kako izraditi aplikaciju za e-trgovinu koja izgleda ovako:
Što ćete naučiti
U ovom projektu naučit ćete kako razvijati s Next.js—stvoriti nove stranice i komponente, dohvatiti podatke te stilizirati i implementirati aplikaciju Next.
Tehnički skup i značajke
- Dalje.js
- Komponente i stranice
- Uzorkovanje podataka
- stilizovanje
- Implementacija projekta
- SSR i SPA
Uvijek je sjajno imati primjer iz stvarnog života poput aplikacije za e-trgovinu da naučite nešto novo. Možeš .
Cijeli višejezični blog s Nuxt.js
Nuxt.js je za Vue, kao što je Next.js za React: izvrstan okvir za kombiniranje iscrtavanja na strani poslužitelja i aplikacija na jednoj stranici
Posljednja aplikacija koju možete izraditi izgledat će ovako:
Što ćete naučiti
U ovom oglednom projektu naučit ćete kako izgraditi kompletnu web stranicu pomoću Nuxt.js, od početnog postavljanja do konačne implementacije.
Iskorištava prednosti mnogih cool značajki koje nudi Nuxt, kao što su stranice i komponente te stiliziranje pomoću SCSS-a.
Tehnički skup i značajke
- Nuxt.js
- Komponente i stranice
- modul storyblock
- Mixins
- Vuex za upravljanje stanjem
- SCSS za stiliziranje
- Nuxt međuprogrami
, koji uključuje mnoge izvrsne značajke Nuxt.js. Ja osobno volim raditi s Nuxtom pa biste ga trebali isprobati jer ćete također postati izvrstan Vue programer.
Blog s Gatsbyjem
Gatsby je izvrstan generator statičkih stranica koji koristi React i GraphQL. Ovo je rezultat projekta:
Što ćete naučiti
U ovom ćete vodiču naučiti kako koristiti Gatsby za stvaranje bloga koji ćete koristiti za pisanje vlastitih članaka koristeći React i GraphQL.
Tehnički skup i značajke
- Gatsby
- Reagovati
- Graphql
- Dodaci i teme
- MDX/Markdown
- Bootstrap CSS
- Predlošci
Ako ste ikada željeli pokrenuti blog, kako ga napraviti koristeći React i GraphQL.
Я не говорю, что WordPress является плохим выбором, но с Gatsby вы можете создавать высокопроизводительные сайты, используя React — что является удивительной комбинацией.
Blogirajte s Gridsomeom
Grozno za Vue… U redu, to smo već imali s Next/Nuxt.
Ali isto vrijedi i za Gridsomea i Gatsbyja. Oba koriste GraphQL kao svoj podatkovni sloj, ali Gridsome koristi VueJS. To je također sjajan generator statičnih web stranica koji vam pomaže u stvaranju sjajnih blogova:
Što ćete naučiti
Ovaj projekt će vas naučiti kako stvoriti jednostavan blog da biste započeli s Gridsomeom, GraphQL i Markdownom. Također objašnjava kako implementirati aplikaciju putem Netlifyja.
Tehnički skup i značajke
- Grozno
- Vue
- Graphql
- Smanjenje
- Netlify
Ovo sigurno nije najpotpuniji vodič, ali pokriva osnovne koncepte Gridsomea i .
Audio player sličan SoundCloudu koji koristi Quasar
Quasar je još jedan Vue okvir koji se može koristiti za izradu mobilnih aplikacija. U ovom projektu izradit ćete aplikaciju audio playera, na primjer:
Što ćete naučiti
Dok se drugi projekti uglavnom fokusiraju na web aplikacije, ovaj će vam pokazati kako izraditi mobilnu aplikaciju koristeći Vue i okvir Quasar.
Već biste trebali imati radnu Cordovu s postavljenim Android Studio/Xcode. Ako ne, priručnik ima poveznicu na web stranicu Quasar gdje vam pokazuju kako sve postaviti.
Tehnički skup i značajke
- Kvazar
- Vue
- Cordova
- surfer na valovima
- Komponente korisničkog sučelja
, demonstrirajući Quasarove sposobnosti za izradu mobilnih aplikacija.
Izvor: www.habr.com
