Enkonduko
Ĉu vi estas nova al programado aŭ jam sperta programisto, en ĉi tiu industrio, lernado de novaj konceptoj kaj lingvoj/kadroj estas nepra por konservi la tendencojn.
Prenu, ekzemple, React, kiu estis nur malfermita fonto de Facebook antaŭ kvar jaroj kaj jam fariĝis la unua elekto por JavaScript-programistoj tra la mondo.
Vue kaj Angular, kompreneble, ankaŭ havas sian legitiman admirantaron. Kaj poste estas Svelte kaj aliaj ĝeneralaj kadroj kiel Next.js aŭ Nuxt.js. Kaj Gatsby, kaj Gridsome, kaj Quasar... kaj multe pli.
Se vi volas pruvi vin kiel sperta JavaScript-programisto, vi devas havi almenaŭ iom da sperto kun diversaj kadroj kaj bibliotekoj - krom fari bonan malnovan JS-laboron.
Por helpi vin iĝi antaŭfina majstro en 2020, mi kunmetis naŭ malsamajn projektojn, ĉiu koncentriĝante al malsamaj JavaScript-kadroj kaj bibliotekoj kiel teknika stako, kiun vi povas konstrui kaj aldoni al via biletujo. Memoru, ke nenio helpas vin pli ol meti aferojn en praktikon, do antaŭen, enŝaltu vian menson kaj ebligu ĝin.
La artikolo estis tradukita kun la subteno de EDISON Software, kiu Kaj .
Film-serĉa programo kun React (kun hokoj)
La unua afero, per kiu vi povus komenci, estas konstrui filmserĉan programon kun React. Malsupre estas bildo pri kiel aspektos la fina programo:
Kion vi lernos
Konstruante ĉi tiun aplikaĵon, vi plibonigos viajn React-kapablojn uzante la relative novan Hooks API. La specimena projekto uzas React-komponentojn, multajn hokojn, eksteran API, kaj kompreneble iom da CSS-stilado.
Teknika stako kaj funkcioj
- Reagi per hokoj
- krei-reagi-app
- JSX
- CSS
Sen uzi iujn ajn klasojn, ĉi tiuj projektoj donas al vi la perfektan enirpunkton al funkcia React kaj certe helpos vin en 2020. vi povas trovi . Sekvu la instrukciojn aŭ faru ĝin via.
Babilada aplikaĵo kun Vue
Alia bonega projekto por vi estas konstrui babilejon uzante mian plej ŝatatan JavaScript-bibliotekon: VueJS. La aplikaĵo aspektos kiel ĉi tio:
Kion vi lernos
En ĉi tiu lernilo, vi lernos kiel fari Vue-aplon de nulo - krei komponantojn, pritrakti ŝtatojn, krei itinerojn, konektiĝi al triaj servoj kaj eĉ pritrakti aŭtentikigon.
Teknika stako kaj funkcioj
- Vue
- vuex
- vue router
- Vidu CLI
- Pusher
- CSS
Ĉi tio estas vere bonega projekto por komenci kun Vue aŭ plibonigi viajn ekzistantajn kapablojn por eklabori en 2020. vi povas trovi .
Bela vetera aplikaĵo kun Angular 8
Ĉi tiu ekzemplo helpos vin konstrui belan veteran apon uzante Angular 8:
Kion vi lernos
Ĉi tiu projekto instruos al vi valorajn kapablojn en konstruado de aplikoj de nulo - de dezajno ĝis evoluo, ĝis la preta por deploji aplikaĵo.
Teknika stako kaj funkcioj
- Angulo 8
- Firebase
- Servila Flanka Reprezentado
- CSS kun Krado kaj Flexbox
- Poŝtelefono amika kaj adaptebleco
- Malhela reĝimo
- Bela interfaco
Kion mi vere ŝatas pri ĉi tiu ampleksa projekto estas ke vi ne studas aferojn izole. Anstataŭe, vi lernas la tutan disvolvan procezon de dezajno ĝis fina deplojo.
Apliko por fari kun Svelte
Svelte estas kiel la nova infano en la kompona aliro - almenaŭ simila al React, Vue kaj Angular. Kaj ĉi tiu estas unu el la plej varmaj novaj produktoj por 2020.
Faraj programoj ne nepre estas la plej varma temo, sed ili vere helpos vin perfektigi viajn Sveltajn kapablojn. Ĝi aspektos tiel:
Kion vi lernos
Ĉi tiu lernilo montros al vi kiel krei aplikaĵon uzante Svelte 3, de komenco ĝis fino. Vi uzos komponantojn, stilon kaj evento-traktilojn
Teknika stako kaj funkcioj
- Svelta 3
- Komponantoj
- Stilado kun CSS
- Sintakso ES6
Ne estas multaj bonaj Svelte startprojektoj, do mi trovis .
Ekomerca Apo kun Next.js
Next.js estas la plej populara kadro por konstrui React-programojn, kiuj subtenas servilflankan bildigon el la skatolo.
Ĉi tiu projekto montros al vi kiel krei elektronikan aplikaĵon, kiu aspektas tiel:
Kion vi lernos
En ĉi tiu projekto, vi lernos kiel disvolvi kun Next.js—krei novajn paĝojn kaj komponantojn, preni datumojn kaj stiligi kaj disfaldi aplikaĵon Next.
Teknika stako kaj funkcioj
- Sekva.js
- Komponantoj kaj Paĝoj
- Specimeno de datumoj
- Stiligo
- Projekto Deplojo
- SSR kaj SPA
Ĉiam estas bonege havi realan ekzemplon kiel e-komerca aplikaĵo por lerni ion novan. Vi povas .
Plena plurlingva blogo kun Nuxt.js
Nuxt.js estas por Vue, kiel Next.js estas por React: bonega kadro por kombini servilflanka bildigo kaj unupaĝaj aplikoj
La lasta aplikaĵo, kiun vi povas krei, aspektos tiel:
Kion vi lernos
En ĉi tiu ekzempla projekto, vi lernos kiel konstrui kompletan retejon uzante Nuxt.js, de komenca aranĝo ĝis fina deplojo.
Ĝi utiligas multajn el la bonegaj funkcioj kiujn Nuxt devas oferti, kiel ekzemple paĝoj kaj komponantoj, kaj stilado kun SCSS.
Teknika stako kaj funkcioj
- Nuxt.js
- Komponantoj kaj Paĝoj
- fabelomodulo
- Miksinoj
- Vuex por ŝtata administrado
- SCSS por stilado
- Nuxt middlewares
, kiu inkluzivas multajn el la bonegaj trajtoj de Nuxt.js. Mi persone amas labori kun Nuxt, do vi devus provi ĝin, ĉar ĝi ankaŭ faros vin bonega programisto de Vue.
Blogo kun Gatsby
Gatsby estas bonega senmova generatoro uzante React kaj GraphQL. Jen la rezulto de la projekto:
Kion vi lernos
En ĉi tiu lernilo, vi lernos kiel uzi Gatsby por krei blogon, kiun vi uzos por skribi viajn proprajn artikolojn uzante React kaj GraphQL.
Teknika stako kaj funkcioj
- gatsby
- Reagi
- GraphQL
- Kromaĵoj kaj Temoj
- MDX/Markdown
- Bootstrap CSS
- Skemoj
Se vi iam volis komenci blogon, kiel fari ĝin uzante React kaj GraphQL.
Mi ne diras, ke WordPress estas malbona elekto, sed kun Gatsby vi povas konstrui altkvalitajn retejojn uzante React - kio estas mirinda kombinaĵo.
Blogo kun Gridsome
Gridsome por Vue... Bone, ni jam havis tion kun Next/Nuxt.
Sed la sama validas por Gridsome kaj Gatsby. Ambaŭ uzas GraphQL kiel sian datumtavolon, sed Gridsome uzas VueJS. Ĝi ankaŭ estas mirinda senmova generatoro por helpi vin krei bonegajn blogojn:
Kion vi lernos
Ĉi tiu projekto instruos vin kiel krei simplan blogon por komenci kun Gridsome, GraphQL kaj Markdown. Ĝi ankaŭ klarigas kiel disfaldi aplikaĵon per Netlify.
Teknika stako kaj funkcioj
- Gridsome
- Vue
- GraphQL
- Markdown
- netlify
Ĉi tio certe ne estas la plej kompleta lernilo, sed ĝi kovras la bazajn konceptojn de Gridsome kaj .
Sonludanto simila al SoundCloud uzante Quasar
Quasar estas alia kadro Vue, kiu povas esti uzata por konstrui poŝtelefonajn programojn. En ĉi tiu projekto, vi kreos aŭdludilan aplikaĵon kiel ekzemple:
Kion vi lernos
Dum aliaj projektoj temigas plejparte TTT-aplikaĵojn, ĉi tiu montros al vi kiel konstrui moveblan apon uzante Vue kaj la kadron Quasar.
Vi jam devus havi funkciantan Kordovon kun Android Studio/Xcode agordita. Se ne, la manlibro havas ligilon al la retejo de Quasar, kie ili montras al vi kiel agordi ĉion.
Teknika stako kaj funkcioj
- Kvazaro
- Vue
- Kordovo
- ondesurfer
- UI-Elementoj
, montrante la kapablojn de Quasar por konstruado de moveblaj aplikoj.
fonto: www.habr.com