Ynlieding
Oft jo nij binne foar programmearring of in betûfte ûntwikkelder, it learen fan nije konsepten en talen/kaders is in must yn dizze yndustry om by te bliuwen mei trends.
Nim React, bygelyks, dy't Facebook just fjouwer jier lyn iepen-boarne hat en al de nûmer ien kar wurden is foar JavaScript-ûntwikkelders oer de hiele wrâld.
Vue en Angular hawwe fansels ek har eigen legitime fanbasis. En dan is d'r Svelte en oare universele kaders lykas Next.js of Nuxt.js. En Gatsby, en Gridsome, en Quasar ... en folle mear.
As jo josels bewize wolle as in betûfte JavaScript-ûntwikkelder, moatte jo op syn minst wat ûnderfining hawwe mei ferskate kaders en bibleteken - neist wurk dwaan mei goede âlde JS.
Om jo te helpen in front-end master te wurden yn 2020, haw ik njoggen ferskillende projekten gearstald, elk rjochte op in oar JavaScript-ramt en bibleteek as in tech-stapel dy't jo kinne bouwe en tafoegje oan jo portfolio. Unthâld dat neat jo mear helpt dan dingen te meitsjen, dus gean foarút, brûk jo geast en meitsje it barre
It artikel waard oerset mei de stipe fan EDISON Software, dy't , lykas ek .
Filmsykapplikaasje mei React (mei haken)
It earste ding wêrmei jo kinne begjinne is om in filmsykapplikaasje te meitsjen mei React. Hjirûnder is in ôfbylding fan hoe't de definitive applikaasje der útsjen sil:
Wat sille jo leare
Troch dizze app te bouwen, sille jo jo React-feardigens ferbetterje troch de relatyf nije Hooks API te brûken. It foarbyldprojekt brûkt React-komponinten, in protte haken, in eksterne API, en fansels wat CSS-styling.
Tech stack en funksjes
- Reagearje mei heakken
- oanmeitsje-reagearje-app
- jsx
- CSS
Sûnder klassen te brûken, jouwe dizze projekten jo it perfekte yngongspunt yn funksjoneel React en sille jo grif helpe yn 2020. Do kinst fine . Folgje de ynstruksjes of meitsje it jo eigen.
Chat App mei Vue
In oar geweldich projekt foar jo om te dwaan is in petearapp te meitsjen mei myn favorite JavaScript-bibleteek: VueJS. De applikaasje sil der sa útsjen:
Wat sille jo leare
Yn dizze tutorial sille jo leare hoe't jo in Vue-app fanôf it begjin meitsje kinne - komponinten oanmeitsje, steat behannelje, rûtes oanmeitsje, ferbine mei tsjinsten fan tredden, en sels ferifikaasje behannelje.
Tech stack en funksjes
- vue
- vuex
- sjen router
- Sjoch CLI
- Pusher
- CSS
Dit is in echt geweldich projekt om mei Vue te begjinnen of jo besteande feardigens te ferbetterjen om yn 2020 yn ûntwikkeling te kommen. Do kinst fine .
Moaie waar-app mei Angular 8
Dit foarbyld sil jo helpe om in prachtige waarapplikaasje te meitsjen mei Angular 8:
Wat sille jo leare
Dit projekt sil jo weardefolle feardigens leare yn it bouwen fan applikaasjes fanôf it begjin - fan ûntwerp oant ûntwikkeling, oant in ynset-klear applikaasje.
Tech stack en funksjes
- Hoeke 8
- Firebase
- Server side rendering
- CSS mei Grid en Flexbox
- Mobile freonlik en oanpassingsfermogen
- Donkere modus
- Moaie ynterface
Wat ik echt hâld fan dit alles omfiemjende projekt is dat jo dingen net yn isolemint studearje. Ynstee learje jo it heule ûntwikkelingsproses, fan ûntwerp oant definitive ynset.
To-Do-applikaasje mei Svelte
Svelte is as it nije bern op 'e komponint-basearre oanpak - teminsten fergelykber mei React, Vue en Angular. En dit is ien fan 'e waarmste nije produkten foar 2020.
To-Do-apps binne net needsaaklik it heulste ûnderwerp, mar se sille jo wirklik helpe om jo Svelte-feardigens te ferbetterjen. It sil der sa útsjen:
Wat sille jo leare
Dit tutorial sil jo sjen litte hoe't jo in applikaasje meitsje mei Svelte 3, fan begjin oant ein. Jo sille komponinten, styling en hannelers foar eveneminten brûke
Tech stack en funksjes
- Swol 3
- Komponinten
- Styling mei CSS
- ES 6 syntaksis
D'r binne net folle goede Svelte startersprojekten, sa fûn ik .
E-commerce app mei Next.js
Next.js is it populêrste ramt foar it meitsjen fan React-applikaasjes dy't rendering fan serverside stypje bûten it fak.
Dit projekt sil jo sjen litte hoe't jo in e-commerce-applikaasje kinne oanmeitsje dy't der sa útsjocht:
Wat sille jo leare
Yn dit projekt sille jo leare hoe't jo kinne ûntwikkelje mei Next.js - nije siden en komponinten oanmeitsje, gegevens ekstrahearje en stylje en in Next-applikaasje ynsette.
Tech stack en funksjes
- Next.js
- Komponinten en siden
- Data sampling
- Styling
- Project Deployment
- SSR en SPA
It is altyd geweldich om in echte foarbyld te hawwen lykas in e-commerce-app om wat nijs te learen. Do kinst .
Folslein meartalich blog mei Nuxt.js
Nuxt.js is foar Vue, wat Next.js is foar React: in geweldich ramt foar it kombinearjen fan de krêft fan serverside-rendering en applikaasjes op ien side
De lêste applikaasje dy't jo kinne oanmeitsje sil der sa útsjen:
Wat sille jo leare
Yn dit foarbyldprojekt sille jo leare hoe't jo in folsleine webside meitsje kinne mei Nuxt.js, fan inisjele opset oant definitive ynset.
It profiteart fan in protte fan 'e koele funksjes dy't Nuxt te bieden hat, lykas siden en komponinten, en styling mei SCSS.
Tech stack en funksjes
- Nuxt.js
- Komponinten en siden
- Ferhaalblok module
- Hagfish
- Vuex foar steat behear
- SCSS foar styling
- Nuxt middlewares
, dy't in protte geweldige Nuxt.js-funksjes omfettet. Ik persoanlik hâld fan wurkjen mei Nuxt, dus jo moatte it besykje, om't it jo ek in geweldige Vue-ûntwikkelder sil meitsje.
Blog mei Gatsby
Gatsby is in poerbêste statyske sidegenerator mei React en GraphQL. Dit is it resultaat fan it projekt:
Wat sille jo leare
Yn dizze tutorial sille jo leare hoe't jo Gatsby brûke om in blog te meitsjen dat jo sille brûke om jo eigen artikels te skriuwen mei React en GraphQL.
Tech stack en funksjes
- gatsby
- Reagearje
- GraphQL
- Plugins en tema's
- MDX/Markdown
- Bootstrap CSS
- Templates
As jo oait in blog wolle begjinne, oer hoe't jo it kinne meitsje mei React en GraphQL.
Ik sis net dat WordPress in minne kar is, mar mei Gatsby kinne jo websiden mei hege prestaasjes bouwe mei React - wat in geweldige kombinaasje is.
Blog mei Gridsome
Gridsome foar Vue ... Okee, wy hiene dit al mei Next/Nuxt.
Mar itselde jildt foar Gridsome en Gatsby. Beide brûke GraphQL as har gegevenslaach, mar Gridsome brûkt VueJS. Dit is ek in geweldige statyske sidegenerator dy't jo sil helpe geweldige blogs te meitsjen:
Wat sille jo leare
Dit projekt sil jo leare hoe't jo in ienfâldich blog meitsje kinne om te begjinnen mei Gridsome, GraphQL en Markdown. It behannelt ek hoe't jo in applikaasje kinne ynsette fia Netlify.
Tech stack en funksjes
- Gridsome
- vue
- GraphQL
- Markdown
- Netify
Dit is wis net de meast wiidweidige tutorial, mar it beslacht de basisbegripen fan Gridsome en .
SoundCloud-like audiospieler mei Quasar
Quasar is in oar Vue-ramt dat kin wurde brûkt om mobile applikaasjes te meitsjen. Yn dit projekt sille jo in audiospielerapplikaasje oanmeitsje, bygelyks:
Wat sille jo leare
Wylst oare projekten benammen rjochtsje op webapplikaasjes, sil dizze jo sjen litte hoe't jo in mobile applikaasje kinne meitsje mei Vue en it Quasar-ramt.
Jo moatte Cordova al hawwe mei Android Studio / Xcode konfigureare. As net, hat de hantlieding in keppeling nei de Quasar-webside wêr't se jo sjen litte hoe't jo alles ynstelle.
Tech stack en funksjes
- quasar
- vue
- Cordova
- wavesurfer
- UI-komponinten
, demonstrearje Quasar's mooglikheden foar it meitsjen fan mobile applikaasjes.
Boarne: www.habr.com