Lekcja 1Obsługa i walidacja formularzy (kontrolowane vs niekontrolowane, biblioteki: Formik, React Hook Form, VeeValidate)Zaimplementuj solidną obsługę i walidację formularzy. Porównaj kontrolowane i niekontrolowane pola wejściowe, używaj bibliotek takich jak Formik, React Hook Form i VeeValidate oraz projektuj walidację, komunikaty błędów i przepływy wysyłania dla złożonych formularzy.
Strategie kontrolowanych vs niekontrolowanych pól wejściowychFormik i React Hook Form w praktyceVeeValidate i wzorce formularzy VueReguły walidacji synchronicznej i asynchronicznejKomunikaty błędów, UX i dostępnośćLekcja 2Biblioteki komponentów UI i praktyki dostępności (Tailwind, Material, Chakra, role ARIA, nawigacja klawiaturą)Naucz się używać nowoczesnych bibliotek UI przy zachowaniu wysokiej dostępności. Poznaj Tailwind, Material UI i Chakra, a następnie stosuj role ARIA, zarządzanie fokusem i wzorce nawigacji klawiaturą do budowania inkluzywnych, gotowych do produkcji interfejsów.
Systemy designu z Tailwind i klasami użytecznościowymiWzorce komponentów Material UI i ChakraSemantyczny HTML i strategie ról ARIAZarządzanie fokusem i nawigacja klawiaturąKontrast kolorów, motywy i zmniejszony ruchLekcja 3Wybór frameworka frontendowego i uzasadnienie (React, Vue, Svelte) oraz kompromisy ekosystemuOceń i uzasadnij wybór frameworka frontendowego. Porównaj architektury React, Vue i Svelte, dojrzałość ekosystemu, wydajność i krzywe uczenia się, aby wybrać i obronić najlepszą opcję dla każdego kontekstu projektu.
Podstawowe koncepcje React, Vue i SvelteDojrzałość ekosystemu i wsparcie społecznościKompromisy wydajności i rozmiaru pakietuIntegracja TypeScript i narzędziRamy decyzyjne dla rzeczywistych projektówLekcja 4Budowanie, pakowanie i optymalizacja: Webpack/Vite/Rollup, code splitting, tree-shaking, obsługa zasobówOpanuj nowoczesne narzędzia budowania dla wydajnych frontendów. Porównaj Webpack, Vite i Rollup, skonfiguruj code splitting i tree-shaking oraz optymalizuj obsługę zasobów, buforowanie i source mapy dla szybkich, łatwych w utrzymaniu pakietów produkcyjnych.
Porównanie konfiguracji Webpack, Vite i RollupCode splitting i dynamiczne importyTree-shaking i eliminacja martwego koduOptymalizacja obrazów, czcionek i zasobów statycznychStrategie buforowania, hashy i source mapLekcja 5Testy po stronie klienta: testy jednostkowe komponentów, testy integracyjne, wybór bibliotek testowych i przykładyOpracuj solidną strategię testowania po stronie klienta. Naucz się testów jednostkowych komponentów, testów integracyjnych dla tras i API oraz jak wybrać między Jest, Vitest, Cypress i Testing Library, aby tworzyć niezawodne, łatwe w utrzymaniu zestawy testów.
Testy jednostkowe komponentów UI w izolacjiTesty integracyjne dla przepływów i routinguUżywanie Testing Library do testów zorientowanych na użytkownikaWybór Jest, Vitest, Cypress lub PlaywrightMockowanie API i obsługa niestabilnych testówLekcja 6Lokalna konfiguracja deweloperska i środowiska: zmienne środowiskowe, pliki .env, feature flags dla frontenduSkonfiguruj niezawodne środowiska frontendowe dla lokalnych i chmurowych setupów. Naucz się zarządzać zmiennymi środowiskowymi, plikami .env, wstrzykiwaniem w czasie budowania i feature flags, aby bezpiecznie przełączać funkcjonalność między rozwojem, stagingiem i produkcją.
Zarządzanie plikami .env i zmiennymi w czasie budowaniaRozdzielanie konfiguracji dev, staging i productionKonfiguracja runtime i bezpieczeństwo środowiskaImplementacja feature flags dla frontenduObsługa sekretów i pułapki konfiguracjiLekcja 7Struktura projektu i konwencje folderów dla aplikacji jednostronicowych (komponenty, strony, serwisy, hooki)Zaprojektuj skalowalne struktury projektów dla aplikacji jednostronicowych. Naucz się konwencji folderów dla komponentów, stron, serwisów i hooków oraz jak organizować współdzielone narzędzia, testy i style, aby duże bazy kodu były łatwe do odkrywania i utrzymania.
Organizacja komponentów, stron i layoutówSerwisy, hooki i warstwy dostępu do danychWspółdzielone narzędzia, typy i stałeStrukturyzacja testów i plików storyRefaktoryzacja ku modułowym granicomLekcja 8Wzorce integracji API: klienci REST vs GraphQL, obsługa błędów, ponowne próby żądań, timeoutyZaimplementuj solidne wzorce integracji API po stronie klienta. Porównaj klientów REST i GraphQL, skonfiguruj Axios lub Fetch, obsługuj błędy i ponowne próby oraz projektuj timeouty, anulowanie i normalizację dla odpornych warstw pobierania danych.
Konfiguracja klientów REST z Axios lub FetchUżywanie klientów GraphQL jak Apollo lub URQLGlobalna obsługa błędów i komunikaty użytkownikaPonowne próby żądań, backoff i timeoutyAnulowanie, kontrolery abort i buforowanieLekcja 9Autentykacja po stronie frontendu: przechowywanie tokenów, przepływy odświeżania, bezpieczne podejścia z ciasteczkamiZrozum bezpieczne wzorce autentykacji frontendu. Porównaj localStorage, sessionStorage i ciasteczka, zaprojektuj przepływy tokenów odświeżających oraz zaimplementuj ciasteczka HttpOnly, obronę CSRF i strategie wylogowania chroniące użytkowników w rzeczywistych aplikacjach.
Przechowywanie tokenów: localStorage vs ciasteczkaBezpieczna implementacja przepływów odświeżania tokenówCiasteczka HttpOnly i ochrona CSRFObsługa wylogowania, unieważniania i rotacjiObsługa błędów autentykacji i informacja zwrotna użytkownikaLekcja 10Opcje i wzorce zarządzania stanem (lokalny stan komponentu, Context, Redux/Pinia/MobX, React Query)Porównaj opcje zarządzania stanem dla złożonych frontendów. Poznaj lokalny stan, Context, Redux, Pinia, MobX i React Query oraz naucz się wzorców dla buforowania, normalizacji i unikania niepotrzebnych ponownych renderów w dużych aplikacjach.
Lokalny stan komponentu i wzorce podnoszeniaContext API dla problemów przekrojowychProjektowanie store'ów Redux, Pinia i MobXStan serwera z React Query lub SWRDostrojenie wydajności i wzorce selektorówLekcja 11Routing i chronione trasy: routing po stronie klienta, strażnicy tras, lazy loadingZbuduj niezawodny routing po stronie klienta z chronionymi trasami. Naucz się konfiguracji tras, zagnieżdżonych tras, lazy loading i strażników tras egzekwujących autentykację i autoryzację przy zachowaniu szybkiej i dostępnej nawigacji.
Konfiguracja routerów i tras po stronie klientaZagnieżdżone trasy i hierarchie layoutówImplementacja lazy loading i code splittingStrażnicy tras opartych na autentykacji i przekierowaniaObsługa stron 404 i tras zapasowych
