Zrozumienie React kontra React Native

Ludzka natura skłonna jest do pomyłek. Źródłem tych nieporozumień bywa wiele aspektów, lecz jednym z najczęstszych są zbieżności w nazewnictwie.

Zazwyczaj, gdy poznajemy coś nowego, czy to osobę, zwierzę, produkt, czy oprogramowanie, pierwsze co rejestrujemy, to jego nazwa. To ona staje się punktem odniesienia w wyszukiwaniach, a z czasem, krok po kroku, zgłębiamy jego funkcje, zastosowania, historię i inne szczegóły.

Do czego zmierzam?

Otóż ludzie, w szczególności, często mylą pojęcia React i React Native. Osoby niezwiązane z branżą IT, widząc te dwie nazwy, niejednokrotnie uznają React Native za swoistą rozszerzoną wersję Reacta. Co ciekawe, nawet niektórzy specjaliści, którzy nie posiadają wiedzy w tych konkretnych obszarach, mogą wpaść w podobną pułapkę.

Czym tak naprawdę są te technologie? Dlaczego tak często są ze sobą mylone, a nie na przykład z innymi?

React i React Native to dwie różne struktury programistyczne (frameworki). Ich nazwy są do siebie uderzająco podobne, różnią się jedynie dodatkowym słowem. To właśnie ta zbieżność nazw sprawia, że na pierwszy rzut oka łatwo o pomyłkę. Jeśli i Ty masz w tym zakresie wątpliwości, to trafiłeś we właściwe miejsce, aby rozwiać wszelkie niejasności.

Przejdźmy zatem do sedna sprawy.

React

React to biblioteka JavaScript, która służy do tworzenia jednostronicowych aplikacji internetowych. Jest to jedno z najpopularniejszych narzędzi do budowania interfejsów użytkownika (frontend) w sieci. Można nawet powiedzieć, że jest to obecnie najchętniej wybierana biblioteka w tej kategorii. Jej rozwój i utrzymanie leży w gestii firmy Facebook. Spotyka się ją również pod nazwą ReactJS.

Z własnego doświadczenia mogę stwierdzić, że praca z Reactem jest przyjemna i nie sprawia trudności. Jest to biblioteka, a to oznacza, że mamy swobodę w projektowaniu i tworzeniu, wykorzystując dostępne funkcje. Nie narzuca ona ścisłych reguł, które trzeba bezwzględnie przestrzegać podczas budowania aplikacji. To właśnie ta elastyczność jest jedną z jej zalet.

React oferuje szereg interesujących rozwiązań. Przyjrzyjmy się najważniejszym z nich.

#1. Komponenty

W React wszystko opiera się na komponentach. Można je porównać do klocków, z których budowana jest cała aplikacja internetowa. Duże komponenty powstają poprzez łączenie mniejszych. Każdy z nich posiada swój własny stan i sposób działania. Komponenty sterują wyglądem interfejsu użytkownika, decydując o tym, co zostanie wyświetlone użytkownikowi na podstawie jego aktualnego stanu.

Komponenty to fundament Reacta, a ich wielokrotne użycie to standard. Raz napisany kod można wykorzystać w wielu miejscach.

Projektowanie komponentów wymaga uwagi i staranności. Dbałość o ich jakość wpływa na łatwość utrzymania aplikacji, zwłaszcza gdy jej rozmiar rośnie. Zbyt duża ilość kodu w jednym komponencie może utrudnić jego późniejszą modyfikację. Komponenty w React powinny być proste i zwięzłe. Od tego, w jaki sposób je zaprojektujemy, zależy komfort naszej pracy jako deweloperów.

#2. Wirtualny DOM

Z pewnością spotkałeś się z sytuacją, gdzie w obrębie przycisku widoczny jest pasek postępu. Na platformach społecznościowych, po kliknięciu przycisku „Lubię to”, liczba polubień zwiększa się niemal natychmiast. Kiedyś, aby zobaczyć zmiany na stronie internetowej, konieczne było jej ponowne załadowanie. Obecnie aktualizuje się tylko ten fragment, który tego wymaga, bez konieczności odświeżania całości. Jak to działa?

