Wprowadzenie do React Native 2024

Co to jest React Native?

React Native to popularne narzędzie i framework stworzony przez Facebooka, który umożliwia budowanie mobilnych aplikacji na iOS, Android za pomocą języka programowania JavaScript (JS) oraz React. Poza tworzeniem natywnych aplikacji mobilnych, możesz tworzyć aplikacje na przeglądarkę (web), macOS, Windows, UWP (universal windows platform), Linux, Android TV, tvOS.

Aplikacje stworzone w React Native mogą być szybkie, płynne, a co najważniejsze, z jednej bazy kodu tworzymy aplikację na wiele platform, dzięki temu nie musimy pisać tej samej aplikacji dla wielu systemów operacyjnych.

Dlaczego warto się uczyć React Native?

Rynek aplikacji mobilnych jest bardzo dynamiczny w dzisiejszych czasach. Coraz więcej firm szuka narzędzi, które umożliwią tworzenie aplikacji na wiele platform w szybkim tempie, aktualnie nie można sobie pozwolić na nie wydanie aplikacji mobilnej na jeden z systemów (Android, iOS), ponieważ zaniedbujemy wtedy znaczącą część rynku.

React Native odpowiada na potrzebę “napisz aplikację raz i uruchom ją wszędzie”, rozwiazanie jest efektywne i łatwe w użyciu (zwłaszcza dla osób znających JS, React).
Dodatkową zaletą jest fakt, że społeczność developerów RN jest bardzo aktywna i rozwija się, dzięki temu powstaje wiele modułów, które ułatwiają pracę nad aplikacją i są wspierane (aktualizacje, poprawianie bieżących błędów).

Popularność narzędzia oraz mnogość bibliotek sprawia, że technologia React Native na przestrzeni ostatnich lat stała się znacząco prosta, integracja aplikacji z modułem aparatu, odtwarzanie filmów, to już drobnostki, a kilka lat temu było to wyzwanie.

Co to jest Expo?

Aby uczynić doświadczenia w React Native bardziej przyjemnymi i łatwiejszymi, stworzono Expo.
Narzędzie Expo ułatwia rozpoczęcie pracy w React Native, jest zestawem narzędzi oraz platformą do szybkieo tworzenia i uruchamiania aplikacji React Native. Dzięki Expo w kilka minut możesz uruchomić projekt, testować go na różnych urządzeniach i korzystać z gotowych komponentów i API.

W tym miejscu warto podać prawdziwy przykład, gdzie Expo jest bardziej dostępne i przyjemne w użyciu w stosunku do React Native.

Na potrzeby artykułu dodajmy funkcję obsługi (push notifications) powiadomień w aplikacji mobilnej.

Proces w Expo	Proces w React Native
Instalacja i konfiguracja Expo CLI: Instalacja Expo CLI, utworzenie projektu i jego uruchomienie zajmuje tylko kilka minut.	Instalacja i konfiguracja React Native CLI: Instalacja i konfiguracja środowiska, w tym Android Studio, Xcode, Node.js, itp.
Dodanie powiadomień: Korzystanie z wbudowanego API Notifications w Expo. Nie ma potrzeby instalacji dodatkowych bibliotek ani skomplikowanej konfiguracji.	Instalacja dodatkowych bibliotek: Konieczność instalacji i konfiguracji biblioteki react-native-push-notification.
—	Konfiguracja Androida: Ręczna edycja plików konfiguracyjnych (np. AndroidManifest.xml).
Szacowany czas trwania: 30 min	Szacowany czas trwania: 3 godziny

Kiedy nie warto używać Expo?

Jest kilka powodów:

• Mniejsza elastyczność: Nie wszystkie natywne moduły są dostępne.
• Większy rozmiar aplikacji: Aplikacje mogą być większe z powodu dodatkowych bibliotek Expo.
• Ograniczona kontrola nad buildem: Mniejsza kontrola nad procesem kompilacji.
• Zależność od platformy Expo: Uzależnienie od aktualizacji i rozwiązań zespołu Expo.
• Ograniczenia w skomplikowanych aplikacjach: Może nie wystarczyć dla bardzo złożonych projektów z wieloma natywnymi funkcjami.

