Bevezetés
Akár újonc vagy a programozásban, akár tapasztalt fejlesztő, az új koncepciók és nyelvek/frameworkök megismerése kötelező a trendek követéséhez.
Vegyük például a Reactot, amelynek forráskódját a Facebook mindössze négy évvel ezelőtt tette közzé, és amely mára a világ minden tájáról származó JavaScript-fejlesztők első választása lett.
A Vue és az Angular természetesen szintén rendelkezik saját hűséges felhasználói táborával. Ezen kívül ott van még a Svelte és más általános keretrendszerek, mint a Next.js vagy a Nuxt.js. És a Gatsby, a Gridsome, a Quasar… és még sok más.
Ha tapasztalt JavaScript-fejlesztőként szeretnél kitűnni, legalább némi tapasztalattal kell rendelkezned különféle keretrendszerek és könyvtárak használatában — a klasszikus, régi JS mellett.
Hogy segítsenek neked a front-end mesterévé válni 2020-ban, összegyűjtöttem kilenc különböző projektet, amelyek mind különböző JavaScript keretrendszerekhez és könyvtárakhoz kapcsolódnak mint technológiai stack, amit létrehozhatsz és hozzáadhatsz a portfóliódhoz. Ne feledd, hogy semmi sem segít jobban, mint amikor a gyakorlatban valósítasz meg dolgokat, ezért lépj előre, kapcsolj be és tedd lehetővé.
A cikket az EDISON Software támogatásával fordították, amely , valamint .
Filmek keresésére szolgáló alkalmazás React segítségével (hook-okkal)
Az első, amit elkezdhetsz, egy filmes kereső alkalmazás létrehozása React segítségével. Az alábbiakban látható, hogyan fog kinézni a végső alkalmazás:
Mit fogsz tanulni
E projekt létrehozásával fejlesztheted React készségeidet, a viszonylag új Hooks API használatával. A projekt példája React komponenseket, számos hook-ot, külső API-t és persze néhány CSS stílust használ.
Technikai stack és funkciók
- React hook-okkal
- create-react-app
- JSX
- CSS
Osztályok használata nélkül ezek a projektek tökéletes belépési pontot nyújtanak a funkcionális React világába, és biztosan segítenek neked 2020-ban. Itt találhatsz . Kövesd az utasításokat, vagy készítsd el a saját ízlésed szerint.
Chat alkalmazás Vue segítségével
Még egy nagyszerű projekt számodra — hozz létre egy chat alkalmazást, a kedvenc JavaScript könyvtárammal: VueJS. Az alkalmazás körülbelül így fog kinézni:
Mit fogsz tanulni
Ebben az útmutatóban megtudhatja, hogyan készíthet egy Vue alkalmazást a nulláról — komponensek létrehozása, állapotok kezelése, útvonalak létrehozása, harmadik féltől származó szolgáltatások csatlakoztatása és még az autentikáció kezeléséig.
Technikai stack és funkciók
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Ez valóban egy nagyszerű projekt, hogy elkezdje a Vue-val való munkát, vagy fejlessze meglévő készségeit a fejlesztés terén 2020-ban. Azt találhatja, hogy .
Gyönyörű időjárás-alkalmazás Angular 8-tel
Ez a példa segít Önnek egy gyönyörű időjárás-alkalmazás létrehozásában Angular 8 segítségével:
Mit fogsz tanulni
Ez a projekt értékes készségekre tanít meg alkalmazások készítése közben a nulláról — a tervezéstől a fejlesztésig, egészen a telepíthető alkalmazásig.
Technikai stack és funkciók
- Angular 8
- Firebase
- Szerveroldali renderelés
- CSS rács és Flexbox
- Mobilbarát és reszponzív
- Sötét mód
- Gyönyörű felhasználói felület
Ami igazán tetszik ebben a lefedő projektben, az az, hogy nem izoláltan tanulja meg a dolgokat. Ehelyett az egész fejlesztési folyamatot tanulmányozza — a tervezéstől a végső telepítésig.
To-Do alkalmazás Svelte segítségével
A Svelte egy új gyerek a komponens-alapú megközelítések között — legalábbis hasonló a React, Vue és Angular-hoz. Ez az egyik legforróbb újdonság 2020-ban.
A To-Do alkalmazások nem feltétlenül a legforróbb téma, de valóban segíteni fog Önnek a Svelte készségeinek csiszolásában. Valahogy így fog kinézni:
Mit fogsz tanulni
Ebből a tutoriálból megtudhatja, hogyan készíthet egy alkalmazást Svelte 3 segítségével, a kezdetektől a végéig. Használni fogja a komponenseket, a stilizálást és az eseménykezelőket.
Technikai stack és funkciók
- Svelte 3
- Összetevők
- Stilizálás CSS-sel
- ES 6 szintaxis
Nincs sok jó kezdő projekt a Svelte-hez, így találtam .
Приложение для электронной коммерции с помощью Next.js
A Next.js a legnépszerűbb keretrendszer React-alkalmazások készítésére, amelyek dobozból kiindulva támogatják a szerveroldali renderelést.
Ez a projekt megmutatja, hogyan készíthet egy e-kereskedelmi alkalmazást, amely így néz ki:
Mit fogsz tanulni
Ebben a projektben megtanulja, hogyan fejlesszen Next.js segítségével — új oldalak és komponensek létrehozása, adatok lekérése, valamint az alkalmazás stilizálása és telepítése.
Technikai stack és funkciók
- Next.js
- Komponensek és oldalak
- Adatok lekérése
- Stilizálás
- A projekt telepítése
- SSR és SPA
Mindig jó, ha van egy valós példa, mint egy e-kereskedelmi alkalmazás, hogy új dolgokat tanuljunk. Itt találhat egy tutorialt. .
Полноценный мультиязычный блог с Nuxt.js
A Nuxt.js a Vue-hoz olyan, mint a Next.js a React-hoz: egy nagyszerű keretrendszer a szerveroldali renderelés és az eg página alkalmazások lehetőségeinek ötvözésére.
Az utolsó alkalmazás, amelyet létrehozhat, így fog kinézni:
Mit fogsz tanulni
Ebben a projektpéldában megtanulja, hogyan készíthet teljes értékű weboldalt a Nuxt.js segítségével — a kezdeti beállítástól a végső telepítésig.
Számos érdekes funkciót használ, amelyet a Nuxt kínál, például oldalak és komponensek, valamint a SCSS általi stilizálás.
Technikai stack és funkciók
- Nuxt.js
- Komponensek és oldalak
- Storyblock modul
- Mixinek
- Vuex az állapot kezelésére
- SCSS a stilizáláshoz
- Nuxt köztesprogramok
, amely számos nagyszerű lehetőséget tartalmaz a Nuxt.js-ből. Személy szerint szeretem a Nuxt-tal való munkát, ezért érdemes kipróbálnia, mert ez egyúttal nagyszerű Vue fejlesztővé is tesz.
Blog Gatsby-vel
A Gatsby egy nagyszerű statikus weboldal-generátor, amely a React és GraphQL-t használja. Ez a projekt eredménye:
Mit fogsz tanulni
Ebben az útmutatóban megtanulja, hogyan használhatja a Gatsby-t egy olyan blog létrehozására, amelyet saját cikkei írására fog használni, a React és GraphQL segítségével.
Technikai stack és funkciók
- Gatsby
- React
- GraphQL
- Bővítmények és témák
- MDX/Markdown
- Bootstrap CSS
- Sablonok
Ha valaha is szeretett volna indítani egy blogot, arra, hogyan készíthet egyet a React és GraphQL használatával.
Nem azt mondom, hogy a WordPress rossz választás, de a Gatsby-vel nagy teljesítményű webhelyeket hozhat létre a React segítségével — ami egy lenyűgöző kombináció.
Blog Gridsome-mal
Gridsome a Vue-hoz… Nos, ezt már láttuk a Next/Nuxt-tal.
De ugyanez érvényes a Gridsome-ra és a Gatsby-re is. Mindkettő GraphQL-t használ az adatszolgáltatási rétegként, de a Gridsome a VueJS-t használja. Ez is egy lenyűgöző statikus weboldal-generátor, amely segít nagyszerű blogok létrehozásában:
Mit fogsz tanulni
Ez a projekt megtanítja, hogyan készíthet egy egyszerű blogot, hogy elkezdhesse a munkát a Gridsome-mal, GraphQL-lal és Markdown-nal. Emellett bemutatja, hogyan lehet az alkalmazást Netlify-on keresztül telepíteni.
Technikai stack és funkciók
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Ez természetesen nem a legátfogóbb útmutató, de lefedi a Gridsome és a .
Hangszóró, amely hasonlít a SoundCloud-ra, a Quasar segítségével.
A Quasar — ez egy másik Vue keretrendszer, amelyet mobilalkalmazások létrehozására használhatunk. Ebben a projektben egy audiolejátszó alkalmazást fog létrehozni, például:
Mit fogsz tanulni
Míg más projektek főként webalkalmazásokra összpontosítanak, ez megmutatja, hogyan lehet mobilalkalmazást létrehozni a Vue és a Quasar keretrendszer segítségével.
Már működő Cordova-val kell rendelkeznie, beállított Android Studio/Xcode-dal. Ha nem, akkor az útmutatóban talál egy hivatkozást a Quasar weboldalára, ahol bemutatják, hogyan állítsa be mindezt.
Technikai stack és funkciók
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Komponensek
, amely bemutatja a Quasar képességeit mobilalkalmazások létrehozásában.
Forrás: habr.com
