Ten kurs prowadzi Cię przez React w praktyczny sposób: budując od zera działającą grę. Zaczynasz od podstaw narzędzi (nodejs, npm, Vite), a potem przechodzisz do komponentów, stanu, JSX i propsów. Nauczysz się stylować z CSS Modules, przełączać motyw dark/light, reagować na zdarzenia i dodać wygodny autozapis. Język jest prosty, a na pytania zawsze możesz liczyć. Dzięki darmowym lekcjom sprawdzisz styl nauki przed zakupem.

Projekt: gra w React krok po kroku

Na starcie tworzysz szkielety komponentów i krok po kroku składasz z nich działającą grę. Poznasz, jak dzielić interfejs na mniejsze części, przekazywać dane propsami i kontrolować stan. Dzięki JSX zobaczysz, jak deklaratywnie budować widoki i reagować na działania gracza. Nauczysz się przechwytywać eventy, wygodnie obsługiwać formularze i pola wejściowe z onChange. W praktycznych miejscach zastosujesz atrybut key, aby listy działały przewidywalnie, oraz useRef do odwołań do elementów. Wprowadzisz automatyczny zapis postępów, by wracać do gry bez utraty zmian.

Narzędzia: nodejs, npm i Vite

W module poświęconym narzędziom poznasz praktyczny przepływ pracy z nodejs, npm i Vite. Zainicjujesz projekt, uruchomisz szybkie środowisko developerskie i zrozumiesz, jak dodawać oraz aktualizować zależności. Zobaczysz, jak integrować zewnętrzne biblioteki na realnych przykładach, tak aby rozszerzać możliwości gry bez zbędnej komplikacji. Pokażemy, jak korzystać z gotowych skryptów npm oraz jak budować aplikację do publikacji. Całość ma jeden cel: przyspieszyć start i uprościć codzienny rozwój projektu.

Stan, kontekst i efekty w praktyce

Zarządzanie stanem to serce aplikacji w React. Na przykładach z gry nauczysz się, gdzie trzymać dane i jak bezpiecznie je aktualizować. Wprowadzisz ContextProvidera, aby wygodnie udostępniać wspólne informacje wielu komponentom, bez konieczności żmudnego przekazywania propsów niżej. Dzięki useEffect zareagujesz na zmiany stanu oraz zdarzenia, porządkując przy tym logikę poboczną. Połączysz to z obsługą Promise w PWA, aby asynchroniczne operacje były przewidywalne i czytelne. Takie podejście ułatwi utrzymanie i rozwój gry.

Styl i interakcje: CSS Modules, motywy, animacje

Wygląd i wrażenia z użytkowania dopracujesz krok po kroku. Zaczniesz od CSS Modules, które pozwolą stylować komponenty bez konfliktów nazw. Dodasz przełącznik motywu dark/light, aby łatwo zmieniać charakter interfejsu. Z pomocą Frame Motion nauczysz się animować elementy zgodnie ze stanem, co nada grze płynności i lekkości. Całość uzupełnisz ikonami z biblioteki Lucide, dzięki czemu nawigacja i komunikaty staną się czytelne. Zadbamy, by rozwiązania były proste do zastosowania i wygodne w dalszym rozwoju.

Od przeglądarki do aplikacji: Electron i PWA

Na koniec rozszerzysz zasięg projektu. Dowiesz się, jak zmienić aplikację napisaną w React w wersję desktopową z pomocą Electron, tak aby uruchamiała się na każdym systemie. Zrobisz także z Twojej strony w HTML/CSS/JS aplikację PWA, dzięki czemu będzie dostępna na Androidzie, PC i Mac jako aplikacja. To świetny sposób, by pokazać grę w kilku formach i dotrzeć do różnych użytkowników. Całość uzupełniają wskazówki, które ułatwiają prostą konfigurację i dalsze modyfikacje.