React od Zera do Mistrza

O kursie

Chcesz tworzyć szybkie, dynamiczne i profesjonalne aplikacje webowe?
Ten kurs poprowadzi Cię krok po kroku od podstaw Reacta aż po zaawansowane techniki, które wykorzystują najlepsi frontend developerzy.
Nauczysz się budować własne komponenty, zarządzać stanem aplikacji, komunikować się z API, stylować aplikacje i publikować gotowe projekty w internecie.
Bez zbędnej teorii — 100% praktyki i realne projekty po każdym module!

✅ Tworzyć komponenty i zarządzać stanem w React
✅ Budować dynamiczne aplikacje i formularze
✅ Komunikować się z zewnętrznymi API i obsługiwać dane
✅ Zarządzać routingiem i zabezpieczać strony
✅ Stylować aplikacje przy użyciu CSS, Tailwind, Styled Components
✅ Tworzyć i używać własne hooki
✅ Zarządzać stanem globalnym za pomocą Context API i Redux
✅ Testować aplikacje React (RTL, Jest, Cypress)
✅ Optymalizować aplikacje pod kątem wydajności i SEO
✅ Deployować gotowe aplikacje na serwer (Netlify, Vercel)

Zawartość kursu

Moduł 1: Wprowadzenie do React

Kto stworzył React, dlaczego powstał i gdzie jest używany?
Co to jest React i dlaczego warto się go uczyć?
Instalacja Node.js i przygotowanie środowiska
Tworzenie pierwszego projektu React (Vite / Create React App)
Struktura katalogów w aplikacji React
JSX — podstawy składni
Komponenty funkcjonalne — tworzenie i używanie
Props — przekazywanie danych do komponentów
State — zarządzanie lokalnym stanem komponentu
Cykl życia komponentu w skrócie
Podsumowanie modułu + mały projekt: “Hello World App”

Moduł 2: JSX, Props i State w praktyce

Zagnieżdżanie elementów JSX
Renderowanie warunkowe (if, ternary, &&)
Listy i pętle: .map() w JSX
Obsługa eventów (onClick, onChange, itd.)
Przekazywanie propsów w głąb komponentów
Typowanie propsów z PropTypes
Rozbudowana obsługa state (liczniki, formularze)
Aktualizacja stanu asynchroniczna — co trzeba wiedzieć
Unikanie błędów przy pracy ze stanem
Projekt modułowy: “Lista zadań (Todo App)”

Moduł 3: Stylowanie w React

Klasy CSS i JSX (className)
Inline styles vs pliki CSS
Styled Components — instalacja i podstawy
Tworzenie dynamicznych stylów z propsami
Tailwind CSS — instalacja i pierwsze kroki
Tailwind w praktyce: przyciski, nagłówki, karty
Animacje CSS + animacje Tailwind
Wzorce organizacji plików ze stylami
Tematyzacja aplikacji: dark mode
Mini projekt: “Responsywny landing page w React”

Moduł 4: Formularze i walidacja

Obsługa formularzy: onChange, onSubmit
Controlled Components i ich znaczenie
Formularze wielopolowe
Walidacja danych ręczna
Biblioteka React Hook Form — instalacja i podstawy
Integracja React Hook Form z Yup (walidacje)
Obsługa błędów formularza
Dynamiczne formularze (dodawanie/usuwanie pól)
Zapisywanie danych formularzy do stanu globalnego
Mini projekt: “Formularz rejestracji użytkownika”

Moduł 5: Zarządzanie stanem

Co to jest globalny stan aplikacji?
Context API — podstawy
Tworzenie własnego kontekstu (Provider i Consumer)
useReducer — zarządzanie skomplikowanym stanem
Połączenie Context API + useReducer
Wprowadzenie do Redux (architektura)
Instalacja i konfiguracja Redux Toolkit
Tworzenie slice’ów i dispatch akcji
Współpraca React z Redux DevTools
Mini projekt: “Koszyk zakupów (Cart App)”

Moduł 6: Routing i nawigacja

Co to jest routing w aplikacji SPA
Instalacja React Router DOM
Tworzenie prostych tras (Route, BrowserRouter)
Linki i nawigacja wewnętrzna (Link, NavLink)
Dynamiczne trasy (URL params)
Nested routes — trasy zagnieżdżone
Nawigacja programowa (useNavigate)
Ochrona tras (Protected Routes)
Lazy loading stron i kodu
Mini projekt: “Panel użytkownika z różnymi stronami”

Moduł 7: Fetchowanie danych i API

Wprowadzenie do pracy z API
Fetch API i podstawowe zapytania
Obsługa błędów i loading states
useEffect i fetchowanie danych na start
Axios — instalacja i podstawy użytkowania
Wysyłanie danych (POST)
Optymalizacja zapytań i anulowanie fetchowania
React Query — instalacja i podstawy
Caching danych i aktualizacje w React Query
Mini projekt: “Dashboard z danymi z API”

Moduł 8: Zaawansowane Hooki

Custom Hooki — tworzenie własnych hooków
Hooki warunkowe i kompozycja hooków
useMemo i optymalizacja wydajności
useCallback i memoizacja funkcji
useRef i dostęp do elementów DOM
useImperativeHandle i forwardRef
Wzorce zaawansowanego zarządzania stanem z hookami
Hooki i wzorce projektowe
Testowanie custom hooków
Mini projekt: “Zaawansowana obsługa formularzy z hookami”

