Nauka i praktyka React

Ucz się React, pisząc kod. Ten samouczek React JS prowadzi od pierwszej linii JSX przez hooki i zarządzanie stanem aż po kompletne aplikacje, a każdy napisany komponent renderuje się bezpośrednio na telefonie w podglądzie na żywo.

88 kursów i 324 interaktywne lekcje, poziomy A1–C1. Przeczytaj krótkie wyjaśnienie, wpisz prawdziwy kod, dotknij Uruchom i zobacz wynik. Nie potrzebujesz laptopa ani konfiguracji.

PISZ KOD NA TELEFONIE

• Edytor kodu stworzony dla JSX, z podglądem na żywo renderującym komponent w aplikacji

• Środowisko uruchomieniowe (ReactDOM i Babel) jest wbudowane w aplikację, więc kod działa na urządzeniu, nie na serwerze

• Projekty wieloplikowe: importuj jeden komponent do drugiego, tak jak buduje się prawdziwe aplikacje

• Dotknij wyrenderowanego przycisku, wpisz coś do formularza i obserwuj reakcję interfejsu

LABORATORIUM

• Hooks Lab: obserwuj każdą zmianę stanu i każde ponowne renderowanie w chwili, gdy zachodzą

• Pokrętła propsów: zmień prop suwakiem i obserwuj aktualizację komponentu

• Profiler renderowania i oś czasu stanu (Pro): sprawdź, który komponent renderował się ponownie i dlaczego, a następnie przewijaj historię stanu

KROK PO KROKU, OD PODSTAW DO POZIOMU ZAAWANSOWANEGO

• Podstawy: JSX, komponenty, propsy, stan, zdarzenia, listy i klucze, renderowanie warunkowe

• Hooki: useState, useEffect, useRef, useReducer, własne hooki, useLayoutEffect i inne

• Formularze i walidacja, React Hook Form, kontrolowane i niekontrolowane pola

• Zarządzanie stanem: Context, Redux Toolkit i RTK Query, Zustand i Jotai

• React Router, pobieranie danych, TanStack Query, SWR i optymistyczny interfejs

• TypeScript, testowanie, Storybook, dostępność i bezpieczeństwo

• Wydajność: memoizacja, dzielenie kodu, Suspense, przejścia, wirtualizowane listy

• React 19 i Server Components, SSR i hydratacja, strumieniowanie

• Next.js App Router, pobieranie danych i uwierzytelnianie

• Podstawy React Native dla twórców aplikacji webowych

• Wdrażanie, mikrofrontendy i federacja modułów

BUDUJ PRAWDZIWE PROJEKTY

20 prowadzonych projektów, małymi krokami: przycisk polubienia, karty profilu, kalkulator napiwków, gra quizowa, stoper, formularz rejestracji, koszyk zakupowy, karuzela obrazów, lista ze stronicowaniem, aplikacja z listą zadań i inne. Każdy krok sprawdza, czy komponent naprawdę działa, zanim przejdziesz dalej.

ĆWICZ, AŻ ZAPAMIĘTASZ

• 30 misji programistycznych (łatwych, średnich i trudnych) dotyczących hooków, renderowania, formularzy, Context i wydajności

• UI Match: odtwórz docelowy komponent i otrzymaj wynik za strukturę, styl i tekst

• Bug Hunt: znajdź i napraw błąd w uszkodzonym komponencie

• Component Recall: wpisz brakujący fragment do działającego już kodu, korzystając z powtórek rozłożonych w czasie

• Quizy z 50 pytaniami, 50 pytaniami rekrutacyjnymi i ściągą

• Codzienne wyzwanie, serie, XP i ranking

MENTOR AI (PRO)

Utknąłeś na hooku lub błędzie? Zapytaj mentora AI o jasne wyjaśnienie, pozwól AI sprawdzić kod i zasugerować poprawkę albo wygeneruj własną lekcję na dowolny temat.

CERTYFIKAT (PRO)

Zdaj egzamin końcowy i zdobądź certyfikat, którym możesz się podzielić.

WERSJA BEZPŁATNA I PRO

Bezpłatna: pierwszy kurs, jeden prowadzony projekt, 2 misje programistyczne, edytor kodu z podglądem na żywo, Hooks Lab, pokrętła propsów, Bug Hunt i 3 sprawdzenia UI Match dziennie. Wersja bezpłatna wyświetla reklamy.

Pro: wszystkie 88 kursów, wszystkie projekty i misje, mentor AI, profiler renderowania i oś czasu stanu, egzamin certyfikacyjny oraz brak reklam.

Aplikacja jest dostępna w 22 językach.

React jest znakiem towarowym Meta Platforms, Inc. Next.js jest znakiem towarowym Vercel, Inc. To niezależna aplikacja edukacyjna, niezwiązana z Meta ani Vercel i niezatwierdzona przez te firmy.

Polityka prywatności: https://www.coddykit.com/terms/privacy-policy