Pîrozbahiyê
Çi hûn di bernamesaziyê de nû bin an jî pêşdebirek demsalî ne, hînbûna têgeh û ziman/çarçoveyên nû di vê pîşesaziyê de pêdivî ye ku meriv bi trendan re bimeşe.
Mînakî React bigirin, ku Facebook tenê çar sal berê jêderk vekir û jixwe ji bo pêşdebirên JavaScript-ê li çaraliyê cîhanê bûye bijareya yekem.
Vue û Angular, bê guman, di heman demê de bingehek temaşevanên xwe yên rewa jî hene. Û paşê Svelte û çarçoveyên gerdûnî yên din ên wekî Next.js an Nuxt.js hene. Û Gatsby, û Gridsome, û Quasar... û hê bêtir.
Ger hûn dixwazin xwe wekî pêşdebirek JavaScript-a bi tecrûbe îspat bikin, divê hûn bi kêmî ve hin ezmûnek bi çarçove û pirtûkxaneyên cihêreng re hebin - ji bilî ku hûn bi JS-ya kevn a baş re kar bikin.
Ji bo ku ji we re bibe alîkar ku hûn di sala 2020-an de bibin masterek pêşîn, min neh projeyên cihêreng berhev kirine, ku her yek li ser çarçoveyek JavaScript û pirtûkxaneyek cihê ye wekî stûnek teknolojiyê ya ku hûn dikarin ava bikin û li portfolioya xwe zêde bikin. Bînin bîra xwe ku tiştek ji afirandina tiştan bêtir ji we re dibe alîkar, ji ber vê yekê pêşde biçin, hişê xwe bikar bînin û wê pêk bînin
Gotar bi piştgiriya Nermalava EDISON, ku tê wergerandin û herweha .
Serlêdana lêgerîna fîlimê bi karanîna React (bi çengelan)
Yekem tiştê ku hûn dikarin pê dest pê bikin ev e ku hûn bi karanîna React serîlêdana lêgerîna fîlimê biafirînin. Li jêr wêneyek e ku dê serlêdana paşîn çawa xuya bike:
Hûn ê çi fêr bibin
Bi avakirina vê sepanê, hûn ê bi karanîna Hooks API-ya nisbeten nû ve jêhatîbûnên xwe yên React çêtir bikin. Projeya nimûne hêmanên React, gelek hook, API-yek derveyî, û bê guman hin şêwazên CSS-ê bikar tîne.
Stack û taybetmendiyên teknîkî
- Bi çengan re reaksiyonê bikin
- biafirînin-reaksiyonê-app
- JSX
- CSS
Bêyî karanîna dersan, ev proje xala têketina bêkêmasî ya React-a fonksiyonel didin we û bê guman dê di sala 2020-an de ji we re bibin alîkar. hûn dikarin bibînin . Talîmatan bişopînin an wê ji xwe re bikin.
App Chat bi Vue re
Projeyek din a girîng a ku hûn bikin ev e ku hûn bi karanîna pirtûkxaneya JavaScript-a min a bijare: VueJS serîlêdanek danûstendinê biafirînin. Serlêdan dê tiştek bi vî rengî xuya bike:
Hûn ê çi fêr bibin
Di vê tutoriyê de, hûn ê fêr bibin ka meriv çawa serîlêdanek Vue ji sifrê çêdike - çêkirina pêkhateyan, birêvebirina dewletê, afirandina rêgezan, girêdana bi karûbarên sêyemîn re, û tewra bi erêkirinê re.
Stack û taybetmendiyên teknîkî
- Vue
- vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Ev projeyek bi rastî pir girîng e ku hûn bi Vue re dest pê bikin an jî jêhatîyên xwe yên heyî baştir bikin da ku di sala 2020-an de bikevin pêşkeftinê. hûn dikarin bibînin .
Serlêdana hewayê ya xweşik bi Angular 8
Ev mînak dê ji we re bibe alîkar ku hûn bi karanîna Angular 8 serîlêdanek hewa xweş biafirînin:
Hûn ê çi fêr bibin
Ev proje dê di avakirina serîlêdanan ji sifirê de jêhatîbûnên hêja fêrî we bike - ji sêwiranê heya pêşkeftinê, heya serîlêdanek amade-amade.
Stack û taybetmendiyên teknîkî
- goşeyî 8
- Firebase
- Rendering aliyê server
- CSS bi Grid û Flexbox
- Mobile dostane û adaptability
- Modeya tarî
- Navbera xweş
Tiştê ku ez bi rastî ji vê projeyek tevhev hez dikim ev e ku hûn tiştan ji hev venaxwînin. Di şûna wê de, hûn tevahiya pêvajoya pêşkeftinê fêr dibin, ji sêwiranê heya bicîhkirina dawîn.
Serlêdana To-Do bi karanîna Svelte
Svelte mîna zarokê nû ye li ser nêzîkatiya bingehîn - bi kêmanî mîna React, Vue û Angular. Û ev yek ji germtirîn hilberên nû yên 2020-an e.
Serlêdanên To-Do ne hewce ne mijara herî germ in, lê ew ê bi rastî ji we re bibe alîkar ku hûn jêhatîbûnên xwe yên Svelte xweş bikin. Ew ê bi vî rengî xuya bike:
Hûn ê çi fêr bibin
Ev tutorial dê nîşanî we bide ka meriv çawa bi karanîna Svelte 3, ji destpêkê heya dawiyê, serîlêdanek biafirîne. Hûn ê hêman, şêwaz, û rêvebirên bûyerê bikar bînin
Stack û taybetmendiyên teknîkî
- Svelte 3
- Components
- Styling bi CSS
- Hevoksaziya ES 6
Pir projeyên destpêkê yên Svelte yên baş tune ne, ji ber vê yekê min dît .
Serlêdana e-bazirganî ya ku Next.js bikar tîne
Next.js çarçoweya herî populer e ji bo avakirina serîlêdanên React-ê ku piştgirîya pêşkêşkera ji qutiyê dike.
Ev proje dê nîşanî we bide ka meriv çawa serîlêdanek e-bazirganiya ku bi vî rengî xuya dike biafirîne:
Hûn ê çi fêr bibin
Di vê projeyê de, hûn ê fêr bibin ka meriv çawa bi Next.js-ê re pêşve diçe — rûpel û hêmanên nû biafirîne, daneyan derxîne, û şêwazê xwe bide û serîlêdanek Next saz bike.
Stack û taybetmendiyên teknîkî
- Paşê.js
- Parçe û Rûpel
- Sampling Data
- Ylêkirin
- Pêşxistina Projeyê
- SSR û SPA
Her gav xweş e ku meriv mînakek cîhana rastîn mîna serîlêdana e-bazirganiyê hebe ku tiştek nû fêr bibe. Hûn dikarin .
Bi Nuxt.js re blogek pirzimanî ya bêkêmasî
Nuxt.js ji bo Vue-yê ye, Next.js ji bo React-ê çi ye: çarçoveyek girîng a ji bo berhevkirina hêza pêşkêşker-side û serîlêdanên yek-rûpelê
Serlêdana dawî ya ku hûn dikarin biafirînin dê bi vî rengî xuya bike:
Hûn ê çi fêr bibin
Di vê projeya nimûneyê de, hûn ê fêr bibin ka meriv çawa bi karanîna Nuxt.js, ji sazkirina destpêkê heya bicîhkirina paşîn, malperek bêkêmasî biafirîne.
Ew ji gelek taybetmendiyên xweş ên ku Nuxt pêşkêşî dike sûd werdigire, wek rûpel û pêkhate, û şêwazkirina bi SCSS.
Stack û taybetmendiyên teknîkî
- Nuxt.js
- Parçe û Rûpel
- Modula Storyblock
- Hagfish
- Vuex ji bo rêveberiya dewletê
- SCSS ji bo şêwazê
- Nuxt navîn
, ku gelek taybetmendiyên Nuxt.js-ê yên mezin dihewîne. Ez bi xwe hez dikim ku bi Nuxt re bixebitim ji ber vê yekê divê hûn wiya biceribînin ji ber ku ew ê we jî bike pêşdebirek Vue ya mezin.
Blog bi Gatsby re
Gatsby hilberînerek malpera statîk a hêja ye ku React û GraphQL bikar tîne. Ev encama projeyê ye:
Hûn ê çi fêr bibin
Di vê tutoriyê de, hûn ê fêr bibin ka meriv çawa Gatsby bikar tîne da ku blogek biafirîne ku hûn ê bikar bînin da ku gotarên xwe bi karanîna React û GraphQL binivîsin.
Stack û taybetmendiyên teknîkî
- gatsby
- Bersivkirin
- GraphQL
- Plugins û mijarên
- MDX / Markdown
- Bootstrap CSS
- Sêwiran
Ger we carî xwest ku hûn blogek dest pê bikin, li ser ka meriv wê çawa bi karanîna React û GraphQL çêbike.
Ez nabêjim WordPress vebijarkek xirab e, lê bi Gatsby re hûn dikarin malperên bi performansa bilind bi karanîna React-ê ava bikin - ku têkiliyek ecêb e.
Blog bi Gridsome
Gridsome ji bo Vue... Baş e, me berê jî ev bi Next/Nuxt re hebû.
Lê heman tişt ji bo Gridsome û Gatsby jî rast e. Her du GraphQL wekî qata daneya xwe bikar tînin, lê Gridsome VueJS bikar tîne. Ev jî çêkerek malpera statîk a ecêb e ku dê ji we re bibe alîkar ku hûn blogên mezin biafirînin:
Hûn ê çi fêr bibin
Ev proje dê fêrî we bike ka meriv çawa blogek hêsan biafirîne da ku bi Gridsome, GraphQL û Markdown dest pê bike. Di heman demê de ew vedigire ka meriv çawa serîlêdanek bi navgîniya Netlify ve tê bicîh kirin.
Stack û taybetmendiyên teknîkî
- Gridsome
- Vue
- GraphQL
- Markdown
- netlify
Ev bê guman ne dersa herî berfireh e, lê ew têgehên bingehîn ên Gridsome û vedihewîne .
Lîstika dengî ya mîna SoundCloud-ê ku Quasar bikar tîne
Quasar çarçoveyek din a Vue ye ku dikare ji bo afirandina sepanên mobîl were bikar anîn. Di vê projeyê de hûn ê serîlêdanek lîstikvanê bihîstwerê biafirînin, mînakî:
Hûn ê çi fêr bibin
Dema ku projeyên din bi giranî li ser sepanên webê hûr dibin, ev yek dê nîşanî we bide ka meriv çawa bi karanîna Vue û çarçoweya Quasar serîlêdanek mobîl biafirîne.
Pêdivî ye ku hûn jixwe Cordova bi Android Studio/Xcode ve hatî mîheng kirin. Heke ne, manual girêdanek bi malpera Quasar re heye ku ew nîşanî we didin ka meriv çawa her tiştî saz dike.
Stack û taybetmendiyên teknîkî
- quasar
- Vue
- Cordova
- WaveSurfer
- Pêkhateyên UI
, kapasîteyên Quasar ji bo çêkirina sepanên mobîl nîşan dide.
Source: www.habr.com