Bevezetés
Akár új a programozásban, akár tapasztalt fejlesztő, az új fogalmak és nyelvek/keretrendszerek elsajátítása elengedhetetlen ebben az iparágban, hogy lépést tudjon tartani a trendekkel.
Vegyük például a Reactot, amelyet négy éve még csak nyílt forráskódú a Facebook, és máris a JavaScript-fejlesztők első számú választása lett világszerte.
A Vue-nak és az Angular-nak természetesen megvan a maga legitim rajongótábora is. Aztán ott van a Svelte és más univerzális keretrendszerek, például a Next.js vagy a Nuxt.js. És Gatsby, és Gridsome, és Quasar... és még sok más.
Ha tapasztalt JavaScript-fejlesztőként szeretné bizonyítani magát, legalább némi tapasztalattal kell rendelkeznie a különféle keretrendszerekkel és könyvtárakkal – a jó öreg JS-munka mellett.
Annak érdekében, hogy 2020-ban front-end mesterré válhasson, kilenc különböző projektet állítottam össze, amelyek mindegyike más-más JavaScript-keretrendszerre és -könyvtárra összpontosít, mint technológiai halomra, amelyet összeállíthat és hozzáadhat portfóliójához. Ne feledje, hogy semmi sem segít jobban, mint ténylegesen létrehozni dolgokat, ezért haladjon előre, használja az elméjét, és valósítsa meg
A cikk az EDISON Software támogatásával készült, amely És .
Filmkereső alkalmazás a React segítségével (akasztókkal)
Az első dolog, amit kezdhet, az az, hogy hozzon létre egy filmkereső alkalmazást a React segítségével. Az alábbiakban egy kép látható arról, hogyan fog kinézni a végső alkalmazás:
Mit fog tanulni
Az alkalmazás elkészítésével a viszonylag új Hooks API használatával fejlesztheti React képességeit. A példaprojekt React komponenseket, sok hook-ot, külső API-t és természetesen némi CSS stílust használ.
Tech stack és funkciók
- Reagáljon horgokkal
- create-reagál-app
- JSX
- CSS
Osztályok használata nélkül ezek a projektek tökéletes belépési pontot biztosítanak a funkcionális React-ba, és 2020-ban mindenképpen segítségedre lesznek. megtalálhatod . Kövesse az utasításokat, vagy készítse el saját magának.
Csevegőalkalmazás a Vue-val
Egy másik nagyszerű projekt az Ön számára, hogy létrehozzon egy csevegőalkalmazást a kedvenc JavaScript-könyvtáram, a VueJS használatával. Az alkalmazás valahogy így fog kinézni:
Mit fog tanulni
Ebből az oktatóanyagból megtudhatja, hogyan készítsen Vue alkalmazást a semmiből – hozzon létre összetevőket, kezelje az állapotokat, hozzon létre útvonalakat, csatlakozzon harmadik féltől származó szolgáltatásokhoz, és még a hitelesítést is kezelje.
Tech stack és funkciók
- Vue
- vuex
- vue router
- CLI nézet
- Toló
- CSS
Ez egy igazán nagyszerű projekt a Vue használatának megkezdéséhez, vagy meglévő készségeinek fejlesztéséhez, hogy 2020-ban elindulhasson a fejlesztés. megtalálhatod .
Gyönyörű időjárási alkalmazás az Angular 8-mal
Ez a példa segít egy gyönyörű időjárási alkalmazás létrehozásában az Angular 8 használatával:
Mit fog tanulni
Ez a projekt értékes készségeket tanít meg az alkalmazások létrehozásában a semmiből – a tervezéstől a fejlesztésig, egészen a telepítésre kész alkalmazásig.
Tech stack és funkciók
- 8. szög
- Firebase
- Szerver oldali renderelés
- CSS Griddel és Flexbox-szal
- Mobilbarát és alkalmazkodóképesség
- Sötét mód
- Gyönyörű felület
Amit nagyon szeretek ebben az átfogó projektben, az az, hogy nem elszigetelten tanulmányozod a dolgokat. Ehelyett megtanulja a teljes fejlesztési folyamatot a tervezéstől a végső üzembe helyezésig.
To-Do alkalmazás a Svelte segítségével
A Svelte olyan, mint az új gyerek a komponens-alapú megközelítésben – legalábbis hasonló a React, a Vue és az Angular-hoz. És ez az egyik legmenőbb új termék 2020-ban.
A teendő alkalmazások nem feltétlenül a legfelkapottabb téma, de valóban segítenek fejleszteni Svelte képességeit. Így fog kinézni:
Mit fog tanulni
Ez az oktatóanyag bemutatja, hogyan hozhat létre alkalmazást a Svelte 3 használatával, az elejétől a végéig. Összetevőket, stílust és eseménykezelőket fog használni
Tech stack és funkciók
- Karcsú 3
- Alkatrészek
- Stílusozás CSS-sel
- Szintaxis ES6
Nem sok jó Svelte induló projekt van, ezért találtam .
E-kereskedelmi alkalmazás a Next.js használatával
A Next.js a legnépszerűbb keretrendszer olyan React-alkalmazások készítéséhez, amelyek támogatják a kiszolgálóoldali renderelést.
Ez a projekt bemutatja, hogyan hozhat létre egy e-kereskedelmi alkalmazást, amely így néz ki:
Mit fog tanulni
Ebben a projektben megtudhatja, hogyan fejleszthet a Next.js-szel – új oldalakat és összetevőket hozhat létre, adatokat kérhet le, stílust és egy Next alkalmazást telepíthet.
Tech stack és funkciók
- Next.js
- Összetevők és oldalak
- Adatmintavétel
- stilizáció
- Projekt bevezetése
- SSR és SPA
Mindig nagyszerű, ha van egy valós példa, például egy e-kereskedelmi alkalmazás, amellyel valami újat tanulhat. tudsz .
Teljes értékű többnyelvű blog Nuxt.js-szal
A Nuxt.js a Vue-hoz, a Next.js pedig a Reacthoz: nagyszerű keretrendszer a szerveroldali megjelenítés és az egyoldalas alkalmazások erejének kombinálásához
A létrehozható végső alkalmazás így fog kinézni:
Mit fog tanulni
Ebben a mintaprojektben megtudhatja, hogyan hozhat létre teljes webhelyet a Nuxt.js használatával, a kezdeti beállítástól a végső üzembe helyezésig.
Kihasználja a Nuxt által kínált számos nagyszerű funkciót, például az oldalakat és összetevőket, valamint az SCSS-s stílust.
Tech stack és funkciók
- Nuxt.js
- Összetevők és oldalak
- történetblokk modul
- Nyálkahal
- Vuex állami irányításra
- SCSS a stílushoz
- Nuxt köztes szoftverek
, amely számos nagyszerű Nuxt.js funkciót tartalmaz. Én személy szerint szeretek a Nuxttal dolgozni, ezért érdemes kipróbálnod, mert attól is nagyszerű Vue fejlesztő leszel.
Blogolj Gatsbyvel
A Gatsby egy kiváló statikus helygenerátor a React és a GraphQL használatával. Ez a projekt eredménye:
Mit fog tanulni
Ebből az oktatóanyagból megtudhatja, hogyan használhatja a Gatsbyt egy blog létrehozásához, amelyet saját cikkeinek megírásához használhat a React és a GraphQL használatával.
Tech stack és funkciók
- Gatsby
- Reagál
- GraphQL
- Pluginok és témák
- MDX/Markdown
- Bootstrap CSS
- sablonok
Ha valaha is blogot akartál indítani, hogyan kell elkészíteni a React és a GraphQL használatával.
Nem azt mondom, hogy a WordPress rossz választás, de a Gatsby segítségével nagy teljesítményű webhelyeket készíthet a React segítségével – ami egy csodálatos kombináció.
Blog Gridsome-mal
Gridsome a Vue számára... Oké, ez már megvolt a Next/Nuxt-tal.
De ugyanez igaz Gridsome-ra és Gatsbyre is. Mindkettő a GraphQL-t használja adatrétegként, de a Gridsome a VueJS-t használja. Ez egy nagyszerű statikus webhelygenerátor is, amely segít nagyszerű blogok létrehozásában:
Mit fog tanulni
Ez a projekt megtanítja Önnek, hogyan hozhat létre egyszerű blogot a Gridsome, GraphQL és Markdown használatához. Azt is leírja, hogyan telepíthet egy alkalmazást a Netlify-on keresztül.
Tech stack és funkciók
- Zavaros
- Vue
- GraphQL
- Árleszállítás
- netlify
Ez természetesen nem a legteljesebb oktatóanyag, de lefedi a Gridsome és a .
SoundCloud-szerű audiolejátszó Quasar használatával
A Quasar egy másik Vue-keretrendszer, amely mobilalkalmazások létrehozására használható. Ebben a projektben audiolejátszó alkalmazást fog létrehozni, például:
Mit fog tanulni
Míg más projektek főként a webes alkalmazásokra összpontosítanak, ez bemutatja, hogyan hozhat létre mobilalkalmazást a Vue és a Quasar keretrendszer segítségével.
Már futnia kell a Cordova-nak, és konfigurált Android Studio/Xcode-dal. Ha nem, a kézikönyvben található egy hivatkozás a Quasar webhelyére, ahol megmutatják, hogyan kell mindent beállítani.
Tech stack és funkciók
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI összetevők
, amely bemutatja a Quasar képességeit mobil alkalmazások létrehozására.
Forrás: will.com