Kiedy i czy warto się uczyć React Native?

Jest kilka przesłanej świadczących o tym, że warto uczyć się technologii React Native.
Przede wszystkim warto, gdy masz doświadczenie z JavaScript i React, znając te narzędzia zaczniesz z bardzo dobrej pozycji. Jeśli nie znasz wymienionych technologii, a masz potrzebę stworzenia aplikacji mobilnej to warto rozważyć React Native, choć na rynku dostępne są jeszcze inne opcje (poniżej przedstawię najpopularniejszą z nich). Jeśli w doborze narzędzia kierujesz się wsparciem społeczności, to React Native jest bardzo dobrym wyborem.

Kiedy warto się uczyć React Native?

Nie ma przesłanek mówiących o tym, że powinno się go uczyć po jakimś konkretnym czasie, ale warto być zaznajomionym z technologiami “składowymi”. Bardzo ciężkie będzie rozpoczęcie pracy z RN bez poświecenia czasu na JS i React. Jeśli startujesz od zera to rozważ technologię Flutter.

Jak działa React Native?

React Native jest bardzo zaawansowanym frameworkiem, aby wprowadzić Cię do tego jak działa, kluczowe jest wyjaśnienie kilku składowych elementów.

React Native operuje na trzech wątkach:

• JavaScript Thread – służy do uruchamiania kodu napisanego w JavaScript.
• UI Thread – służy do obsługi gestów, zdarzeń oraz do wyświetlania natywnych modułów, np. widoków użytkownika.
• Shadow Thread – moduł do kalkulacji widoków, zanim zostaną finalnie wyświetlone.

JavaScript Interface

Moduł, który pozwala na komunikację części aplikacji napisanej w JS/TS (JavaScript Thread) z częścią natywną (Native/UI Thread). JSI jest napisany w C++ co w przyszłości pozwoli na integrację dużej liczby systemów operacyjnych i obsługę urządzeń SmartTV, smartwatchy itp.

Fabric

Nowy system renderowania interfejsu użytkownika. Moduł ten może być w synchronizacji z JSI, co wprowadza wydajność w wyświetlaniu długich list danych oraz obsługi gestów. Dzięki synchronicznej komunikacji z JSI, Fabric w pierwszej kolejności obsłuży gesty, naciśnięcia ekranu, podczas gdy żądania do API będą wykonywane asynchronicznie. Dzięki Fabric, Shadow Tree jest niezmienne i udostępniane między wątkiem JavaScript i UI.

Turbo Modules

Warstwa umożliwiająca używanie natywnych modułów (np. Bluetooth, system plików) wtedy, gdy jest to potrzebne.

CodeGen

Aby komunikacja pomiędzy JSI i Fabric była dobra, należy mieć pewność, że interfejsy komunikacji będą ze sobą kompatybilne, do tego służy CodeGen.

Cały schemat działania React Native

1. React tworzy komponenty interfejsu użytkownika.
2. JS Bundle jest tworzony i uruchamiany w wątku JavaScript.
3. JSI umożliwia bezpośrednią komunikację z kodem natywnym.
4. Fabric renderuje komponenty, a Turbo Modules zarządzają natywnymi modułami.
5. Wątek cieni z silnikiem Yoga oblicza układ elementów.
6. Wątek natywny/UI renderuje interfejs użytkownika i zarządza natywnymi modułami.

React Native vs Flutter

Flutter to narzędzie, które zostało stworzone przez Google, służy do budowania aplikacji mobilnych, webowych i desktopowych, używając jednej bazy kodu. W uproszczeniu, jeden kod da aplikacje na wiele platform, dokładnie tak samo jak React Native.

Flutter używa języka Dart (w przeciwieństwie do RN, gdzie używany jest JavaScript), dodatkowo udostępniony jest zestaw komponentów do UI (widok użytkownika), co pozwala na tworzenie wydajnych i atrakcyjnych wizualnie aplikacji, w prosty sposób. Flutter jest wydajny, ekosystem jest rozwinięty, narzędzia developerskie są na wysokim poziome.

