Przejdź do treści
React Native: jak tworzyć aplikacje mobilne na iOS i Android w JavaScriptModuł 1 · lekcja 1 z 4
Za darmo4 min czytania

Moduł 1 · Środowisko i pierwsze kroki z Expo

Czym jest React Native i jak działa pod maską

Po tej lekcji wyjaśnisz, jak React Native zamienia kod JavaScript w prawdziwe ekrany na iOS i Androidzie, i ocenisz, czy pasuje do Twojego projektu.

Czym jest React Native

React Native to biblioteka open source rozwijana przez Meta i społeczność. Piszesz w niej komponenty w React, tak jak w aplikacji webowej, ale zamiast elementów HTML dostajesz natywne widoki systemu. Komponent <View> na iPhonie staje się widokiem UIKit, a na Androidzie zwykłym widokiem Androida. Przycisk, pole tekstowe czy przewijana lista zachowują się tak, jak użytkownik zna je ze swojego telefonu, bo to są te same elementy, których używają aplikacje pisane w Swift albo Kotlinie.

Przez cały kurs budujesz jedną aplikację: zamówienia z odbiorem osobistym dla fikcyjnej Piekarni Kłos z Poznania. Klient przegląda menu, dodaje chleb żytni za 9,50 zł do koszyka, wybiera punkt odbioru na Jeżycach albo Wildzie i dostaje powiadomienie, gdy zamówienie jest gotowe. Każdy moduł dokłada do niej jeden element.

TSX
import { Text, View } from 'react-native'; export default function Powitanie() { return ( <View style={{ padding: 24 }}> <Text>Dzień dobry w Piekarni Kłos</Text> </View> ); }

Ten sam plik działa na obu platformach. Różnice między systemami (np. wygląd przełącznika) zapewnia system, nie Ty.

Jak działa pod maską: Nowa Architektura

Aplikacja React Native ma dwa światy. W jednym działa Twój kod JavaScript (logika, stan, komponenty). W drugim działa kod natywny, który rysuje ekran i rozmawia z aparatem, GPS czy powiadomieniami. Kiedyś łączył je asynchroniczny „most”, który przesyłał wiadomości w formacie JSON. Przy dużym ruchu (szybkie przewijanie, animacje) most bywał wąskim gardłem.

Od wersji 0.82 (październik 2025) React Native działa wyłącznie na Nowej Architekturze. Składa się ona z trzech elementów:

  • JSI (JavaScript Interface): JavaScript trzyma bezpośrednie odwołania do obiektów C++ i może wywołać kod natywny bez serializacji do JSON, także synchronicznie.
  • Fabric: nowy renderer, który liczy układ ekranu w C++ i obsługuje funkcje współbieżnego Reacta.
  • Turbo Native Modules: moduły natywne ładowane dopiero wtedy, gdy są potrzebne, co skraca start aplikacji.
Droga od komponentu do piksela na ekranie

Nowa Architektura, jedyna od React Native 0.82. Stan na październik 2026.

JavaScript wykonuje silnik Hermes, zaprojektowany przez Meta dla urządzeń mobilnych. Od React Native 0.84 domyślny jest Hermes V1. Hermes kompiluje kod do bajtkodu już przy budowaniu aplikacji, więc telefon nie musi go parsować przy każdym starcie.

Expo: zestaw narzędzi, z którym pracujesz w kursie

Sam React Native to silnik. Do wygodnej pracy potrzebujesz jeszcze narzędzi do tworzenia projektu, uruchamiania na telefonie, budowania paczek i publikacji. Dokumentacja React Native zaleca do nowych aplikacji framework, a najpopularniejszym jest Expo. Daje on:

  • polecenie create-expo-app, które tworzy gotowy projekt z TypeScript i nawigacją (Expo Router),
  • aplikację Expo Go do szybkiego podglądu na telefonie,
  • biblioteki expo-* do aparatu, lokalizacji, powiadomień i plików,
  • usługi EAS do budowania i wysyłania aplikacji do sklepów (moduł 8).

Wersje Expo nazywają się „SDK”. Stan na październik 2026: SDK 58 wyszło 15 października 2026 i używa React Native 0.88, a SDK 57 używa React Native 0.86. Domyślne npx create-expo-app tworzy jeszcze projekt SDK 57, dopóki w sklepach nie pojawi się Expo Go dla SDK 58. W kursie pracujesz na SDK 57, a różnice w SDK 58 omawiamy tam, gdzie mają znaczenie.

