Misja kosmiczna
Ucząc się JavaScript, React.js i Redux przenosimy się w misję kosmiczną. Eksploruj przestrzeń kosmiczną jako członek zespołu astronautów.
Czego się nauczysz
Główne projekty
W trakcie kursu zbudujesz prawdziwe projekty, które możesz dodać do swojego portfolio
Mission Control Panel
Dashboard kontroli misji z real-time updates i wykresami
Crew Management System
CRUD aplikacja do zarządzania załogą z autentykacją
Space Explorer
Aplikacja do eksploracji kosmosu z NASA API
Program kursu
14 moduły pełne interaktywnych ćwiczeń i praktycznych projektów
Start misji
Samouczek
Wprowadzenie do misji kosmicznej
12 ćwiczeń
Lądowanie na Marsie
Podstawy JavaScript
Zmienne, funkcje, obiekty
20 ćwiczeń
Nowa rzeczywistość
Podstawy React.js
Komponenty, JSX, props
25 ćwiczeń
Interfejs użytkownika
Tworzenie UI
Tworzenie interfejsów użytkownika w React
22 ćwiczeń
Problemy z łącznością
Interaktywność i State
State, Events, Hooks - useState, useEffect
28 ćwiczeń
- Cykl życia i efekty
- Synchronizacja z zewnętrznymi systemami
- Obsługa API i pobieranie danych
- Czyszczenie efektów
- Referencje z useRef
- Optymalizacja wydajności z useEffect
- Własne hooki (Custom Hooks) do efektów
- Zaawansowane efekty — race conditions i debouncing
- Memoizacja - React.memo, useMemo i useCallback
- Powtorzenie: Hook useRef - referencje i wartości między renderami
- Powtorzenie: Zaawansowane Custom Hooks - wzorce i kompozycja
Zaawansowane systemy
React zaawansowany
Context API, Custom Hooks, Optymalizacja
30 ćwiczeń
- React Router - Kosmiczna Nawigacja
- Konfiguracja routingu w aplikacjach kosmicznych
- Parametry URL w kosmicznej nawigacji
- Zagnieżdżone ścieżki w intergalaktycznej nawigacji
- Nawigacja programistyczna w kosmicznych podróżach
- Zabezpieczanie ścieżek w kosmicznej stacji
- Przekierowania w kosmicznej nawigacji
- Lazy loading komponentów w kosmicznej podróży
- Przekazywanie stanu przez lokalizacje
- Obsługa historii przeglądarki w kosmicznej podróży
- Kompletna architektura routingu - Centrum Dowodzenia Nawigacją
Z innej perspektywy
Zarządzanie stanem
Redux - store, actions, reducers
25 ćwiczeń
- Podstawy stylowania w React
- Wprowadzenie: Styled Components
- Sass (SCSS) - Kosmiczna syntaktyczna supersiła
- Wprowadzenie: Tailwind CSS
- Wprowadzenie: Frameworki komponentów UI
- Tworzenie własnych systemów design - Architektura wizualna kosmicznej przyszłości
- React Transition Group - Animowanie międzygwiezdnych podróży UI
- Animacje CSS i keyframes w React
- Projekt: Kosmiczny Panel Kontroli Misji
Podróż na Orbiter
React Router
Nawigacja, routing, parametry
20 ćwiczeń
Komunikacja z bazą
Asynchroniczność i API
Fetch, Axios, async/await, REST API
28 ćwiczeń
- useTransition - nieblokujące aktualizacje UI
- useFormStatus i useActionState
- useId - unikalne identyfikatory dla dostępności
- use - uniwersalny hook do obsługi Promise i Context
- useDeferredValue - opóźnione wartości dla wydajności
- Wirtualizacja list i windowing
- useOptimistic - optymistyczne aktualizacje UI
- Projekt: Zaawansowana aplikacja React 18+
Stylizacja statku
Stylizacja aplikacji
CSS Modules, Styled Components, Tailwind
20 ćwiczeń
- React Portals
- React-i18next - Internacjonalizacja aplikacji React
- Kompleksowe praktyki bezpieczeństwa w React
- Apollo Client - kompleksowa integracja GraphQL z React
- WebSockets i Server-Sent Events w React
- Web Workers w React
- React Compiler (React Forget)
- Streaming SSR i Edge Runtime
- React Server Components (RSC) - przyszłość React
- Micro-frontends z React - architektura skalowalna
- React Query / TanStack Query - zarządzanie stanem serwerowym
- React 19 - ref bez forwardRef
- React 19.2 - Partial Pre-rendering (PPR)
- Projekt główny: Kosmiczne Centrum Dowodzenia Misją
Kontrola jakości
Testowanie
Jest, React Testing Library, E2E
15 ćwiczeń
- Komunikacja kosmiczna - czym jest Data Fetching
- Axios i biblioteki HTTP
- Stany ładowania, błędów i pustych danych
- Race Conditions i AbortController
- POST, PUT, DELETE - wysyłanie danych
- Cachowanie danych i Stale-While-Revalidate
- Zaawansowana obsługa błędów
- Paginacja i Infinite Scroll
- Projekt główny: Kosmiczny Katalog Gwiazd
Optymalizacja lotu
Performance
React.memo, useMemo, useCallback, Code Splitting
12 ćwiczeń
- Mapy gwiezdne - dlaczego TypeScript z React
- Typowanie komponentów funkcyjnych
- Typowanie props - interfejsy i właściwości opcjonalne
- Typowanie useState i useRef
- Typowanie zdarzen - ChangeEvent, FormEvent, MouseEvent
- Komponenty generyczne - uniwersalne systemy nawigacji
- Discriminated unions - warianty komponentów
- Typowanie Context API i useReducer
- Projekt główny: Typowany dashboard kosmiczny
Integracje zewnętrzne
Zewnętrzne usługi
Firebase, Auth0, Stripe, Analytics
10 ćwiczeń
- Testowanie React - Kontrola bezpieczenstwa przed startem
- Jest - Silnik rakietowy testow
- React Testing Library - Panel kontroli misji
- Testowanie interakcji użytkownika
- Testowanie komponentów asynchronicznych
- Mockowanie modułów i API
- Testowanie hookow - Diagnostyka systemow
- Snapshot testing - Zdjecie konstelacji
- Projekt główny: Kosmiczne Centrum Kontroli Misji
Podróż w nieznane
Deployment
Vercel, Netlify, CI/CD, Production build
8 ćwiczeń
- CSS Variables i dynamiczne motywy w React
- CSS Modules - izolowane style komponentów
- Zero-runtime CSS-in-JS: vanilla-extract, Linaria, Panda CSS
- Theming w styled-components - ThemeProvider
- Responsive Design Patterns w React
- Porownanie podejsc do stylowania w React
- CSS-in-JS: Emotion i vanilla-extract
- Design Tokens i systematyczny CSS
- Projekt główny: Kosmiczny Dashboard z różnymi podejsciami
- Composition vs Inheritance w React
- Container/Presentational Pattern
- Headless Components w React
- Inversion of Control w React
- Feature Flags i A/B Testing w React
- Event-Driven Architecture w React
- Atomic Design w React
- Zaawansowane wzorce: Provider i State Machines
- Projekt koncowy: Architektura kosmicznej stacji
- Wprowadzenie do obsługi błędów w React
- Error Boundaries - granice błędów
- react-error-boundary - nowoczesna biblioteka
- Obsluga bledow w formularzach
- Logowanie i monitoring bledow
- Fallback UI i Skeleton Loaders
- Graceful Degradation i Resilient UI
- Zaawansowane wzorce Error Handling
- Projekt główny: Resilient Space Dashboard
Motyw kursu
Statki kosmiczne i Galaktyki
Każdy moduł osadzony jest w unikalnej tematyce, która sprawia, że nauka staje się przygodą.
Twój przewodnik
Ra
Kosmiczny przewodnik
Poprowadzi Cię przez wszystkie wyzwania i pomoże zdobyć nowe umiejętności.
Zacznij naukę JavaScript już dziś
Dołącz do CodeWorlds i odkryj nowoczesne metody nauki, które sprawiają, że programowanie staje się fascynujące i dostępne dla każdego.