Lecția 1Gestionarea formularelor și validare (controlat vs necontrolat, biblioteci: Formik, React Hook Form, VeeValidate)Implementați gestionarea robustă a formularelor și validare. Comparați input-urile controlate și necontrolate, utilizați biblioteci precum Formik, React Hook Form și VeeValidate, și proiectați validarea, mesajele de eroare și fluxurile de trimitere pentru formulare complexe.
Strategii input controlat vs necontrolatFormik și React Hook Form în practicăVeeValidate și tipare Vue pentru formulareReguli de validare sincronă și asincronăMesaje de eroare, UX și accesibilitateLecția 2Biblioteci UI și practici de accesibilitate (Tailwind, Material, Chakra, roluri ARIA, navigare tastatură)Învățați să utilizați biblioteci UI moderne menținând accesibilitate puternică. Explorați Tailwind, Material UI și Chakra, apoi aplicați roluri ARIA, managementul focus-ului și tipare de navigare tastatură pentru a construi interfețe inclusive, gata de producție.
Sisteme de design cu Tailwind și clase utilitareTipare componente Material UI și ChakraHTML semantic și strategii roluri ARIAManagement focus și navigare tastaturăContrast culori, teme și mișcare redusăLecția 3Alegerea framework-ului frontend și justificare (React, Vue, Svelte) și compromisuri ecosistemEvaluați și justificați alegerea framework-ului frontend. Comparați arhitecturile React, Vue și Svelte, maturitatea ecosistemului, performanța și curbele de învățare pentru a selecta și apăra cea mai bună opțiune pentru fiecare context de proiect.
Concepte de bază React, Vue și SvelteMaturitate ecosistem și suport comunitateCompromisuri performanță și dimensiune bundleIntegrare TypeScript și unelteCadre decizionale pentru proiecte realeLecția 4Build, bundling și optimizare: Webpack/Vite/Rollup, code splitting, tree-shaking, gestionare asset-uriStăpâniți uneltele moderne de build pentru frontend-uri performante. Comparați Webpack, Vite și Rollup, configurați code splitting și tree-shaking, și optimizați gestionarea asset-urilor, caching-ul și source maps pentru a livra bundle-uri rapide și ușor de întreținut.
Comparație configurații Webpack, Vite, RollupCode splitting și importuri dinamiceTree-shaking și eliminare cod mortOptimizare imagini, fonturi și asset-uri staticeStrategii caching, hash-uri și source mapsLecția 5Teste client-side: testare unitară componente, teste integrare, alegeri biblioteci testare și exempleDezvoltați o strategie robustă de testare client-side. Învățați testarea unitară pentru componente, teste de integrare pe rute și API-uri, și cum să alegeți între Jest, Vitest, Cypress și Testing Library pentru a crea suite de teste fiabile și ușor de întreținut.
Testare unitară componente UI în izolareTeste integrare pentru fluxuri și rutareFolosirea Testing Library pentru teste user-centricAlegere Jest, Vitest, Cypress sau PlaywrightMocking API-uri și gestionare teste instabileLecția 6Dezvoltare locală și configurare mediu: variabile env, fișiere .env, feature flags pentru frontendConfigurați medii frontend fiabile pentru setup-uri locale și cloud. Învățați să gestionați variabile de mediu, fișiere .env, injecție la build time și feature flags pentru a comuta funcționalități în siguranță între dezvoltare, staging și producție.
Gestionare fișiere .env și variabile build-timeSeparare configurații dev, staging, producțieConfigurare runtime și siguranță mediuImplementare feature flags frontendGestionare secrete și capcane configurareLecția 7Structura proiect și convenții directoare pentru single-page apps (componente, pagini, servicii, hooks)Proiectați structuri de proiect scalabile pentru single-page apps. Învățați convenții directoare pentru componente, pagini, servicii și hooks, și cum să organizați utilitare partajate, teste și stiluri pentru a păstra codebase-uri mari ușor de descoperit și întreținut.
Organizare componente, pagini și layout-uriServicii, hooks și layere acces dateUtilitare partajate, tipuri și constanteStructurare teste și fișiere storyRefactorizare spre limite modulareLecția 8Tipare integrare API: clienți REST vs GraphQL, gestionare erori, retry-uri request, timeout-uriImplementați tipare robuste de integrare API pe client. Comparați clienți REST și GraphQL, configurați Axios sau Fetch, gestionați erori și retry-uri, și proiectați timeout-uri, anulări și normalizare pentru layere rezistente de fetch date.
Configurare clienți REST cu Axios sau FetchFolosire clienți GraphQL precum Apollo sau URQLGestionare erori globală și mesaje utilizatorRetry-uri request, backoff și timeout-uriAnulare, controlere abort și cachingLecția 9Autentificare frontend: stocare token-uri, fluxuri refresh, abordări cookie securizateÎnțelegeți tiparele securizate de autentificare frontend. Comparați localStorage, sessionStorage și cookies, proiectați fluxuri refresh token, și implementați cookies HttpOnly, apărări CSRF și strategii logout care protejează utilizatorii în aplicații reale.
Stocare token: localStorage vs cookiesImplementare fluxuri refresh token în siguranțăCookies HttpOnly și protecție CSRFGestionare logout, revocare și rotațieGestionare erori auth și feedback utilizatorLecția 10Opțiuni și tipare management stare (stare locală componente, Context, Redux/Pinia/MobX, React Query)Comparați opțiunile de management stare pentru frontend-uri complexe. Explorați stare locală, Context, Redux, Pinia, MobX și React Query, și învățați tipare pentru caching, normalizare și evitarea re-render-urilor inutile în aplicații mari.
Stare locală componente și tipare liftingContext API pentru preocupări cross-cuttingDesign store Redux, Pinia și MobXStare server cu React Query sau SWROptimizare performanță și tipare selectoriLecția 11Rutare și rute protejate: rutare client-side, gardieni rută, lazy loadingConstruiți rutare client-side fiabilă cu rute protejate. Învățați configurare rută, rute imbricate, lazy loading și gardieni rută care impun autentificarea și autorizarea păstrând navigarea rapidă și accesibilă.
Configurare routere și rute client-sideRute imbricate și ierarhii layoutImplementare lazy loading și code splittingGardieni rută bazate pe auth și redirectăriGestionare pagini 404 și rute fallback
