Kurs React z przykładami na żywo
Darmowy kurs React 19: komponenty, JSX, propsy, stan, hooki i wydajność. Każdy przykład działa na stronie, więc możesz zmienić kod i od razu zobaczyć, jak zmienia się komponent i jego konsola.
Zacznij ścieżkę React z przewodnikiemPierwsze kroki
- React co toReact to biblioteka JavaScript do budowania interfejsów użytkownika z komponentów. Opisujesz, co ekran ma pokazywać dla bieżących danych, a React utrzymuje stronę w zgodzie z nimi, gdy dane się zmieniają.
- Instalacja ReactZainstaluj React, tworząc projekt w Vite: sprawdź Node.js, uruchom jedno polecenie tworzące, zainstaluj zależności i włącz serwer deweloperski. Omawiamy też wygenerowane pliki, budowanie wersji produkcyjnej i to, dlaczego Create React App jest przestarzałe.
- JSXJSX to rozszerzenie składni JavaScriptu, które pozwala pisać znaczniki podobne do HTML wewnątrz komponentów Reacta. Poznaj jego zasady: jeden element główny, zamknięte tagi, className, atrybuty camelCase, nawiasy klamrowe, style inline, komentarze i to, do czego się kompiluje.
- Komponenty ReactKomponent Reacta to funkcja JavaScript, która zwraca JSX. Dowiedz się, jak pisać i nazywać komponenty funkcyjne, składać je w drzewo, dzielić na pliki, utrzymywać je czystymi i czym komponenty różnią się od elementów.
- Propsy ReactPropsy to dane wejściowe komponentu Reacta: wartości, które rodzic przekazuje dziecku jako atrybuty JSX. Dowiedz się, jak przekazywać i destrukturyzować propsy, ustawiać wartości domyślne, przekazywać funkcje, rozpakowywać propsy i dlaczego są tylko do odczytu.
- React childrenchildren to prop, który przechowuje wszystko, co umieścisz między tagiem otwierającym i zamykającym komponentu. Dowiedz się, jak budować z nim komponenty opakowujące i układy, przekazywać kilka slotów jako nazwane propsy, używać children jako funkcji i kiedy API Children to złe narzędzie.
- React FragmentReact Fragment grupuje kilka elementów w jedną zwracaną wartość bez dodawania węzła do strony. Poznaj krótką składnię <>...</>, dowiedz się, kiedy potrzebujesz <Fragment key> i dlaczego fragmenty mają znaczenie w tabelach i listach.
- Renderowanie warunkowe ReactRenderowanie warunkowe w React to zwykły JavaScript: instrukcja if, operator warunkowy albo && decyduje, jaki JSX zwraca komponent. Poznaj każdy wzorzec, zabłąkane 0, które może wypisać &&, zwracanie null i dlaczego ukrycie komponentu to nie to samo, co niewyrenderowanie go.
- Listy i klucze ReactŻeby wyrenderować listę w React, wywołujesz map() na tablicy i zwracasz JSX dla każdego elementu, nadając każdemu prop key. Poznaj wzorzec filter, potem map, dowiedz się, skąd brać klucze i dlaczego klucze z indeksu tablicy mieszają elementy, gdy lista się zmienia.
- Zdarzenia ReactZdarzenia w React to propsy takie jak onClick i onChange, które przyjmują funkcję, a React wywołuje ją z obiektem zdarzenia, gdy użytkownik coś zrobi. Dowiedz się, jak przekazać handler zamiast go wywołać, przekazywać argumenty, odczytywać e.target.value i e.key, blokować przeładowanie formularza i zatrzymywać propagację.
- React CSSKomponenty Reacta stylujesz przez className i zwykły CSS, przez prop style dla wartości wyliczanych w JavaScripcie, przez CSS Modules dla klas o ograniczonym zasięgu albo klasami narzędziowymi Tailwind. Poznaj każdy sposób, warunkowe klasy i to, kiedy czego używać.
Stan i formularze
- useStateuseState daje komponentowi wartość, która przetrwa ponowne renderowanie, i setter, który przerysowuje ekran, gdy wartość się zmienia. Poznaj składnię, funkcje aktualizujące, obiekty i tablice w stanie i dowiedz się, dlaczego wartość wygląda na nieaktualną zaraz po jej ustawieniu.
- Tablice i obiekty w stanie ReactŻeby zmienić tablicę albo obiekt w stanie Reacta, zbuduj nowe i przekaż je do settera. Dowiedz się, jak dodawać, usuwać, zastępować, wstawiać i sortować elementy, aktualizować zagnieżdżone obiekty i dlaczego mutowanie stanu zostawia ekran bez zmian.
- Formularze ReactBuduj formularze w React z kontrolowanymi polami: pola tekstowe, textarea, select, pola wyboru i przyciski radio, jeden obiekt stanu dla wielu pól, wysyłanie przez onSubmit, pokazywanie błędów walidacji i akcje formularzy z React 19.
- Komponenty kontrolowane ReactKontrolowane pole bierze wartość ze stanu Reacta i zmienia się tylko przez onChange. Niekontrolowane pole trzyma własną wartość w DOM, a odczytujesz ją przez ref albo FormData. Poznaj różnicę, częste ostrzeżenia i to, kiedy czego używać.
- Podnoszenie stanu ReactPodnoszenie stanu oznacza przeniesienie stanu z dwóch komponentów do ich najbliższego wspólnego rodzica, który przekazuje wartość i setter z powrotem w dół jako propsy. Dowiedz się, kiedy podnosić stan, jak zrobić to w trzech krokach i kiedy zostawić stan lokalnie.
- useReduceruseReducer przechowuje stan i przenosi każdą aktualizację do jednej funkcji reduktora: wysyłasz akcję, a reduktor zwraca następny stan. Poznaj składnię, pisanie czystego reduktora, przykład listy zadań, leniwą inicjalizację i to, kiedy wybrać go zamiast useState.
Efekty i refy
- useEffectuseEffect uruchamia kod po tym, jak React zaktualizował ekran, żeby komponent mógł synchronizować się z czymś spoza Reacta: timerem, subskrypcją, nasłuchiwaniem zdarzeń. Poznaj trzy kształty tablicy zależności, funkcję czyszczącą, nieskończone pętle i sytuacje, w których efekt w ogóle nie jest potrzebny.
- Pobieranie danych ReactPobieraj dane w React, uruchamiając żądanie w useEffect, trzymając ładowanie, błąd i dane w stanie i ignorując odpowiedzi, które przychodzą po zmianie danych wejściowych. Omawiamy async/await w efektach, AbortController, wyścigi (race conditions) i to, kiedy zamiast tego użyć biblioteki.
- useRefuseRef daje komponentowi pudełko, `{ current }`, które zachowuje zawartość między renderowaniami, a jego zmiana nie powoduje renderowania. Używaj go, żeby dostać się do węzła DOM (fokus, przewijanie, pomiar) albo przechować ID timera czy dowolną wartość, której nie pokazuje ekran.
- forwardRefforwardRef pozwala komponentowi przyjąć ref od rodzica i podłączyć go do węzła DOM w środku. W React 19 komponenty funkcyjne dostają `ref` jako zwykły prop, więc nowy kod nie potrzebuje już forwardRef. Zobacz obie wersje w działaniu, a do tego useImperativeHandle i typy TypeScript.
- useLayoutEffectuseLayoutEffect działa jak useEffect, ale uruchamia się zaraz po tym, jak React zaktualizuje DOM, a przed odmalowaniem ekranu przez przeglądarkę. Używaj go do zmierzenia elementu i poprawienia układu bez widocznego migotania, a do całej reszty zostaw useEffect.
Hooki i kontekst
- React hooksHook to funkcja, której nazwa zaczyna się od use i która pozwala komponentowi korzystać z funkcji Reacta, takich jak stan, kontekst, refy czy efekty. Zobacz wszystkie wbudowane hooki pogrupowane według przeznaczenia, dwie zasady, których przestrzega każdy hook, i to, jak napisać własny.
- useContextuseContext odczytuje wartość, którą dostarcza komponent rodzica, więc głęboko zagnieżdżony komponent dostaje ją bez tego, żeby każdy komponent po drodze przekazywał ją w dół jako prop. Poznaj createContext, providery, aktualizację kontekstu z dziecka i wpływ kontekstu na ponowne renderowanie.
- Prop drillingProp drilling to przekazywanie propsa przez komponenty, które go nie używają, tylko po to, żeby mógł go użyć komponent niżej. Zobacz to w działającym przykładzie, dowiedz się, dlaczego szkodzi, gdy aplikacja rośnie, i poznaj rozwiązania w kolejności, w jakiej warto je próbować: kompozycja, kontekst, a potem biblioteka stanu.
- Własne hooki ReactWłasny hook to funkcja, której nazwa zaczyna się od use i która wywołuje inne hooki, dzięki czemu kilka komponentów może używać tej samej logiki ze stanem. Zbuduj useToggle, useLocalStorage, useDebounce i useWindowWidth i dowiedz się, dlaczego każde wywołanie dostaje własny stan.
- Zasady hooków ReactHooki mają dwie zasady: wywołuj je na najwyższym poziomie komponentu, nigdy w warunkach, pętlach ani zagnieżdżonych funkcjach, i wywołuj je tylko z komponentów funkcyjnych albo własnych hooków. Dowiedz się, dlaczego React potrzebuje tej samej kolejności wywołań przy każdym renderowaniu i jak naprawić błędy, które pojawiają się, gdy ona się zmienia.
- useIduseId zwraca unikalne, stabilne id dla każdej instancji komponentu, więc etykieta, pole i podpowiedź z aria-describedby mogą na siebie wskazywać, nawet gdy komponent pojawia się wiele razy. Dowiedz się, dlaczego Math.random i liczniki psują się przy renderowaniu na serwerze i dlaczego useId nie służy do kluczy listy.
- useSyncExternalStoreuseSyncExternalStore subskrybuje komponent do danych, które żyją poza Reactem, takich jak mały moduł magazynu danych albo API przeglądarki jak navigator.onLine, i renderuje go ponownie, gdy te dane się zmienią. Poznaj subscribe i getSnapshot, dowiedz się, dlaczego migawka musi być zapamiętana, i poznaj getServerSnapshot.
Renderowanie i wydajność
- Renderowanie ReactKomponent Reacta renderuje się ponownie, gdy zmienia się jego stan, gdy renderuje się jego rodzic albo gdy zmienia się kontekst, który czyta. Poznaj różnicę między renderowaniem a zatwierdzeniem (commit), dowiedz się, co naprawdę oznacza wirtualny DOM i jak zatrzymać niepotrzebne renderowania.
- useMemouseMemo zapamiętuje wynik obliczenia między renderowaniami i liczy go ponownie tylko wtedy, gdy zmienią się jego zależności. Poznaj składnię, dowiedz się, jak utrzymać stabilny obiekt dla dziecka z memo i kiedy useMemo się nie opłaca.
- useCallbackuseCallback zwraca tę samą funkcję między renderowaniami, dopóki nie zmienią się jej zależności. Pomaga tylko wtedy, gdy ta funkcja trafia do dziecka z memo albo jest zależnością efektu. Poznaj składnię, różnicę względem useMemo i błędy, których warto unikać.
- React.memomemo owija komponent tak, że React pomija jego ponowne renderowanie, gdy propsy są płytko równe tym z ostatniego razu. Dowiedz się, kiedy pomaga, dlaczego nowe obiekty i funkcje w propsach go unieważniają i czego nie zatrzymuje.
- useTransitionuseTransition oznacza aktualizację stanu jako niepilną, żeby React mógł utrzymać responsywność strony, renderując wolną część w tle. Poznaj isPending, startTransition, asynchroniczne przejścia w React 19 i dowiedz się, dlaczego to nie jest debouncing.
- useDeferredValueuseDeferredValue daje ci kopię wartości, która może zostać w tyle przy ciężkich renderowaniach, więc pole tekstowe pozostaje responsywne, a wolna lista nadrabia zaległości. Dowiedz się, jak to działa, poznaj wartość początkową z React 19 i porównanie z useTransition i debouncingiem.
- React Suspense i lazySuspense pokazuje widok zastępczy, dopóki komponenty w jego środku nie są gotowe, a React.lazy ładuje kod komponentu dopiero przy jego pierwszym renderowaniu. Poznaj podział kodu, zagnieżdżone granice, Suspense z use() w React 19 i obsługę błędów.
React 19 i tematy zaawansowane
- React 19React 19 dodał akcje, useActionState, useOptimistic, use, ref jako prop i metadane dokumentu, a 19.2 dodał Activity i useEffectEvent. Zobacz każdą funkcję w działaniu, dowiedz się, co usunięto i jak przeprowadzić aktualizację.
- useActionStateuseActionState opakowuje asynchroniczną akcję, zachowuje wartość, którą zwróciła ostatnio, i mówi, czy nadal działa. Poznaj sygnaturę, akcje formularzy, zwracanie błędów walidacji i wywoływanie go poza formularzem.
- useOptimisticuseOptimistic pokazuje oczekiwany wynik, dopóki asynchroniczna akcja jeszcze trwa, a po jej zakończeniu wraca do prawdziwego stanu, więc nieudane żądanie samo się cofa. Poznaj składnię, formę z reduktorem i dowiedz się, dlaczego musi działać wewnątrz akcji.
- Hook use w Reactuse odczytuje wartość obietnicy albo kontekstu podczas renderowania. Z obietnicą zawiesza komponent, dopóki nie przyjdą dane, i pokazuje widok zastępczy najbliższego Suspense. W odróżnieniu od innych hooków może działać wewnątrz instrukcji if i pętli.
- React error boundaryGranica błędów (error boundary) to komponent, który łapie błędy rzucone podczas renderowania komponentów w jego środku i zamiast pustego ekranu pokazuje widok zastępczy. Dowiedz się, co łapie, jak napisać ją jako klasę, jak ją zresetować i poznaj bibliotekę react-error-boundary.
- React portalcreatePortal renderuje część komponentu do innego węzła DOM, na przykład document.body, a komponent pozostaje w tym samym miejscu drzewa Reacta. Używaj go do modali, tooltipów i menu, które muszą wydostać się spod overflow hidden i kontekstów stosu z-index.
- React Strict ModeStrictMode to opakowanie działające tylko w trybie deweloperskim, które renderuje komponenty dwa razy, przy montowaniu uruchamia efekty w kolejności setup, cleanup, setup i ostrzega przed przestarzałymi API, żeby nieczyste renderowania i brakujące funkcje czyszczące wyszły na jaw wcześnie. Na produkcji nic nie robi.
- Cykl życia komponentu ReactKażdy komponent Reacta się montuje (pojawia), aktualizuje (renderuje ponownie) i odmontowuje (zostaje usunięty). Dowiedz się, jak każda faza odpowiada useEffect, poznaj metody cyklu życia klas i ich odpowiedniki w hookach oraz fazy renderowania i zatwierdzania.
- Komponenty klasowe ReactKomponent klasowy to klasa JavaScript, która rozszerza React.Component i zwraca JSX z metody render. Poznaj this.props, this.state i setState, wiązanie handlerów zdarzeń, metody cyklu życia, PureComponent i to, jak przerobić klasę na komponent funkcyjny.
Porównania i rozmowy kwalifikacyjne
- Pytania rekrutacyjne ReactOkoło 30 pytań rekrutacyjnych z React, od poziomu początkującego do zaawansowanego, każde z krótką odpowiedzią, którą zaakceptuje rekruter, i z żywym kodem tam, gdzie łatwiej coś zobaczyć, niż o tym przeczytać.
- React vs AngularReact to biblioteka UI, którą łączysz z innymi narzędziami; Angular to pełny framework z wbudowanym routingiem, formularzami, HTTP i wstrzykiwaniem zależności. Porównaj te same komponenty napisane w obu, obok siebie.
- React vs VueReact i Vue to narzędzia JavaScript do budowania interfejsów użytkownika z komponentów. Różnią się znacznikami (JSX a szablony), sposobem reagowania na zmiany (niemutowalny stan i ponowne renderowanie a mutowalne reaktywne refy) i tym, jaka część ekosystemu jest oficjalna.
- React TypeScriptJak otypować aplikację React w TypeScripcie: propsy i children, useState z uniami i null, useRef dla elementów DOM, handlery zdarzeń, kontekst, komponenty generyczne i propsy natywnych elementów.
