Moduł 1 · Pierwsze kroki z React
Czym jest React: komponenty i deklaratywny interfejs
Po tej lekcji wyjaśnisz, czym jest React, czym różni się deklaratywny opis interfejsu od ręcznej zmiany strony i dlaczego aplikację w React dzielimy na komponenty. Poznasz też przykład, na którym pracujesz przez cały kurs: sklep internetowy fikcyjnej Herbaciarni Liść z Krakowa.
React w jednym zdaniu
React to biblioteka JavaScript do budowania interfejsów użytkownika. Opisujesz w niej, jak ma wyglądać ekran dla danych, które masz w danej chwili, a React sam dba o to, żeby strona w przeglądarce odpowiadała temu opisowi. Bibliotekę stworzyli inżynierowie Facebooka (dziś Meta) i udostępnili ją publicznie w 2013 roku. W październiku 2026 aktualna wersja to React 19.3, wydana 9 września 2026 roku (stan na październik 2026).
Słowo „biblioteka” jest ważne. React zajmuje się widokiem: komponentami, stanem i odświeżaniem ekranu. Nie ma w sobie routingu (wielu podstron), pobierania danych z serwera ani narzędzia do budowania projektu. Te elementy dokładasz osobno albo dostajesz razem w gotowym frameworku. Dokumentacja React zaleca do produkcyjnych aplikacji framework, na przykład React Router w trybie frameworka albo Next.js. Do nauki podstaw dokumentacja wskazuje drogę „od zera”: narzędzie Vite i sam React. Tak pracujemy w tym kursie, bo wtedy widzisz, co robi każdy element, a nie tylko gotowy efekt.
Jeśli trafisz w starszych poradnikach na polecenie create-react-app, pomiń je. Zespół React wycofał Create React App dla nowych projektów w lutym 2025 roku i wskazał Vite jako jedną z alternatyw.
Deklaratywnie, a nie krok po kroku
Weź licznik w menu sklepu: „Koszyk (2)”. Po kliknięciu „Dodaj do koszyka” ma się zmienić na „Koszyk (3)”. W czystym JavaScripcie piszesz instrukcje krok po kroku, czyli imperatywnie:
const licznik = document.querySelector("#koszyk-licznik");
let sztuki = Number(licznik.textContent);
sztuki = sztuki + 1;
licznik.textContent = sztuki;To działa, dopóki licznik jest w jednym miejscu. Gdy ta sama liczba pojawi się w menu, na stronie koszyka i w podsumowaniu zamówienia, musisz pamiętać o każdym miejscu. Wystarczy zapomnieć o jednym i klient widzi dwie różne liczby.
W React opisujesz wynik, czyli piszesz deklaratywnie:
function MenuKoszyka({ sztuki }) {
return <a href="/koszyk">Koszyk ({sztuki})</a>;
}Komponent mówi: „dla takiej liczby sztuk menu wygląda tak”. Gdy liczba się zmieni, React wywoła funkcję jeszcze raz, porówna nowy wynik z poprzednim i zmieni w przeglądarce tylko ten fragment, który faktycznie jest inny. Nie piszesz już kodu, który szuka elementów na stronie i je poprawia. Piszesz funkcje, które z danych robią widok.
Na podstawie dokumentacji react.dev, rozdział Render and Commit, stan na październik 2026.
Komponenty: interfejs z klocków
Komponent to funkcja JavaScript, która zwraca opis fragmentu interfejsu. Nazwa komponentu zaczyna się wielką literą (KartaProduktu, nie kartaProduktu), bo po tym React odróżnia Twoje komponenty od zwykłych znaczników HTML, takich jak div czy button.
Strona katalogu Herbaciarni Liść składa się z kilku komponentów: nagłówka z menu, filtra kategorii, listy produktów i kart pojedynczych herbat. Karta produktu to jeden komponent użyty dwanaście razy, za każdym razem z innymi danymi: inną nazwą, ceną i gramaturą. Gdy zmienisz wygląd karty w jednym pliku, zmieni się na całej stronie.
Komponenty zagnieżdżasz jak znaczniki HTML, więc cała aplikacja tworzy drzewo. Na górze jest App, pod nim nagłówek i strona katalogu, niżej lista i karty. Dane płyną w tym drzewie z góry na dół, od rodzica do dziecka. Tę zasadę rozwiniesz w module 2 przy propsach i w module 3 przy stanie.
Pojęcia z rozdziału Describing the UI w dokumentacji react.dev.
Co zbudujesz w tym kursie
Pracujesz na jednym przykładzie od pierwszej do ostatniej lekcji. Herbaciarnia Liść to fikcyjny sklep z Krakowa, który sprzedaje 12 herbat w czterech kategoriach: zielone, czarne, ziołowe i owocowe. Ceny podajemy w złotych, na przykład Sencha Fukuyu kosztuje 34,90 zł za 100 g. W kolejnych modułach zbudujesz katalog z filtrem, koszyk liczący sumę w groszach, formularz zamówienia z walidacją polskiego kodu pocztowego, pobieranie produktów z pliku JSON, podstrony z React Router i testy automatyczne. W projekcie końcowym dodasz wyszukiwarkę, sortowanie i kod rabatowy.
Do każdego modułu dostajesz paczkę z plikami ćwiczeniowymi: gotowy projekt Vite, który uruchomisz u siebie, i rozwiązania ćwiczeń. Potrzebujesz komputera z Node.js, edytora kodu (na przykład Visual Studio Code) i przeglądarki. Instalację przejdziesz krok po kroku w następnej lekcji.
Najważniejsze w 3 punktach
- React to biblioteka do widoku: opisujesz, jak ekran wygląda dla danych, a React sam aktualizuje stronę po ich zmianie.
- Interfejs składasz z komponentów, czyli funkcji o nazwach z wielkiej litery, które tworzą drzewo, a dane płyną w nim z góry na dół.
- Nowy projekt do nauki zaczynasz od Vite (stan na październik 2026); Create React App jest wycofane dla nowych aplikacji.
Źródła
- React, Versions (React 19.3, 9 września 2026), stan na październik 2026: https://react.dev/versions
- React, Render and Commit: https://react.dev/learn/render-and-commit
- React, Describing the UI i Your First Component: https://react.dev/learn/your-first-component
- React Blog, Sunsetting Create React App, 14 lutego 2025: https://react.dev/blog/2025/02/14/sunsetting-create-react-app
- React (dawny blog), Why did we build React?, czerwiec 2013: https://legacy.reactjs.org/blog/2013/06/05/why-react.html