Indledning
Uanset om du er ny til programmering eller allerede er en erfaren udvikler, er det i denne branche et must at lære nye koncepter og sprog/rammer for at følge med i trends.
Tag for eksempel React, som kun var open sourcet af Facebook for fire år siden og allerede er blevet nummer et valg for JavaScript-udviklere over hele verden.
Vue og Angular har selvfølgelig også deres legitime fanskare. Og så er der Svelte og andre generelle formål som Next.js eller Nuxt.js. Og Gatsby, og Gridsome, og Quasar ... og meget mere.
Hvis du vil bevise dig selv som en erfaren JavaScript-udvikler, skal du som minimum have en vis erfaring med diverse frameworks og biblioteker – udover at lave godt gammelt JS-arbejde.
For at hjælpe dig med at blive en frontend-mester i 2020 har jeg sammensat ni forskellige projekter, der hver især fokuserer på forskellige JavaScript-rammer og biblioteker som en teknologisk stak, som du kan bygge og tilføje til din portefølje. Husk, at intet hjælper dig mere end at sætte tingene i praksis, så gå i gang, vend tankerne og gør det muligt.
Artiklen er oversat med støtte fra EDISON Software, som og .
Filmsøgningsapp med React (med kroge)
Den første ting, du kan starte med, er at bygge en filmsøgningsapp med React. Nedenfor er et billede af, hvordan den endelige app vil se ud:
Hvad vil du lære
Ved at bygge denne applikation vil du forbedre dine React-færdigheder ved at bruge den relativt nye Hooks API. Eksempelprojektet bruger React-komponenter, masser af kroge, en ekstern API og selvfølgelig noget CSS-styling.
Teknisk stak og funktioner
- Reager med kroge
- skabe-reagerer-app
- jsx
- CSS
Uden at bruge nogen klasser giver disse projekter dig den perfekte indgang til funktionelle React og vil helt sikkert hjælpe dig i 2020. du kan finde . Følg instruktionerne eller gør den til din egen.
Chat-app med Vue
Et andet godt projekt for dig er at bygge en chat-app ved hjælp af mit foretrukne JavaScript-bibliotek: VueJS. Applikationen vil se nogenlunde sådan ud:
Hvad vil du lære
I denne vejledning lærer du, hvordan du laver en Vue-app fra bunden – opret komponenter, håndterer tilstande, opret ruter, opretter forbindelse til tredjepartstjenester og håndterer endda godkendelse.
Teknisk stak og funktioner
- Vue
- vuex
- Vue-router
- CLI -visning
- Pusher
- CSS
Dette er et rigtig godt projekt til at komme i gang med Vue eller forbedre dine eksisterende færdigheder for at komme i udvikling i 2020. du kan finde .
Smuk vejr-app med Angular 8
Dette eksempel hjælper dig med at bygge en smuk vejr-app ved hjælp af Angular 8:
Hvad vil du lære
Dette projekt vil lære dig værdifulde færdigheder i at bygge applikationer fra bunden - fra design til udvikling, hele vejen til en klar til implementering.
Teknisk stak og funktioner
- Vinkel 8
- Firebase
- Rendering på serversiden
- CSS med Grid og Flexbox
- Mobilvenlig og tilpasningsdygtig
- Mørk tilstand
- Красивый интерbillede
Det, jeg virkelig godt kan lide ved dette omfattende projekt, er, at man ikke studerer tingene isoleret. I stedet lærer du hele udviklingsprocessen fra design til endelig implementering.
To-Do app med Svelte
Svelte er som det nye barn i komponenttilgangen - i det mindste ligner React, Vue og Angular. Og dette er et af de hotteste nye produkter for 2020.
To-Do-apps er ikke nødvendigvis det hotteste emne, men de vil virkelig hjælpe dig med at finpudse dine Svelte-færdigheder. Det vil se sådan ud:
Hvad vil du lære
Denne vejledning viser dig, hvordan du opretter et program ved hjælp af Svelte 3, fra start til slut. Du vil bruge komponenter, styling og event handlere
Teknisk stak og funktioner
- Svelte 3
- Komponenter
- Styling med CSS
- Syntaks ES6
Der er ikke mange gode Svelte starter projekter, så jeg fandt .
E-handelsapp med Next.js
Next.js er den mest populære ramme til at bygge React-apps, der understøtter server-side-rendering ud af boksen.
Dette projekt viser dig, hvordan du opretter en e-handelsapplikation, der ser sådan ud:
Hvad vil du lære
I dette projekt lærer du, hvordan du udvikler med Next.js – opret nye sider og komponenter, hent data og stil og implementer en Next-applikation.
Teknisk stak og funktioner
- Next.js
- Komponenter og sider
- Datasampling
- Stilisering
- Projektimplementering
- SSR og SPA
Det er altid dejligt at have et virkeligt eksempel som en e-handelsapp for at lære noget nyt. Du kan .
Fuld flersproget blog med Nuxt.js
Nuxt.js er for Vue, ligesom Next.js er for React: en fantastisk ramme til at kombinere server-side rendering og enkeltside applikationer
Den sidste applikation, du kan oprette, ser sådan ud:
Hvad vil du lære
I dette eksempelprojekt lærer du, hvordan du bygger et komplet websted ved hjælp af Nuxt.js, fra den første opsætning til den endelige implementering.
Det udnytter mange af de fede funktioner, som Nuxt har at tilbyde, såsom sider og komponenter og styling med SCSS.
Teknisk stak og funktioner
- Nuxt.js
- Komponenter og sider
- storyblock-modul
- Mixins
- Vuex til statsforvaltning
- SCSS til styling
- Nuxt mellemvare
, som indeholder mange af de fantastiske funktioner i Nuxt.js. Jeg elsker personligt at arbejde med Nuxt, så du bør prøve det, da det også vil gøre dig til en fantastisk Vue-udvikler.
Blog med Gatsby
Gatsby er en fantastisk statisk webstedsgenerator, der bruger React og GraphQL. Dette er resultatet af projektet:
Hvad vil du lære
I denne tutorial lærer du, hvordan du bruger Gatsby til at oprette en blog, som du vil bruge til at skrive dine egne artikler ved hjælp af React og GraphQL.
Teknisk stak og funktioner
- Gatsby
- Reagerer
- GraphQL
- Plugins og temaer
- MDX/Markdown
- Bootstrap CSS
- Skabeloner
Hvis du nogensinde har ønsket at starte en blog, hvordan man laver det ved hjælp af React og GraphQL.
Jeg siger ikke, at WordPress er et dårligt valg, men med Gatsby kan du bygge højtydende hjemmesider ved hjælp af React – hvilket er en fantastisk kombination.
Blog med Gridsome
Gridsome for Vue... Okay, det havde vi allerede med Next/Nuxt.
Men det samme gælder for Gridsome og Gatsby. Begge bruger GraphQL som deres datalag, men Gridsome bruger VueJS. Det er også en fantastisk statisk webstedsgenerator, der hjælper dig med at skabe fantastiske blogs:
Hvad vil du lære
Dette projekt vil lære dig, hvordan du opretter en simpel blog for at komme i gang med Gridsome, GraphQL og Markdown. Den forklarer også, hvordan man implementerer en applikation gennem Netlify.
Teknisk stak og funktioner
- Gridsomt
- Vue
- GraphQL
- markdown
- netify
Dette er bestemt ikke den mest komplette tutorial, men den dækker de grundlæggende begreber i Gridsome og .
Lydafspiller svarende til SoundCloud ved hjælp af Quasar
Quasar er en anden Vue-ramme, der kan bruges til at bygge mobile apps. I dette projekt vil du oprette en lydafspillerapplikation som:
Hvad vil du lære
Mens andre projekter hovedsageligt fokuserer på webapps, vil denne vise dig, hvordan du bygger en mobilapp ved hjælp af Vue og Quasar-rammen.
Du burde allerede have en fungerende Cordova med Android Studio/Xcode opsat. Hvis ikke, har manualen et link til Quasar-webstedet, hvor de viser dig, hvordan du sætter alt op.
Teknisk stak og funktioner
- Quasar
- Vue
- Cordova
- bølgesurfer
- UI-komponenter
, der demonstrerer Quasars evner til at bygge mobile applikationer.
Kilde: www.habr.com