Kiedy React Native, a kiedy coś innego

React Native dobrze sprawdza się, gdy zespół zna JavaScript lub React, aplikacja ma działać na iOS i Androidzie, a ekrany to głównie listy, formularze, mapy i dane z API. Tak wygląda większość aplikacji usługowych: sklep, rezerwacje, program lojalnościowy, aplikacja Piekarni Kłos.

Warto rozważyć czysto natywne podejście (Swift, Kotlin), gdy aplikacja intensywnie korzysta z grafiki 3D, przetwarza obraz z kamery w czasie rzeczywistym albo musi od pierwszego dnia używać najnowszych funkcji systemu. Nawet wtedy React Native pozwala dopisać własny moduł natywny, więc wybór nie jest zero-jedynkowy.

React Native z Expo a aplikacja natywna

Porównanie ogólne, na podstawie dokumentacji React Native i Expo.

Najważniejsze w 3 punktach

  1. React Native rysuje prawdziwe natywne widoki iOS i Androida z komponentów React napisanych w TypeScript lub JavaScript.
  2. Od wersji 0.82 działa tylko Nowa Architektura (JSI, Fabric, Turbo Native Modules), a kod wykonuje silnik Hermes.
  3. Expo dostarcza projekt startowy, Expo Go, biblioteki natywne i usługi EAS; w kursie pracujesz na SDK 57 (stan na październik 2026).

Źródła

Materiały do pobrania

Pliki do ćwiczeń są dostępne w abonamencie.

  • Lista kontrolna środowiska, ekran startowy i ćwiczenie z błędem cenyModuł 1: lista kontrolna Node.js i Expo Go, app.json Piekarni Kłos, src/app/index.tsx i kontakt.tsx, cena-z-bledem.tsx z rozwiązaniem (950 groszy = 9,50 zł)3 KBDostępne w abonamencie
  • 24 produkty, karta produktu, formularz i SectionListModuł 2: produkty.ts (8 chlebów, 9 bułek, 7 słodkich), karta-produktu.tsx, walidacja.ts, rozwiązania 2.1 do 2.4, kontrola.py10 KBDostępne w abonamencie
  • Struktura tras Expo Router i rozwiązania nawigacjiModuł 3: mapa plików src/app, stos Menu z [id], zakładki z ikonami i plakietką, okno modalne punktu odbioru, ekran zamówienia z numerem6 KBDostępne w abonamencie
  • Reducer koszyka z testami, Context, Redux Toolkit i ZustandModuł 4: koszyk-reducer.ts z testami node --test, rozwiązania 4.2 (Context), 4.3 (Redux Toolkit z rabatem KLOS10 i testem), 4.4 (Zustand z persist), kontrola.py10 KBDostępne w abonamencie
  • Atrapa API, fetch, TanStack Query i AsyncStorageModuł 5: mock-api.ts (600 ms, co piąte żądanie 503, licznik), menu.json (21 z 24 dostępnych), rozwiązania 5.1 do 5.4, kontrola.py14 KBDostępne w abonamencie
  • Aparat, mapa punktów odbioru, odległości i powiadomieniaModuł 6: zdjecie-wzoru.tsx, mapa-punktow.tsx, odleglosc.ts (haversine), punkt-odbioru.tsx, polskie opisy zgód w app.json, push i przypomnienie 6:30, kontrola.py9 KBDostępne w abonamencie
  • Lista bez przycięć, animacje Reanimated 4 i 9 testów JestModuł 7: menu-wolne.tsx z rozwiązaniem, przycisk z przejściem CSS i ikona z useReducedMotion, projekt testów (6 + 3 testy, kontrola.txt z wynikiem)8 KBDostępne w abonamencie
  • Projekt końcowy: start, rozwiązanie z 14 testami i arkusz ocenyModuł 8: start/ (etap 1, dane, atrapa API, 6 testów), rozwiazanie/ (pełna aplikacja, 14 testów, eas.json), README ze specyfikacją, ocena-projektu.md (100 pkt), kontrola.py49 KBDostępne w abonamencie

Następna: Instalacja i konfiguracja środowiska z Expo

28 lekcji, pliki i certyfikat w abonamencie.

Program kursu

Karta wymagana · anulujesz jednym kliknięciem · Mam już konto