Jak już wcześniej wspomniałem, wszystko w React jest komponentem. Przeglądarki tworzą strukturę DOM dla elementów aplikacji internetowej. Gdy w aplikacji zachodzi potrzeba aktualizacji, aktualizujemy ją, dokonując manipulacji na DOM. React robi to samo, lecz w sposób bardziej efektywny.

React tworzy wirtualny DOM (kopię DOM) dla wszystkich swoich komponentów. Aktualizacja w aplikacji polega na porównaniu rzeczywistego DOM z wirtualnym DOM. Jeśli zostaną wykryte zmiany, React przeprowadza aktualizację tylko tego konkretnego komponentu.

#3. Jednokierunkowy przepływ danych

Rozbudowana aplikacja składa się z wielu komponentów, pomiędzy którymi musi istnieć przepływ danych. Musi istnieć mechanizm, który umożliwia komunikację pomiędzy nimi.

React umożliwia przekazywanie danych pomiędzy komponentami w jednym kierunku. Dane płyną od komponentów nadrzędnych do podrzędnych. Komponenty podrzędne nie mogą modyfikować tych danych. Nie ma możliwości przesłania danych z powrotem do komponentu nadrzędnego, ponieważ przepływ danych jest jednokierunkowy.

Na pierwszy rzut oka może wydawać się to ograniczeniem, jednak jednokierunkowy przepływ danych pozwala na lepszą kontrolę nad tym, w jaki sposób dane są przesyłane w aplikacji.

Podsumowanie

Istnieje wiele innych funkcji Reacta, jak JSX, renderowanie warunkowe, jednak są one mniej istotne w naszym kontekście. Omówiliśmy podstawowe cechy biblioteki React. Za jej pomocą można zbudować niemal każdy rodzaj aplikacji internetowej. Społeczność React jest ogromna, a dostępność różnego rodzaju pakietów jest bardzo duża.

React Native

React Native to framework JavaScript, który służy do tworzenia wieloplatformowych aplikacji mobilnych. Tak jak React, jest on rozwijany i utrzymywany przez firmę Facebook.

Dla wielu osób powyższe stwierdzenie może być zaskakujące.

Czy to możliwe, aby za pomocą jednego frameworka tworzyć aplikacje na systemy Android i iOS jednocześnie?

Jeżeli nie śledzisz na bieżąco nowinek technologicznych, to mogło Ci to umknąć. Tak, za pomocą React Native możemy tworzyć aplikacje, które działają zarówno na Androidzie, jak i iOS. Na rynku dostępne są też inne frameworki do tworzenia aplikacji cross-platformowych.

React Native jest jednym z najpopularniejszych w swojej kategorii, choć nie cieszy się powszechnym uznaniem ze względu na ograniczenia JavaScript w aplikacjach natywnych. Niemniej jednak, w swoich obszarach zastosowań sprawdza się bardzo dobrze. Korzystają z niego nawet tak duże firmy jak Facebook, Instagram czy Flipkart. Nie oznacza to, że powinieneś od razu zacząć z niego korzystać, ale pokazuje, że za pomocą React Native można budować profesjonalne aplikacje na poziomie produkcyjnym.

W powyższym akapicie pojawiło się sformułowanie „aplikacje natywne”. Co to właściwie oznacza? Nie jest to żaden nowy rodzaj aplikacji. Aplikacje natywne są tworzone specjalnie pod konkretną platformę. Przykładowo, aplikacje na Androida są tworzone z myślą o urządzeniach z systemem Android, aplikacje na iOS na telefony iPhone, a aplikacje na Windows na system Windows, itd.

Skąd w takim razie „Native” w nazwie React Native? Otóż React Native tworzy aplikacje, które wyglądają i działają jak aplikacje natywne, zarówno na Androidzie, jak i iOS. Aplikacje tworzone za pomocą React Native są równie dobrze zoptymalizowane, jak te tworzone za pomocą Android Studio dla Androida i podobnych narzędzi dla iOS.

Prawdopodobnie stąd właśnie wzięła się nazwa React Native. Nie jest to jednak oficjalne wyjaśnienie.

Funkcji i możliwości React Native jest mnóstwo. Skupmy się jednak na najważniejszych.

#1. Wieloplatformowość

Za pomocą jednej bazy kodu możemy tworzyć aplikacje mobilne jednocześnie na Androida i iOS. To ogromna oszczędność czasu i pieniędzy dla firm.

