1. leckeŰrlapkezelés és validáció (vezérelt vs. vezéreltelen, könyvtárak: Formik, React Hook Form, VeeValidate)Robusztus űrlapkezelés és validáció implementálása. Összehasonlítás vezérelt és vezéreltelen bemenetek között, Formik, React Hook Form és VeeValidate könyvtárak használata, valamint összetett űrlapokhoz validáció, hibaüzenetek és beküldési folyamatok tervezése.
Vezérelt vs vezéreltelen bemenetkezelési stratégiákFormik és React Hook Form gyakorlatbanVeeValidate és Vue űrlapmintákSzinkron és aszinkron validációs szabályokHibaüzenetek, UX és hozzáférhetőség2. leckeUI komponens könyvtárak és hozzáférhetőségi gyakorlatok (Tailwind, Material, Chakra, ARIA szerepkörök, billentyűzet navigáció)Modern UI könyvtárak használata erős hozzáférhetőség mellett. Tailwind, Material UI és Chakra megismerése, majd ARIA szerepkörök, fókuszkezelés és billentyűzet navigációs minták alkalmazása inkluzív, éles környezetre kész felületek építéséhez.
Tervezési rendszerek Tailwind-del és segédosztályokkalMaterial UI és Chakra komponens mintákSzemantikus HTML és ARIA szerepkör stratégiákFókuszkezelés és billentyűzet navigációSzínkontraszt, témázás és csökkentett mozgás3. leckeFrontend keretrendszer kiválasztása és indoklása (React, Vue, Svelte) és ökoszisztéma kompromisszumokFrontend keretrendszer kiválasztásának értékelése és indoklása. React, Vue és Svelte architektúrák, ökoszisztéma érettség, teljesítmény és tanulási görbe összehasonlítása, hogy minden projekt kontextushoz a legjobb opciót válaszd és védd.
React, Vue és Svelte alapfogalmakÖkoszisztéma érettség és közösségi támogatásTeljesítmény és bundle méret kompromisszumokTypeScript és eszközintegrációDöntési keretrendszerek valós projektekhez4. leckeBuild, bundling és optimalizáció: Webpack/Vite/Rollup, kódszétválasztás, tree-shaking, asset kezelésModern build eszközök elsajátítása magas teljesítményű frontend-ekhez. Webpack, Vite és Rollup összehasonlítása, kódszétválasztás és tree-shaking konfigurálása, valamint asset kezelés, cache-elés és source map optimalizálása gyors, fenntartható éles bundle-ökhöz.
Webpack, Vite és Rollup beállítások összehasonlításaKódszétválasztás és dinamikus importokTree-shaking és halott kód eltávolításKépek, betűtípusok és statikus assetek optimalizálásaCache-elés, hash-ek és source map stratégiák5. leckeKliensoldali tesztek: komponens unit tesztek, integrációs tesztek, tesztkönyvtár választások és példákRobusztus kliensoldali tesztstratégia kidolgozása. Komponens unit tesztek, route-ok és API-k közötti integrációs tesztek, valamint Jest, Vitest, Cypress és Testing Library közötti választás megbízható, fenntartható teszt suite-ok létrehozásához.
UI komponensek unit tesztelése izolációbanFolyamatok és routolás integrációs teszteléseFelhasználóközpontú tesztek Testing Library-velJest, Vitest, Cypress vagy Playwright választásaAPI-k mockolása és instabil tesztek kezelése6. leckeLokális fejlesztés és környezeti konfiguráció: környezeti változók, .env fájlok, feature flagek frontend-hezMegbízható frontend környezetek konfigurálása lokális és felhő beállításokhoz. Környezeti változók, .env fájlok, build időbeli injekció és feature flagek kezelése, hogy biztonságosan kapcsolgass funkciókat fejlesztés, staging és éles környezetekben.
.env fájlok és build időbeli változók kezeléseFejlesztői, staging és éles konfigurációk szétválasztásaFutásidejű konfiguráció és környezeti biztonságFrontend feature flagek implementálásaTitkok kezelése és konfigurációs csapdák7. leckeProjektszerkezet és mappa konvenciók egyoldalas alkalmazásokhoz (komponensek, oldalak, szolgáltatások, hook-ok)Skálázható projektszerkezetek tervezése egyoldalas alkalmazásokhoz. Mappa konvenciók komponensekhez, oldalakhoz, szolgáltatásokhoz és hook-okhoz, valamint megosztott segédletek, tesztek és stílusok szervezése nagy kódbázisok felfedezhetővé és fenntarthatóvá tételéhez.
Komponensek, oldalak és layout-ok szervezéseSzolgáltatások, hook-ok és adat-hozzáférési rétegekMegosztott segédletek, típusok és konstansokTesztek és story fájlok strukturálásaRefaktorálás moduláris határok felé8. leckeAPI integrációs minták: REST vs GraphQL kliensek, hiba kezelés, kérés újrapróbálkozások, időtúllépésekRobusztus API integrációs minták implementálása kliensoldalon. REST és GraphQL kliensek összehasonlítása, Axios vagy Fetch konfigurálása, hibakezelés és újrapróbálkozások, valamint időtúllépések, törlések és normalizálás tervezése rugalmas adatlekérési rétegekhez.
REST kliensek konfigurálása Axios-szal vagy Fetch-cselGraphQL kliensek használata mint Apollo vagy URQLGlobális hiba kezelés és felhasználói üzenetekKérés újrapróbálkozások, backoff és időtúllépésekTörlés, abort controllerek és cache-elés9. leckeHitelesítés frontend-en: token tárolás, refresh folyamatok és biztonságos cookie megközelítésekBiztonságos frontend hitelesítési minták megértése. localStorage, sessionStorage és cookie-k összehasonlítása, refresh token folyamatok tervezése, valamint HttpOnly cookie-k, CSRF védelem és kijelentkezési stratégiák implementálása valódi alkalmazások védelméhez.
Token tárolás: localStorage vs cookie-kRefresh token folyamatok biztonságos implementálásaHttpOnly cookie-k és CSRF védelemKijelentkezés, visszavonás és rotáció kezeléseHitelesítési hiba kezelés és felhasználói visszajelzés10. leckeÁllapotkezelési opciók és minták (lokális komponens állapot, Context, Redux/Pinia/MobX, React Query)Állapotkezelési opciók összehasonlítása összetett frontend-ekhez. Lokális állapot, Context, Redux, Pinia, MobX és React Query megismerése, valamint cache-elési, normalizálási minták és felesleges újrarenderelések elkerülése nagy alkalmazásokban.
Lokális komponens állapot és emelési mintákContext API keresztvágó aggályokhozRedux, Pinia és MobX store tervezésSzerveroldali állapot React Query-vel vagy SWR-relTeljesítmény finomhangolás és szelektor minták11. leckeRoutolás és védett route-ok: kliensoldali routolás, route guard-ok, lazy loadingMegbízható kliensoldali routolás építése védett route-okkal. Route konfiguráció, beágyazott route-ok, lazy loading és route guard-ok megtanulása, amelyek hitelesítést és autorizációt érvényesítenek gyors és hozzáférhető navigáció mellett.
Kliensoldali routerek és route-ok konfigurálásaBeágyazott route-ok és layout hierarchiákLazy loading és kódszétválasztás implementálásaHitelesítés alapú route guard-ok és átirányítások404 oldalak és fallback route-ok kezelése