Moduł 9: Testowanie aplikacji React

Dlaczego testujemy aplikacje?
Instalacja bibliotek testujących (Jest + React Testing Library)
Testy jednostkowe komponentów
Testowanie interakcji (klikanie, wpisywanie)
Mockowanie fetch i API w testach
Testowanie hooków customowych
Snapshot testing
E2E Testing — wprowadzenie (np. Cypress)
Testowanie formularzy i walidacji
Mini projekt: “Przetestowana aplikacja do notatek”

Moduł 10: Deploy i najlepsze praktyki

Przygotowanie aplikacji do produkcji (build)
Deploy na Vercel
Deploy na Netlify
SEO w aplikacjach React (meta tagi, react-helmet)
Wprowadzenie do SSR i Next.js (krótki overview)
Code splitting i lazy loading
Analiza bundle size i optymalizacje
Bezpieczeństwo aplikacji React
Podsumowanie: dobre praktyki w dużych projektach
Finalny projekt: “Mini blog z logowaniem i API”

Moduł 11: Finalny projekt – Mini Blog z logowaniem i API

Plan aplikacji i przygotowanie środowiska
Struktura katalogów projektu
Routing aplikacji
Stworzenie strony logowania
Stworzenie strony rejestracji
Mock API — json-server
Logowanie użytkownika do systemu
Rejestracja użytkownika w systemie
Kontekst użytkownika
Dodawanie nowego posta
Wyświetlanie listy postów
Wyświetlanie szczegółów posta
Edycja i usuwanie posta
Ochrona tras i przekierowania
Finalne szlify i publikacja
FINALNY KOD I EFEKT

Oceny i recenzje uczniów

Brak recenzji

O kursie

Czego się nauczysz?

Zawartość kursu

Moduł 1: Wprowadzenie do React

Kto stworzył React, dlaczego powstał i gdzie jest używany?

Co to jest React i dlaczego warto się go uczyć?

Instalacja Node.js i przygotowanie środowiska

Tworzenie pierwszego projektu React (Vite / Create React App)

Struktura katalogów w aplikacji React

JSX — podstawy składni

Komponenty funkcjonalne — tworzenie i używanie

Props — przekazywanie danych do komponentów

State — zarządzanie lokalnym stanem komponentu

Cykl życia komponentu w skrócie

Podsumowanie modułu + mały projekt: “Hello World App”

Moduł 2: JSX, Props i State w praktyce

Zagnieżdżanie elementów JSX

Renderowanie warunkowe (if, ternary, &&)

Listy i pętle: .map() w JSX

Obsługa eventów (onClick, onChange, itd.)

Przekazywanie propsów w głąb komponentów

Typowanie propsów z PropTypes

Rozbudowana obsługa state (liczniki, formularze)

Aktualizacja stanu asynchroniczna — co trzeba wiedzieć

Unikanie błędów przy pracy ze stanem

Projekt modułowy: “Lista zadań (Todo App)”

Moduł 3: Stylowanie w React

Klasy CSS i JSX (className)

Inline styles vs pliki CSS

Styled Components — instalacja i podstawy

Tworzenie dynamicznych stylów z propsami

Tailwind CSS — instalacja i pierwsze kroki

Tailwind w praktyce: przyciski, nagłówki, karty

Animacje CSS + animacje Tailwind

Wzorce organizacji plików ze stylami

Tematyzacja aplikacji: dark mode

Mini projekt: “Responsywny landing page w React”

Moduł 4: Formularze i walidacja

Obsługa formularzy: onChange, onSubmit

Controlled Components i ich znaczenie

Formularze wielopolowe

Walidacja danych ręczna

Biblioteka React Hook Form — instalacja i podstawy

Integracja React Hook Form z Yup (walidacje)

Obsługa błędów formularza

Dynamiczne formularze (dodawanie/usuwanie pól)

Zapisywanie danych formularzy do stanu globalnego

Mini projekt: “Formularz rejestracji użytkownika”

Moduł 5: Zarządzanie stanem

Co to jest globalny stan aplikacji?

Context API — podstawy

Tworzenie własnego kontekstu (Provider i Consumer)

useReducer — zarządzanie skomplikowanym stanem

Połączenie Context API + useReducer

Wprowadzenie do Redux (architektura)

Instalacja i konfiguracja Redux Toolkit

Tworzenie slice’ów i dispatch akcji

Współpraca React z Redux DevTools

Mini projekt: “Koszyk zakupów (Cart App)”

Moduł 6: Routing i nawigacja

Co to jest routing w aplikacji SPA

Instalacja React Router DOM

Tworzenie prostych tras (Route, BrowserRouter)

Linki i nawigacja wewnętrzna (Link, NavLink)

Dynamiczne trasy (URL params)

Nested routes — trasy zagnieżdżone

Nawigacja programowa (useNavigate)

Ochrona tras (Protected Routes)

Lazy loading stron i kodu

Mini projekt: “Panel użytkownika z różnymi stronami”

Moduł 7: Fetchowanie danych i API

Wprowadzenie do pracy z API

Fetch API i podstawowe zapytania

Obsługa błędów i loading states

useEffect i fetchowanie danych na start

Axios — instalacja i podstawy użytkowania

Wysyłanie danych (POST)

Optymalizacja zapytań i anulowanie fetchowania

React Query — instalacja i podstawy

Caching danych i aktualizacje w React Query