Nauka i praktyka React
Nauka i praktyka React — Ucz się programowania w React, pisząc JSX i uruchamiając go na telefonie
Nauka i praktyka React to bezpłatna na start aplikacja na iOS i Android, która uczy programowania w React początkujących znających podstawy HTML, CSS lub JavaScript, a także deweloperów przechodzących z innego frameworka. Pisz JSX w edytorze kodu, stuknij Uruchom i obserwuj renderowanie komponentu w podglądzie na żywo w aplikacji. 88 kursów i 324 lekcje prowadzą od pierwszego komponentu przez hooks i zarządzanie stanem aż do Next.js, a po drodze czeka 20 projektów z instrukcjami.
- Cena
- Bezpłatna, uaktualnienie do Pro
- Platformy
- iOS i Android
- Języki
- 22
- Klasyfikacja wiekowa
- 4+
- Wersja
- 82.6.1
- Wymaga
- iOS 15.1 lub nowszy
- App Store
- 3.8 ★ (4)
Twój komponent renderuje się na telefonie, a nie na serwerze.
Środowisko uruchomieniowe, ReactDOM i Babel są dołączone do aplikacji, więc napisany przez Ciebie JSX jest kompilowany i wyświetlany na urządzeniu. Możesz stuknąć przycisk, który właśnie utworzyłeś, wpisać tekst do formularza i obserwować reakcję interfejsu — to właśnie ta pętla informacji zwrotnej sprawia, że hooks zaczynają być zrozumiałe.
Co to jest
Nauka i praktyka React to bezpłatny na start kurs React na iOS i Android, obejmujący 88 kursów i 324 interaktywne lekcje — od pierwszej linii JSX przez hooks, zarządzanie stanem, React 19 i Next.js App Router. Wbudowany edytor kompiluje kod na urządzeniu i renderuje komponent w podglądzie na żywo, a 20 projektów z instrukcjami sprawdza każdy krok przed przejściem dalej. To niezależna aplikacja do nauki, niezwiązana z Meta ani Vercel.
W aplikacji
Jak to wygląda
Kurs
Czego uczy kurs React
88 kursów wybranych z własnej listy aplikacji i ułożonych w kolejności, w jakiej zwykle poznaje się React po raz pierwszy.
React Kickoff, JSX oraz Props & Composition
Komponenty, deklaratywny interfejs użytkownika i sposób, w jaki React aktualizuje DOM, a następnie reguły JSX, renderowanie list i przekazywanie danych w dół za pomocą props.
State, Events, Forms i useRef
useState i obsługa zdarzeń, kontrolowane formularze z walidacją oraz useRef do wartości i dostępu do DOM, które nie wywołują renderowania.
useEffect, Data Fetching i Custom Hooks
Kiedy uruchamiają się efekty, tablice zależności, stany ładowania i błędów dla wywołań API oraz wydzielanie wielokrotnie używanej logiki do własnych hooków.
Context, Redux Toolkit i Zustand
Udostępnianie stanu bez przekazywania props przez Context i useReducer, a następnie Redux Toolkit z RTK Query, Zustand i Jotai dla większych aplikacji.
Routing, React Query i Forms at Scale
Routing po stronie klienta i wzorce React Router, stan serwera z TanStack Query i SWR, React Hook Form oraz optymistyczny interfejs użytkownika.
Wydajność, testowanie i TypeScript
Renderowanie i memoizacja, dzielenie kodu, wirtualizowane listy, testowanie za pomocą React Testing Library oraz typowanie komponentów i hooków.
React 19, Server Components i Next.js
Server Components i Actions, SSR i hydratacja, a następnie Next.js App Router z pobieraniem danych, buforowaniem i uwierzytelnianiem.
Jak to działa
Jak działa lekcja
Lekcja to krótkie omówienie pojęcia, po którym od razu piszesz i uruchamiasz kod, dzięki czemu idea i rezultat są widoczne na tym samym ekranie.
Przeczytaj jedno pojęcie
Otwórz kurs ze ścieżki nauki i przeczytaj krótką lekcję, na przykład o tym, jak aktualizuje się stan lub dlaczego lista potrzebuje keys. Przegląd kursu oznacza, które lekcje są bezpłatne, dzięki czemu możesz poznać format przed podjęciem decyzji.
Napisz JSX i stuknij Uruchom
Wpisz komponent w edytorze kodu i uruchom go. Podgląd na żywo renderuje komponent w aplikacji, więc możesz kliknąć przycisk, wpisać tekst w polu i zobaczyć, co robi kod.
Sprawdź go, a następnie rozwijaj dalej
Quizy, misje programistyczne i projekty z instrukcjami potwierdzają, że udało Ci się przyswoić dane zagadnienie, a mentor AI wyjaśnia hook lub błąd, którego nie potrafisz odczytać. Bug Hunt i UI Match pozwalają przećwiczyć pojęcie po raz drugi.
Co zawiera
Co zawiera aplikacja
88
Kursów, 324 lekcje
Od JSX, props i stanu przez własne hooks, formularze, Context i Redux Toolkit aż po Server Components, SSR i Next.js App Router, pogrupowane od A1 do C1.
Na żywo
Edytor z podglądem na żywo
Edytor kodu stworzony z myślą o JSX, w którym komponent jest renderowany w aplikacji. Projekty wieloplikowe pozwalają importować jeden komponent do drugiego — tak powstają prawdziwe aplikacje.
20
Projekty z instrukcjami
Twórz przycisk polubienia, karty profili, kalkulator napiwków, quiz, koszyk zakupowy i nie tylko — krok po kroku. Każdy krok sprawdza, czy komponent rzeczywiście działa.
Laboratorium
Hooks Lab i suwaki props
Obserwuj każdą zmianę stanu i ponowne renderowanie w chwili, gdy następują, a następnie zmień props za pomocą suwaka, aby zobaczyć aktualizację komponentu. Profiler renderowania i oś czasu stanu są częścią Pro.
30
Misje programistyczne
Misje na poziomie łatwym, średnim i trudnym dotyczące hooks, renderowania, formularzy, contextu i wydajności, a także UI Match, Bug Hunt i Component Recall z powtórkami rozłożonymi w czasie.
AI
Mentor AI
Poproś o wyjaśnienie, pozwól AI przejrzeć swój kod i zasugerować poprawkę albo wygeneruj niestandardową lekcję na dowolny temat. Mentor i egzamin certyfikacyjny są częścią Pro.
Wprowadzenie
Co właściwie trzeba zrozumieć, żeby pisać w React, i w jakiej kolejności?
React to biblioteka JavaScript służąca do budowania interfejsów użytkownika z małych, wielokrotnego użytku komponentów, które odświeżają się po zmianie danych. Większość początkujących zatrzymuje się nie na składni, lecz na stojącym za nią modelu: czym jest renderowanie, co uznaje się za stan i kiedy uruchamiają się efekty. Nauka tych zagadnień w odpowiedniej kolejności, z czymś wyświetlanym na ekranie do przetestowania każdego z nich, jest szybsza niż czytanie o wszystkim naraz.
Komponenty i propsjednostka wielokrotnego użytku
Komponent to funkcja, która zwraca fragment interfejsu, a props to dane wejściowe otrzymywane od komponentu nadrzędnego. Ponieważ dane przepływają w dół przez props, możesz przeczytać komponent i przewidzieć, co narysuje.
Stanco zmienia się w czasie
Stan to dane, które komponent zapamiętuje między renderami, takie jak tekst w polu lub informacja, czy menu jest otwarte. Aktualizacja stanu planuje nowe renderowanie — to jedyny mechanizm stojący za niemal każdym interaktywnym ekranem.
Hooks i efektymiejsce, w którym początkujący utkną
Hooks, takie jak useState, useRef i useReducer, pozwalają komponentowi przechowywać stan i uzyskiwać dostęp do DOM. useEffect uruchamia kod po renderowaniu, a nieprawidłowa tablica zależności jest najczęstszym źródłem pętli i nieaktualnych wartości.
Renderowanie i ponowne renderowaniedlaczego aplikacja działa wolno
Komponent renderuje się ponownie po zmianie jego stanu lub props, podobnie jak komponenty znajdujące się wewnątrz niego. Wiedza o tym, co wywołało renderowanie, jest punktem wyjścia do każdej poprawy wydajności — od memoisation po code splitting.
Dopasowanie
Dla kogo jest — i dla kogo nie jest
To dobry wybór, jeśli
- Znasz trochę HTML, CSS lub JavaScript i chcesz właściwie rozpocząć naukę React
- Jesteś deweloperem korzystającym z innego frameworka i musisz szybko przejść na React
- Najlepiej uczysz się, gdy efekt pojawia się na ekranie natychmiast po uruchomieniu kodu
- Tworzysz portfolio małych projektów i chcesz korzystać z instrukcji krok po kroku
- Przygotowujesz się do rozmowy na stanowisko frontendowe i chcesz przećwiczyć pytania
To nie jest odpowiednie narzędzie, jeśli
- Nigdy nie miałeś styczności z JavaScript, ponieważ kurs zakłada jego podstawową znajomość
- Chcesz zbudować i wdrożyć pełny projekt, co nadal wymaga laptopa
- Oczekujesz, że wszystko będzie bezpłatne, podczas gdy bezpłatny jest pierwszy kurs, a Pro odblokowuje resztę
- Chcesz skorzystać z oficjalnego kursu zespołu React, ponieważ jest to niezależna aplikacja
Pytania
Najczęściej zadawane pytania
Czy można nauczyć się programowania w React na telefonie?
Podstawowych idei, komponentów, props, stanu i hooków można nauczyć się na telefonie, jeśli możesz uruchamiać napisany przez siebie kod. Nauka i praktyka React zawiera ReactDOM i Babel, dzięki czemu JSX jest renderowany w podglądzie na żywo na urządzeniu. Laptop staje się przydatny, gdy tworzysz i wdrażasz większy projekt.
Czy przed rozpoczęciem nauki React muszę znać JavaScript?
Podstawowa znajomość pomaga. Nauka i praktyka React jest przeznaczona dla osób, które znają trochę HTML, CSS lub JavaScript, na przykład zmienne, funkcje i tablice. Jeśli nigdy nie pisałeś w JavaScript, najpierw naucz się tego języka, ponieważ lekcje React zakładają, że potrafisz go czytać.
Czym różnią się props od state?
Props to dane wejściowe otrzymywane przez komponent od jego rodzica, których nie należy zmieniać, natomiast state to dane należące do komponentu, aktualizowane z czasem. W Nauka i praktyka React możesz zobaczyć to w Hooks Lab, który pokazuje każdą zmianę stanu i ponowne renderowanie, oraz w pokrętłach props, które pozwalają zmieniać prop za pomocą suwaka.
Czy aplikacja uczy hooków takich jak useEffect?
Tak. Nauka i praktyka React obejmuje useState, useEffect, useRef, useReducer, custom hooks i useLayoutEffect. Osobne lekcje szczegółowo wyjaśniają, kiedy uruchamiają się efekty, jak działają tablice zależności i jakie są typowe błędy, a tryb Bug Hunt pozwala wyszukiwać błędy w uszkodzonych komponentach.
Czy React i React Native to to samo oraz czy aplikacja uczy obu technologii?
Nie. React to biblioteka do tworzenia interfejsów użytkownika, a React Native wykorzystuje te same idee do budowania aplikacji mobilnych. Nauka i praktyka React uczy najpierw React na potrzeby internetu, a kurs React Native fundamentals pomaga deweloperom webowym przenieść te umiejętności na urządzenia mobilne.
Czy Nauka i praktyka React obejmuje Next.js i React 19?
Tak. Kursy obejmują funkcje React 19 i Server Components, SSR i hydratację, streaming oraz Next.js App Router z pobieraniem danych, buforowaniem i uwierzytelnianiem. Dostępny jest także kurs React Native fundamentals dla deweloperów webowych.
Jakie projekty mogę tworzyć?
Dostępnych jest 20 projektów prowadzonych krok po kroku: przycisk „Lubię to”, karty profili, kalkulator napiwków, gra quizowa, stoper, formularz rejestracji, koszyk zakupowy, karuzela obrazów, lista z paginacją i aplikacja todo. Każdy krok sprawdza, czy komponent działa, zanim przejdziesz dalej.
Czy Nauka i praktyka React jest bezpłatna?
Aplikację można pobrać bezpłatnie. Wersja bezpłatna obejmuje pierwszy kurs, jeden projekt prowadzony krok po kroku, dwie misje programistyczne, edytor kodu z podglądem na żywo, Hooks Lab, pokrętła props, Bug Hunt i trzy kontrole UI Match dziennie, a także wyświetla reklamy. Pro odblokowuje wszystkie kursy, projekty i misje, mentora AI, profiler renderowania i egzamin certyfikacyjny oraz usuwa reklamy.
Czy dostępny jest certyfikat lub przygotowanie do rozmowy kwalifikacyjnej?
Zdanie egzaminu końcowego zapewnia certyfikat, którym można się dzielić, dostępny w ramach Pro. Na potrzeby rozmów kwalifikacyjnych przygotowano 50 pytań rekrutacyjnych, quiz z 50 pytaniami oraz ściągawkę do powtarzania najważniejszych pojęć.
Czy kod jest uruchamiany na serwerze?
Nie. Środowisko uruchomieniowe jest zawarte w aplikacji, więc kod jest kompilowany i renderowany na urządzeniu. Dzięki temu możesz dotknąć zbudowanego przez siebie przycisku i zobaczyć reakcję interfejsu w podglądzie.
Jakie języki i platformy są obsługiwane?
Nauka i praktyka React działa na iOS i Androidzie i jest dostępna w 22 językach. Ma oznaczenie 4+ i wymaga systemu iOS 15.1 lub nowszego na iPhone.
Zacznij
Wyrenderuj swój pierwszy komponent już dziś
Bezpłatny start na iOS i Androidzie, w 22 językach.
Więcej od CoddyKit
Dostępna na iOS i Android.