Co to jest React?

React to otwartoźródłowa biblioteka JavaScript służąca do budowania interfejsów użytkownika. Pozwala tworzyć strony i aplikacje z mniejszych, niezależnych elementów nazywanych komponentami.

React stworzyła firma Meta (Facebook) i został publicznie udostępniony w 2013 roku. Obecnie projekt jest rozwijany w ramach React Foundation. Biblioteka jest wykorzystywana zarówno przy pojedynczych interaktywnych elementach strony, jak i przy rozbudowanych aplikacjach internetowych.

Jak działa React?

Podstawą Reacta są komponenty. Mogą one reprezentować mały element, np. przycisk, pole wyszukiwania lub kartę produktu, ale również większy fragment interfejsu, taki jak formularz czy cała podstrona.

Komponent może otrzymywać dane przez props oraz przechowywać własny stan. Gdy dane istotne dla interfejsu się zmieniają, React ponownie oblicza, jak powinna wyglądać dana część interfejsu, a następnie wprowadza potrzebne zmiany w stronie.

Z tym procesem związane jest pojęcie Virtual DOM. React wykorzystuje wewnętrzną reprezentację interfejsu, aby określić, jakie zmiany należy zastosować w rzeczywistym DOM. Nie trzeba dzięki temu ręcznie aktualizować każdego elementu strony po zmianie danych.

Komponenty, JSX i Hooks

Współczesne komponenty React najczęściej tworzy się jako funkcje JavaScript. Mogą one zwracać kod zapisany w składni JSX, która przypomina HTML, ale pozwala jednocześnie korzystać z możliwości JavaScriptu.

function Powitanie({ imie }) {
    return <h1>Cześć, {imie}!</h1>;
}

JSX nie jest wymagany do korzystania z Reacta, ale jest powszechnie stosowany, ponieważ ułatwia opisywanie struktury interfejsu.

W komponentach funkcyjnych można korzystać również z Hooks. Są to funkcje Reacta pozwalające między innymi zarządzać stanem, korzystać z kontekstu czy reagować na określone etapy działania komponentu. Jednym z podstawowych Hooków jest useState.

Czy React jest frameworkiem?

React jest przede wszystkim biblioteką do tworzenia interfejsów użytkownika. Sam nie narzuca kompletnego sposobu budowania całej aplikacji. W większym projekcie potrzebne mogą być dodatkowe rozwiązania odpowiadające za routing, pobieranie danych, renderowanie po stronie serwera czy proces budowania aplikacji.

Dlatego React jest często wykorzystywany razem z frameworkiem. Przykładem jest Next.js, który rozwija możliwości Reacta m.in. o routing oraz różne sposoby renderowania stron.

Nowe aplikacje można również budować bez frameworka, jeżeli projekt tego wymaga. Do instalowania Reacta oraz innych zależności często wykorzystuje się menedżer pakietów npm.

Czy React można łączyć z TypeScript?

Tak. React jest bardzo często używany razem z TypeScript. Pozwala on określać typy danych, propsów czy wartości przechowywanych w stanie komponentu.

TypeScript nie jest wymagany do korzystania z Reacta. Może być jednak pomocny w większych projektach, ponieważ część błędów związanych z niewłaściwymi typami danych można wykryć jeszcze przed uruchomieniem aplikacji.

Gdzie wykorzystuje się React?

React sprawdza się przede wszystkim tam, gdzie interfejs często reaguje na działania użytkownika i zmienia dane bez konieczności ręcznego przeładowywania całej strony. Może być wykorzystywany między innymi w:

• panelach administracyjnych i dashboardach,
• aplikacjach SaaS,
• sklepach i interfejsach e-commerce,
• formularzach i konfiguratorach,
• serwisach społecznościowych,
• aplikacjach typu SPA,
• pojedynczych interaktywnych elementach istniejącej strony.

Nie każda witryna potrzebuje jednak Reacta. Przy prostej stronie informacyjnej wykorzystanie rozbudowanej biblioteki JavaScript może nie przynieść istotnych korzyści. Technologię warto dobierać do funkcji i skali projektu.

Jaki hosting jest potrzebny do aplikacji React?

Wymagania zależą od sposobu zbudowania aplikacji. Jeżeli projekt po kompilacji składa się wyłącznie ze statycznych plików HTML, CSS i JavaScript, może działać na standardowym hostingu.

Inaczej wygląda sytuacja, gdy aplikacja korzysta z Node.js, renderowania po stronie serwera lub innych funkcji wykonywanych na backendzie. W takim przypadku potrzebne jest środowisko obsługujące wymagane technologie. Przy bardziej rozbudowanych projektach można wykorzystać serwer VPS albo serwery dedykowane, jeśli aplikacja wymaga większej kontroli nad konfiguracją i zasobami.