Predstavitev
Ne glede na to, ali ste začetnik programiranja ali izkušen razvijalec, je učenje novih konceptov in jezikov/ogrodij nujno v tej panogi, če želite biti v koraku s trendi.
Vzemimo na primer React, ki ga je Facebook odprl pred komaj štirimi leti in je že postal izbira številka ena za razvijalce JavaScript po vsem svetu.
Vue in Angular imata seveda tudi svojo zakonito bazo oboževalcev. In potem je tu Svelte in druga univerzalna ogrodja, kot sta Next.js ali Nuxt.js. In Gatsby, Gridsome in Quasar ... in še veliko več.
Če se želite izkazati kot izkušen JavaScript razvijalec, bi morali imeti vsaj nekaj izkušenj z različnimi ogrodji in knjižnicami – poleg dela z dobrim starim JS.
Da bi vam leta 2020 pomagal postati mojster sprednjega dela, sem sestavil devet različnih projektov, od katerih se vsak osredotoča na različno ogrodje in knjižnico JavaScript kot tehnološki sklad, ki ga lahko zgradite in dodate v svoj portfelj. Ne pozabite, da vam nič ne pomaga bolj kot dejansko ustvarjanje stvari, zato pojdite naprej, uporabite svoj um in to uresničite
Članek je bil preveden s podporo EDISON Software, ki in .
Aplikacija za iskanje filmov z uporabo React (s kavlji)
Prva stvar, s katero bi lahko začeli, je ustvariti aplikacijo za iskanje filmov z uporabo React. Spodaj je slika, kako bo izgledala končna aplikacija:
Kaj se boste naučili
Z izgradnjo te aplikacije boste izboljšali svoje sposobnosti React z uporabo relativno novega API-ja Hooks. Primer projekta uporablja komponente React, veliko kavljev, zunanji API in seveda nekaj stilov CSS.
Tehnični sklop in funkcije
- Reagirajte s kavlji
- ustvari-reagiraj-app
- Jsx
- CSS
Brez uporabe kakršnih koli razredov vam ti projekti nudijo popolno vstopno točko v funkcionalni React in vam bodo zagotovo pomagali leta 2020. lahko najdeš . Sledite navodilom ali ga naredite po svoje.
Aplikacija za klepet z Vue
Še en odličen projekt, ki ga lahko naredite, je ustvariti aplikacijo za klepet z mojo najljubšo knjižnico JavaScript: VueJS. Aplikacija bo videti nekako takole:
Kaj se boste naučili
V tej vadnici se boste naučili, kako narediti aplikacijo Vue iz nič – ustvarjanje komponent, obravnavanje stanja, ustvarjanje poti, povezovanje s storitvami tretjih oseb in celo upravljanje avtentikacije.
Tehnični sklop in funkcije
- Vue
- vuex
- Vue usmerjevalnik
- Pogled CLI
- Pusher
- CSS
To je res odličen projekt, da začnete uporabljati Vue ali izboljšate svoje obstoječe spretnosti in začnete z razvojem leta 2020. lahko najdeš .
Aplikacija za čudovito vreme z Angular 8
Ta primer vam bo pomagal ustvariti čudovito vremensko aplikacijo z uporabo Angular 8:
Kaj se boste naučili
Ta projekt vas bo naučil dragocenih veščin gradnje aplikacij iz nič – od načrtovanja preko razvoja, vse do aplikacije, pripravljene za uvajanje.
Tehnični sklop in funkcije
- Kotna 8
- Firebase
- Upodabljanje na strani strežnika
- CSS z Grid in Flexbox
- Prijazen do mobilnih naprav in prilagodljivost
- Temni režim
- Lep vmesnik
Pri tem vseobsegajočem projektu mi je resnično všeč to, da stvari ne preučuješ ločeno. Namesto tega se naučite celotnega razvojnega procesa, od načrtovanja do končne uvedbe.
Aplikacija To-Do z uporabo Svelte
Svelte je kot nov otrok na komponentnem pristopu - vsaj podoben Reactu, Vueju in Angularju. In to je eden najbolj vročih novih izdelkov v letu 2020.
Aplikacije za opravila niso nujno najbolj vroča tema, vendar vam bodo resnično pomagale izpopolniti svoje veščine Svelte. Videti bo takole:
Kaj se boste naučili
Ta vadnica vam bo pokazala, kako ustvariti aplikacijo s Svelte 3, od začetka do konca. Uporabili boste komponente, sloge in obdelovalce dogodkov
Tehnični sklop in funkcije
- Svetel 3
- Komponente
- Oblikovanje s CSS
- Sintaksa ES 6
Dobrih začetnih projektov Svelte ni veliko, zato sem našel .
Aplikacija za e-trgovino, ki uporablja Next.js
Next.js je najbolj priljubljeno ogrodje za gradnjo aplikacij React, ki podpirajo upodabljanje na strežniški strani.
Ta projekt vam bo pokazal, kako ustvariti aplikacijo za e-trgovino, ki je videti takole:
Kaj se boste naučili
V tem projektu se boste naučili razvijati z Next.js – ustvariti nove strani in komponente, ekstrahirati podatke ter oblikovati in uvesti aplikacijo Next.
Tehnični sklop in funkcije
- Naprej.js
- Komponente in strani
- Vzorčenje podatkov
- Stilizacija
- Uvedba projekta
- SSR in SPA
Vedno je super imeti primer iz resničnega sveta, kot je aplikacija za e-trgovino, da se naučimo nekaj novega. Ti lahko .
Popoln večjezični blog z Nuxt.js
Nuxt.js je za Vue, kar je Next.js za React: odlično ogrodje za združevanje moči strežniškega upodabljanja in enostranskih aplikacij
Končna aplikacija, ki jo lahko ustvarite, bo videti takole:
Kaj se boste naučili
V tem vzorčnem projektu se boste naučili, kako ustvariti celotno spletno mesto z uporabo Nuxt.js, od začetne nastavitve do končne uvedbe.
Izkorišča številne odlične funkcije, ki jih ponuja Nuxt, kot so strani in komponente ter oblikovanje s SCSS.
Tehnični sklop in funkcije
- Nuxt.js
- Komponente in strani
- Modul Storyblock
- Hagfish
- Vuex za upravljanje stanja
- SCSS za oblikovanje
- Vmesna programska oprema Nuxt
, ki vključuje številne odlične funkcije Nuxt.js. Osebno rad delam z Nuxtom, zato ga morate preizkusiti, saj boste prav tako odličen razvijalec Vue.
Blog z Gatsbyjem
Gatsby je odličen generator statičnih spletnih mest, ki uporablja React in GraphQL. To je rezultat projekta:
Kaj se boste naučili
V tej vadnici se boste naučili, kako uporabiti Gatsby za ustvarjanje spletnega dnevnika, ki ga boste uporabili za pisanje lastnih člankov z uporabo React in GraphQL.
Tehnični sklop in funkcije
- gatsby
- Reagirajo
- GraphQL
- Vtičniki in teme
- MDX/Markdown
- Bootstrap CSS
- Predloge
Če ste kdaj želeli začeti blog, o tem, kako ga narediti z uporabo React in GraphQL.
Ne rečem, da je WordPress slaba izbira, toda z Gatsbyjem lahko ustvarite visoko zmogljiva spletna mesta z uporabo Reacta – kar je neverjetna kombinacija.
Blog z Gridsome
Grozno za Vue ... V redu, to smo že imeli z Next/Nuxt.
A enako velja za Gridsoma in Gatsbyja. Oba uporabljata GraphQL kot svojo podatkovno plast, vendar Gridsome uporablja VueJS. To je tudi neverjeten generator statičnih spletnih mest, ki vam bo pomagal ustvariti odlične bloge:
Kaj se boste naučili
Ta projekt vas bo naučil, kako ustvariti preprost spletni dnevnik, da začnete uporabljati Gridsome, GraphQL in Markdown. Pokriva tudi, kako razmestiti aplikacijo prek Netlifyja.
Tehnični sklop in funkcije
- Nadrejen
- Vue
- GraphQL
- Markdown
- Izčrpajte
To zagotovo ni najobsežnejša vadnica, vendar pokriva osnovne koncepte Gridsome in .
Zvočni predvajalnik, podoben SoundCloudu, ki uporablja Quasar
Quasar je drugo ogrodje Vue, ki se lahko uporablja za ustvarjanje mobilnih aplikacij. V tem projektu boste ustvarili aplikacijo za predvajalnik zvoka, na primer:
Kaj se boste naučili
Medtem ko se drugi projekti osredotočajo predvsem na spletne aplikacije, vam bo ta pokazal, kako ustvariti mobilno aplikacijo z uporabo Vue in ogrodja Quasar.
Cordova bi že morala delovati s konfiguriranim Android Studio/Xcode. Če ne, ima priročnik povezavo do spletnega mesta Quasar, kjer vam pokažejo, kako vse nastaviti.
Tehnični sklop in funkcije
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponente uporabniškega vmesnika
, ki prikazuje Quasarjeve zmogljivosti za ustvarjanje mobilnih aplikacij.
Vir: www.habr.com