Poniżej znajduje się proste porównanie Flutter i React Native.

Flutter	React Native
Język programowania: Dart.	Język programowania: JavaScript.
Biblioteka UI: Własna (nie oparta na natywnych komponentach).	Biblioteka UI: React.
Ekosystem: Mniejsza, ale szybko rosnąca społeczność.	Ekosystem: Duża społeczność, mnóstwo gotowych komponentów i bibliotek.
Wydajność: Doskonała, często przewyższa React Native.	Wydajność: Bardzo dobra, zbliżona do natywnych aplikacji.

Aplikacje zrobione w React Native

Na stronie znajdziesz wszystkie aplikacje wykonane w React Native.

• Facebook
• Facebooks Ads Manager
• Messenger Desktop
• Microsoft Office
• Skype
• Xbox Game Pass
• Amazon
• Amazon Alexa
• Shopify
• Wix
• Discord
• Playstation
• Pinterest
• Tesla
• Bolt

Jak widzisz, wiele dużych firm tworzy rozwiązania oparte o React Native, a to tylko kilka przykładów.

Zarobki React Native Developera

Więcej o zarobkach React Native developera i innych specjalizacji znajdziesz w moim artykule “Ile zarabia programista w 2024 roku?”.

Praca jako RN developer jest opłacalna, jak zawsze, zarobki zależą od wielu czynników. Ważna jest lokalizacja, doświadczenie programisty, wielkość firmy oraz zakres obowiązków.

W USA programiści React Native mogą zarobić między 110000, a 140000 USD rocznie.
W Europie roczne wynagrodzenie plasuje się na poziomie 50000 – 80000 EUR.
W Polsce średnie roczne wynagrodzenie React Native developera wynosi między 120000, a 180000 PLN.

Czego się uczyć, aby być React Native developerem?

Praca React Native developera nie opiera się tylko o znajomość React i JavaScript. Aby tworzyć aplikację musisz ją również umieć uruchomić, to jest często skomplikowane i wymaga znajomości wielu narzędzi.

Zacznijmy od początku, musisz potrafić obsługiwać edytor kodu (IDE), na przykład Visual Studio Code.
Do tego powinieneś potrafić używać React Native Debugger – narzędzie do debugowania aplikacji RN.
Aby zbudować aplikację na iOS musisz znać środowisko XCode.
Analogicznie musisz poznać środowisko Android Studio, aby budować i dystrybuować aplikację na Android.
Poza tym dochodzi do tego znajomość narzędzi z ekosystemu JavaScript, lub Typescript:

• Node.js
• NPM/Yarn
• Git

W skrócie, jest tego mnóstwo!

Wejdź szybko i przyjemnie do branży IT

Bazując na moim wieloletnim doświadczeniu stworzyłem ebook “Od zera do bohatera w IT: Pierwsza praca w erze AI”.

Oto co znajdziesz w ebooku:

• Jak łatwo i przyjemnie nauczyć się programowania nie będąc geniuszem?
• Jak zostać programistą bez studiów i drogich kursów?
• Jak nie być odrzucanym w procesie rekrutacyjnym do IT?
• Jak nauczyć się programowania mając mało czasu?
• Jak szybko nauczyć się angielskiego do branży IT?
• Jak wyróżnić się na tle ludzi po studiach i kursach w procesie rekrutacyjnym?

Podsumowanie

React Native to świetne narzędzie do tworzenia aplikacji mobilnych, które dzięki swojej elastyczności i dużej społeczności deweloperów jest doskonałym wyborem dla programistów ze świata React i dobrym wyborem dla wprawionych programistów chcących zacząć tworzyć aplikacje mobilne. Dzięki Expo łatwo jest rozpocząć przygodę z React Native, a porównanie z Flutterem pokazuje, że każdy z tych frameworków ma swoje mocne strony.

Zapisz się do newslettera

FAQ