#2. Hot Reloading / Live Reloading

Osoby, które mają doświadczenie w pracy z aplikacjami React lub React Native, zapewne wiedzą o co chodzi. Ta funkcja pozwala na automatyczne przeładowanie aplikacji nowymi zmianami w kodzie. Nie trzeba za każdym razem klikać przycisku „przeładuj”. Wystarczy wprowadzić zmiany i zobaczyć efekty. Nie ma potrzeby czekania, chyba że wystąpi błąd.

Może się wydawać, że to tylko drobna funkcja, ale każdy, kto kiedyś programował na Androida bez wykorzystania frameworków, doceni jej znaczenie w React Native.

#3. Biblioteki i społeczność interfejsu użytkownika

React Native oferuje wiele wbudowanych, natywnych komponentów, które można wykorzystać bez konieczności dodatkowej konfiguracji czy instalacji. Te komponenty wyglądają natywnie na odpowiednich platformach. Interfejs użytkownika w aplikacji React Native jest spójny z natywnymi interfejsami użytkownika systemów iOS i Android. Komponenty React Native są podobne do tych znanych z React.

Jeśli chodzi o społeczność, to jest ona duża i ciągle się rozwija. Bez problemu można liczyć na pomoc w przypadku napotkania problemów.

Podsumowanie

W internecie można znaleźć wiele innych funkcji React Native. Warto się z nimi zapoznać, jeśli planujesz rozpocząć tworzenie aplikacji mobilnych. Programista frontendowy może z powodzeniem tworzyć aplikacje natywne, używając React Native. To narzędzie ułatwia tworzenie wieloplatformowych aplikacji mobilnych.

React vs. React Native

Pomiędzy React i React Native istnieją zarówno podobieństwa, jak i różnice. Przyjrzyjmy się im bliżej.

Pod względem zastosowań React i React Native są od siebie diametralnie różne. Jednak w zakresie zasad i sposobu działania wykazują pewne podobieństwa. Zarówno React, jak i React Native korzystają z komponentów i kierują się tymi samymi zasadami podczas procesu tworzenia.

Oba frameworki wykorzystują język JavaScript do programowania. Spójrzmy na przykładową aplikację „Hello, World” w obu z nich.

React

import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="container">
        <h1>Hello, Wolrd!</h1>
      </div>
    );
  }
}
 
export default App;

React Native

import React from 'react';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default App;

Jak widać, oba przykłady korzystają z pakietu React. Składnia w obu przypadkach jest podobna, ponieważ oba wykorzystują specjalny znacznik o nazwie JSX. Różnica pojawia się w części odpowiedzialnej za renderowanie. React korzysta z Virtual DOM, natomiast React Native używa Native API do renderowania interfejsu użytkownika.

Do zarządzania stanem aplikacji React używa się często zewnętrznych pakietów, takich jak Redux czy MobX. Te same pakiety mogą być wykorzystywane również w aplikacjach React Native.

Zarówno React, jak i React Native używają JavaScript. Oznacza to, że w obu przypadkach możemy korzystać z niemal wszystkich pakietów JavaScript. To znacznie zwiększa ilość dostępnych opcji w obu bibliotekach.

React i React Native są ze sobą powiązane, jednak służą do różnych celów.

Podsumowanie

React i React Native różnią się pod względem końcowego produktu oraz platform, na których są uruchamiane aplikacje. Jednak zasady, którymi się kierują podczas tworzenia aplikacji, są bardzo podobne. Jeśli opanujesz jeden z tych frameworków, naukę drugiego przyspieszysz. Tworzenie aplikacji w React Native wymaga znajomości React, ale to nie wszystko. Musisz wiedzieć więcej o tworzeniu aplikacji natywnych, ponieważ wsparcie w React Native jest ograniczone.

Miejmy nadzieję, że w przyszłości to wsparcie zostanie rozszerzone.

Jeżeli planujesz zacząć tworzyć aplikacje internetowe lub mobilne, to wybór React lub React Native z pewnością przyniesie Ci korzyści. Nie jest to jednak obligatoryjne.

Aby łatwiej przyswoić sobie koncepcję Reacta, warto posiadać znajomość JavaScript. Oficjalna dokumentacja to świetne źródło wiedzy na temat Reacta i React Native.

Życzę Ci udanej nauki! 🙂