Les 1Formulierverwerking en validatie (gecontroleerd vs ongecontroleerd, libraries: Formik, React Hook Form, VeeValidate)Implementeer robuuste formulierverwerking en validatie. Vergelijk gecontroleerde en ongecontroleerde inputs, gebruik libraries zoals Formik, React Hook Form en VeeValidate, en ontwerp validatie, foutmeldingen en indieningsstromen voor complexe formulieren.
Gecontroleerd vs ongecontroleerd input strategieënFormik en React Hook Form in de praktijkVeeValidate en Vue formulierpatronenSynchrone en asynchrone validatieregelsFoutmeldingen, UX en toegankelijkheidLes 2UI component libraries en toegankelijkheidspraktijken (Tailwind, Material, Chakra, ARIA rollen, toetsenbordnavigatie)Leer moderne UI libraries te gebruiken terwijl je sterke toegankelijkheid behoudt. Verken Tailwind, Material UI en Chakra, pas vervolgens ARIA rollen, focusbeheer en toetsenbordnavigatiepatronen toe om inclusieve, productieklare interfaces te bouwen.
Designsystemen met Tailwind en utility classesMaterial UI en Chakra component patronenSemantische HTML en ARIA rol strategieënFocusbeheer en toetsenbordnavigatieKleurcontrast, theming en reduced motionLes 3Kiezen van een frontend framework en rechtvaardiging (React, Vue, Svelte) en ecosysteem afwegingenEvalueer en rechtvaardig je keuze voor een frontend framework. Vergelijk React, Vue en Svelte architecturen, ecosysteemrijpheid, prestaties en leercurves zodat je de beste optie kunt selecteren en verdedigen voor elke projectcontext.
React, Vue en Svelte kernconceptenEcosysteemrijpheid en community ondersteuningPrestaties en bundle grootte afwegingenTypeScript en tooling integratieBesluitvormingsframeworks voor echte projectenLes 4Build, bundling en optimalisatie: Webpack/Vite/Rollup, code splitting, tree-shaking, asset handlingBeheers moderne build tooling voor performante frontends. Vergelijk Webpack, Vite en Rollup, configureer code splitting en tree-shaking, en optimaliseer asset handling, caching en source maps voor snelle, onderhoudbare productie bundles.
Vergelijken van Webpack, Vite en Rollup setupsCode splitting en dynamische importsTree-shaking en dead code eliminatieOptimaliseren van afbeeldingen, lettertypen en statische assetsCaching, hashes en source map strategieënLes 5Client-side tests: unit testing componenten, integratietests, test library keuzes en voorbeeldenOntwikkel een robuuste client-side teststrategie. Leer unit testing voor componenten, integratietests over routes en API's, en hoe je kiest tussen Jest, Vitest, Cypress en Testing Library voor betrouwbare, onderhoudbare test suites.
Unit testing UI componenten in isolatieIntegratietests voor flows en routingGebruik van Testing Library voor user-centrische testsKiezen van Jest, Vitest, Cypress of PlaywrightMocking API's en omgaan met flaky testsLes 6Lokale dev en omgeving configuratie: env vars, .env bestanden, feature flags voor frontendConfigureer betrouwbare frontend omgevingen voor lokale en cloud setups. Leer omgaan met omgeving variabelen, .env bestanden, build-time injectie en feature flags zodat je functionaliteit veilig kunt togglen over ontwikkeling, staging en productie.
Beheren van .env bestanden en build-time variabelenScheiden van dev, staging en productie configsRuntime configuratie en omgeving veiligheidImplementeren van frontend feature flagsGeheimenbeheer en configuratie valkuilenLes 7Projectstructuur en folder conventies voor single-page apps (componenten, pagina's, services, hooks)Ontwerp schaalbare projectstructuren voor single-page apps. Leer folder conventies voor componenten, pagina's, services en hooks, en hoe je gedeelde utilities, tests en stijlen organiseert om grote codebases ontdekbaar en onderhoudbaar te houden.
Organiseren van componenten, pagina's en layoutsServices, hooks en data access layersGedeelde utilities, types en constantenStructureren van tests en story bestandenRefactoren naar modulaire grenzenLes 8API integratiepatronen: REST vs GraphQL clients, foutafhandeling, request retries, timeoutsImplementeer robuuste API integratiepatronen op de client. Vergelijk REST en GraphQL clients, configureer Axios of Fetch, behandel fouten en retries, en ontwerp timeouts, annulering en normalisatie voor veerkrachtige data fetching layers.
Configureren van REST clients met Axios of FetchGebruik van GraphQL clients zoals Apollo of URQLGlobale foutafhandeling en user messagingRequest retries, backoff en timeoutsAnnulering, abort controllers en cachingLes 9Authenticatie op de frontend: opslaan van tokens, refresh flows en beveiligde cookie benaderingenBegrijp beveiligde frontend authenticatiepatronen. Vergelijk localStorage, sessionStorage en cookies, ontwerp refresh token flows, en implementeer HttpOnly cookies, CSRF verdedigingen en logout strategieën die gebruikers beschermen in echte applicaties.
Token opslag: localStorage vs cookiesImplementeren van refresh token flows veiligHttpOnly cookies en CSRF beschermingBehandelen van logout, revocation en rotatieAuth foutafhandeling en user feedbackLes 10State management opties en patronen (lokale component state, Context, Redux/Pinia/MobX, React Query)Vergelijk state management opties voor complexe frontends. Verken lokale state, Context, Redux, Pinia, MobX en React Query, en leer patronen voor caching, normalisatie en vermijden van onnodige re-renders in grote applicaties.
Lokale component state en lifting patronenContext API voor cross-cutting concernsRedux, Pinia en MobX store designServer state met React Query of SWRPrestatie tuning en selector patronenLes 11Routing en beschermde routes: client-side routing, route guards, lazy loadingBouw betrouwbare client-side routing met beschermde routes. Leer route configuratie, geneste routes, lazy loading en route guards die authenticatie en autorisatie afdwingen terwijl navigatie snel en toegankelijk blijft.
Configureren van client-side routers en routesGeneste routes en layout hiërarchieënImplementeren van lazy loading en code splittingAuth-gebaseerde route guards en redirectsBehandelen van 404 pagina's en fallback routes
