Aféierung
Egal ob Dir nei mam Programméiere sidd oder en erfuerene Entwéckler, nei Konzepter a Sproochen / Kaderen léieren ass e Must an dëser Industrie fir mat Trends ze halen.
Huelt React, zum Beispill, wat Facebook viru véier Joer open-sourced huet a schonn d'Nummer XNUMX Wiel fir JavaScript Entwéckler ronderëm d'Welt gouf.
Vue an Angular, natierlech, hunn och hir eege legitim Fan Basis. An da gëtt et Svelte an aner universell Kaderen wéi Next.js oder Nuxt.js. A Gatsby, a Gridsome, a Quasar ... a vill méi.
Wann Dir Iech als erfuerene JavaScript Entwéckler beweise wëllt, sollt Dir op d'mannst e bësse Erfahrung mat verschiddene Kaderen a Bibliothéiken hunn - nieft der Aarbecht mat gudden alen JS.
Fir Iech ze hëllefen e Front-End Master am Joer 2020 ze ginn, hunn ech néng verschidde Projeten zesummegesat, jidderee fokusséiert op en anere JavaScript Kader a Bibliothéik als Tech Stack deen Dir kënnt bauen an an Äre Portfolio derbäisetzen. Denkt drun datt näischt Iech méi hëlleft wéi tatsächlech Saachen ze kreéieren, also fuert weider, benotzt Äre Geescht a maacht et geschéien
Den Artikel gouf mat der Ënnerstëtzung vun der EDISON Software iwwersat, déi , wéi och .
Film Sich App benotzt React (mat Haken)
Dat éischt wat Dir kéint ufänken ass eng Film Sich App mat React ze kreéieren. Drënner ass e Bild vun wéi déi lescht Applikatioun ausgesäit:
Wat wäert Dir léieren
Andeems Dir dës App baut, verbessert Dir Är React Fäegkeeten andeems Dir déi relativ nei Hooks API benotzt. De Beispillprojet benotzt React Komponenten, vill Haken, eng extern API, an natierlech e puer CSS Styling.
Tech Stack a Fonctiounen
- Reagéiert mat Haken
- erstellen-reagéieren-App
- JSX
- CSS
Ouni Klassen ze benotzen, ginn dës Projeten Iech de perfekte Entrée an de funktionnelle React a wäerten Iech definitiv am Joer 2020 hëllefen. Dir fannt . Follegt d'Instruktioune oder maacht et Är eegen.
Chat App mat Vue
En anere grousse Projet fir Iech ze maachen ass eng Chat App ze kreéieren mat menger Liiblings JavaScript Bibliothéik: VueJS. D'Applikatioun wäert esou ausgesinn:
Wat wäert Dir léieren
An dësem Tutorial léiert Dir wéi Dir eng Vue App vun Null mécht - Komponenten erstellen, Staat behandelen, Strecken erstellen, mat Drëtt-Partei Servicer verbannen, a souguer Authentifikatioun behandelen.
Tech Stack a Fonctiounen
- Vue
- vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Dëst ass e wierklech super Projet fir mat Vue unzefänken oder Är existent Fäegkeeten ze verbesseren fir an d'Entwécklung am Joer 2020 ze kommen. Dir fannt .
Schéin Wieder App mat Angular 8
Dëst Beispill hëlleft Iech eng schéin Wieder App mat Angular 8 ze kreéieren:
Wat wäert Dir léieren
Dëse Projet léiert Iech wäertvoll Fäegkeeten beim Bauen vun Uwendungen vun Null - vum Design duerch d'Entwécklung, de ganze Wee bis op eng deployment-ready Applikatioun.
Tech Stack a Fonctiounen
- Wénkel 8
- Firebase
- Server Säit Render-
- CSS mat Grid a Flexbox
- Mobil frëndlech an Adaptabilitéit
- Däischter Modus
- Schéinen Interface
Wat ech wierklech gär un dësem alles ëmfaassende Projet ass datt Dir Saachen net isoléiert studéiert. Amplaz léiert Dir de ganzen Entwécklungsprozess, vum Design bis zum finalen Ofbau.
To-Do Applikatioun mat Svelte
Svelte ass wéi dat neit Kand op der Komponent-baséiert Approche - op d'mannst ähnlech wéi React, Vue a Angular. An dëst ass ee vun den wäermsten neie Produkter fir 2020.
To-Do Apps sinn net onbedéngt dat wäermst Thema, awer et wäert Iech wierklech hëllefen Är Svelte Fäegkeeten ze verschäerfen. Et wäert esou ausgesinn:
Wat wäert Dir léieren
Dësen Tutorial weist Iech wéi Dir eng Applikatioun mat Svelte 3 erstellt, vun Ufank bis Enn. Dir benotzt Komponenten, Styling an Event Handler
Tech Stack a Fonctiounen
- Schwell 3
- Komponenten
- Styling mat CSS
- ES 6 Syntax
Et ginn net vill gutt Svelte Starterprojeten, also hunn ech fonnt .
E-Commerce App benotzt Next.js
Next.js ass de populärste Kader fir React Uwendungen ze bauen déi Server-Säit Rendering aus der Këscht ënnerstëtzen.
Dëse Projet weist Iech wéi Dir eng E-Commerce Applikatioun erstellt déi esou ausgesäit:
Wat wäert Dir léieren
An dësem Projet léiert Dir wéi Dir mat Next.js entwéckelt - nei Säiten a Komponenten erstellen, Daten extrahéieren a stiléieren an eng Next Applikatioun ofsetzen.
Tech Stack a Fonctiounen
- Next.js
- Komponenten a Säiten
- Daten Echantillon
- Styling
- Project Deployment
- SSR an SPA
Et ass ëmmer super e richtegt Beispill ze hunn wéi eng E-Commerce App fir eppes Neies ze léieren. Du kanns .
Voll-vollwäerteg méisproocheg Blog mat Nuxt.js
Nuxt.js ass fir Vue, wat Next.js fir React ass: e super Kader fir d'Kombinatioun vun der Kraaft vum Server-Säit Rendering an eenzeg Säit Uwendungen
Déi lescht Applikatioun déi Dir erstellt kënnt esou ausgesinn:
Wat wäert Dir léieren
An dësem Beispillprojet léiert Dir wéi Dir eng komplett Websäit mat Nuxt.js erstellt, vun der initialer Konfiguratioun bis zur leschter Deployment.
Et profitéiert vu ville vun de coolen Features déi Nuxt ze bidden huet, wéi Säiten a Komponenten, a Styling mat SCSS.
Tech Stack a Fonctiounen
- Nuxt.js
- Komponenten a Säiten
- Storyblock Modul
- Hagfish
- Vuex fir Staat Gestioun
- SCSS fir Styling
- Nuxt Mëttelstuf
, déi vill grouss Nuxt.js Fonctiounen enthält. Ech perséinlech gär mat Nuxt ze schaffen, also sollt Dir et probéieren well et Iech och e super Vue Entwéckler mécht.
Blog mat Gatsby
Gatsby ass en exzellente statesche Site Generator mat React a GraphQL. Dëst ass d'Resultat vum Projet:
Wat wäert Dir léieren
An dësem Tutorial léiert Dir wéi Dir Gatsby benotzt fir e Blog ze kreéieren deen Dir benotzt fir Är eegen Artikele mat React a GraphQL ze schreiwen.
Tech Stack a Fonctiounen
- Gatsby
- reagéieren
- GrafQL
- Plugins an Themen
- MDX/Markdown
- Bootstrap CSS
- Schablounen
Wann Dir jeemools e Blog wollt starten, wéi Dir et maacht mat React a GraphQL.
Ech soen net datt WordPress eng schlecht Wiel ass, awer mat Gatsby kënnt Dir héich performant Websäite mat React bauen - wat eng erstaunlech Kombinatioun ass.
Blog mat Gridsome
Gridsome fir Vue ... Okay, mir haten dat schonn mat Next/Nuxt.
Awer datselwecht ass wouer fir Gridsome a Gatsby. Béid benotzen GraphQL als hir Dateschicht, awer Gridsome benotzt VueJS. Dëst ass och en erstaunleche statesche Site Generator deen Iech hëlleft super Blogs ze kreéieren:
Wat wäert Dir léieren
Dëse Projet léiert Iech wéi Dir en einfache Blog erstellt fir mat Gridsome, GraphQL a Markdown unzefänken. Et deckt och wéi een eng Applikatioun duerch Netlify ofsetzt.
Tech Stack a Fonctiounen
- Gridsom
- Vue
- GrafQL
- Markdown
- Netify
Dëst ass sécher net deen ëmfaassendsten Tutorial, awer et deckt d'Basiskonzepter vu Gridsome an .
SoundCloud-ähnlechen Audio Player benotzt Quasar
Quasar ass en anere Vue Kader dee ka benotzt ginn fir mobil Uwendungen ze kreéieren. An dësem Projet erstellt Dir eng Audio Player Applikatioun, zum Beispill:
Wat wäert Dir léieren
Wärend aner Projete sech haaptsächlech op Webapplikatiounen konzentréieren, wäert dësen Iech weisen wéi Dir eng mobil Applikatioun erstellt mat Vue an dem Quasar Kader.
Dir sollt scho Cordova lafen mat Android Studio / Xcode konfiguréiert. Wann net, huet d'Handbuch e Link op d'Quasar Websäit wou se Iech weisen wéi Dir alles opstellt.
Tech Stack a Fonctiounen
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Komponenten
, Demonstréiert Quasar seng Fäegkeeten fir mobil Applikatiounen ze kreéieren.
Source: will.com