Lektion 1Formhantering och validering (kontrollerade vs okontrollerade, bibliotek: Formik, React Hook Form, VeeValidate)Implementera robust formhantering och validering. Jämför kontrollerade och okontrollerade inmatningar, använd bibliotek som Formik, React Hook Form och VeeValidate, och designa validering, felmeddelanden och inlämningsflöden för komplexa formulär.
Kontrollerade vs okontrollerade inmatningsstrategierFormik och React Hook Form i praktikenVeeValidate och Vue-formmönsterSynkrona och asynkrona valideringsreglerFelmeddelanden, UX och tillgänglighetLektion 2UI-komponentbibliotek och tillgänglighetsmetoder (Tailwind, Material, Chakra, ARIA-roller, tangentbordsnavigering)Lär dig använda moderna UI-bibliotek samtidigt som du upprätthåller stark tillgänglighet. Utforska Tailwind, Material UI och Chakra, applicera sedan ARIA-roller, fokusshantering och tangentbordsnavigeringsmönster för att bygga inkluderande, produktionsredo gränssnitt.
Designsystem med Tailwind och utility-klasserMaterial UI och Chakra-komponentmönsterSemantisk HTML och ARIA-rollstrategierFokusshantering och tangentbordsnavigeringFärgmotsats, teman och minskad rörelseLektion 3Val av frontend-ramverk och motivering (React, Vue, Svelte) och ekosystemavvägningarUtvärdera och motivera ditt val av frontend-ramverk. Jämför React, Vue och Svelte-arkitekturer, ekosystemmognad, prestanda och inlärningskurvor så att du kan välja och försvara det bästa alternativet för varje projektkontext.
React, Vue och Svelte kärnkonceptEkosystemmognad och community-stödPrestanda- och bundle-storleksavvägningarTypeScript och verktygsintegrationBeslutsramverk för verkliga projektLektion 4Bygge, buntning och optimering: Webpack/Vite/Rollup, koddelning, tree-shaking, tillgångshanteringBemästra moderna byggverktyg för presterande frontends. Jämför Webpack, Vite och Rollup, konfigurera koddelning och tree-shaking, och optimera tillgångshantering, cachning och sourcemaps för att leverera snabba, underhållbara produktionsbundlar.
Jämförelse av Webpack, Vite och Rollup-uppsättningarKoddelning och dynamiska importerTree-shaking och död kodelimineringOptimering av bilder, typsnitt och statiska tillgångarCachnings-, hash- och sourcemap-strategierLektion 5Klient-sidiga tester: enhetstester för komponenter, integrationstester, testbiblioteksval och exempelUtveckla en robust klient-sidig teststrategi. Lär dig enhetstestning för komponenter, integrationstester över rutter och API:er, och hur man väljer mellan Jest, Vitest, Cypress och Testing Library för att skapa pålitliga, underhållbara testsviter.
Enhetstestning av UI-komponenter isoleratIntegrationstester för flöden och routingAnvändning av Testing Library för användarcentrerade testerVal av Jest, Vitest, Cypress eller PlaywrightMockning av API:er och hantering av fladdriga testerLektion 6Lokal utveckling och miljökonfiguration: miljövariabler, .env-filer, funktionsflaggor för frontendKonfigurera pålitliga frontend-miljöer för lokal och molnuppsättning. Lär dig hantera miljövariabler, .env-filer, byggtidsinjektion och funktionsflaggor så att du säkert kan växla funktionalitet över utveckling, staging och produktion.
Hantering av .env-filer och byggtidsvariablerSeparering av dev-, staging- och produktionskonfigurationerKörtidskonfiguration och miljösäkerhetImplementering av frontend-funktionsflaggorHantering av hemligheter och konfigurationsfällorLektion 7Projektstruktur och mappkonventioner för single-page-appar (komponenter, sidor, tjänster, hooks)Designa skalbara projektstrukturer för single-page-appar. Lär dig mappkonventioner för komponenter, sidor, tjänster och hooks, och hur man organiserar delade verktyg, tester och stilar för att hålla stora kodbaser sökbara och underhållbara.
Organisation av komponenter, sidor och layouterTjänster, hooks och datatillgångslagDelade verktyg, typer och konstanterStrukturering av tester och story-filerRefaktorisering mot modulära gränserLektion 8API-integrationsmönster: REST vs GraphQL-klienter, felhantering, förfråtningsåterförsök, timeoutsImplementera robusta API-integrationsmönster på klienten. Jämför REST- och GraphQL-klienter, konfigurera Axios eller Fetch, hantera fel och återförsök, och designa timeouts, avbrott och normalisering för motståndskraftiga datainhämtningsskikt.
Konfigurering av REST-klienter med Axios eller FetchAnvändning av GraphQL-klienter som Apollo eller URQLGlobal felhantering och användarmeddelandenFörfråtningsåterförsök, backoff och timeoutsAvbrott, abortkontrollanter och cachningLektion 9Autentisering på frontend: lagring av tokens, uppdateringsflöden och säkra cookie-metoderFörstå säkra frontend-autentiseringsmönster. Jämför localStorage, sessionStorage och cookies, designa uppdateringstokenflöden, och implementera HttpOnly-cookies, CSRF-försvar och utloggningsstrategier som skyddar användare i verkliga applikationer.
Tokenlagring: localStorage vs cookiesImplementering av säkra uppdateringstokenflödenHttpOnly-cookies och CSRF-skyddHantering av utloggning, återkallande och rotationAuth-felhantering och användarfeedbackLektion 10Tillståndshanteringalternativ och mönster (lokalt komponenttillstånd, Context, Redux/Pinia/MobX, React Query)Jämför tillståndshanteringalternativ för komplexa frontends. Utforska lokalt tillstånd, Context, Redux, Pinia, MobX och React Query, och lär dig mönster för cachning, normalisering och undvikande av onödiga omritningar i stora applikationer.
Lokalt komponenttillstånd och lyftmönsterContext API för tvärskärande bekymmerRedux, Pinia och MobX-butikdesignServer-tillstånd med React Query eller SWRPrestandaoptimering och selektormönsterLektion 11Routing och skyddade rutter: klient-sidig routing, rutskydd, lat inläsningBygg pålitlig klient-sidig routing med skyddade rutter. Lär dig ruttkonfiguration, kapslade rutter, lat inläsning och rutskydd som upprätthåller autentisering och auktorisering samtidigt som navigeringen hålls snabb och tillgänglig.
Konfigurering av klient-sidiga routrar och rutterKapslade rutter och layout-hierarkierImplementering av lat inläsning och koddelningAuth-baserade rutskydd och omdirigeringarHantering av 404-sidor och reservrutter