React JS – czym jest i dlaczego warto go użyć w projekcie?

React JS to biblioteka języka JavaScript, stworzona z myślą o pracy nad interfejsami użytkownika (UI) w aplikacjach webowych i mobilnych. Opiera się ona na komponentach, czyli samodzielnych fragmentach interfejsu „wielokrotnego użytku”, każdy z własną logiką. Komponentem może być pojedynczy przycisk, pole formularza, ale nawet i cały widok strony – wszystko zależy od tego, co zbudują developerzy. Z takich „klocków” składa się potem gotowy interfejs.

Od strony technicznej React wyróżnia się m.in. obsługą JSX oraz wykorzystaniem mechanizmu wirtualnej reprezentacji interfejsu (Virtual DOM) do renderowania zmian w dynamicznych UI. O tym, jak działają, powiemy za chwilę.

Choć React JS miał swoje początki w 2011 roku, to pierwsza wersja stabilna ujrzała światło dzienne dopiero dwa lata później. Pracę nad biblioteką zainicjował Jordan Walke – wówczas pracownik Facebooka. Do dziś zresztą Meta intensywnie wspiera Reacta, chociaż cały projekt ma charakter open source’owy. Wszystkie zasoby biblioteki, włącznie z dokumentacją, znajdziesz oczywiście na GitHubie (od 2017 roku dostępne na licencji MIT).

Przez jednych nazywany frameworkiem, przez innych biblioteką. Więc czym tak naprawdę jest React JS?

Z tej perspektywy React jest biblioteką… ale taką, która niemal zawsze wymaga integracji z frameworkami. To dlatego, że sam w sobie daje narzędzia wyłącznie do budowy UI, ale nie pozwala np. zarządzać routingiem albo renderowaniem interfejsu.

Aby zrozumieć, jak działa React, warto przejść przez drogę od tego, co tworzy programista, do tego, co użytkownik widzi na ekranie

Punktem wyjścia są wspomniane komponenty, czyli funkcje JavaScript z opisami poszczególnych elementów interfejsu. Do tego opisu React używa JSX – składni przypominającej HTML, ale osadzonej bezpośrednio w kodzie JavaScript. Dzięki temu strukturę widoku i logikę, która nią steruje, można zdefiniować w jednym miejscu, zamiast rozdzielać je między osobne pliki szablonów i skryptów.

Główna idea Reacta polega na tym, że zmiana stanu automatycznie wywołuje ponowne renderowanie interfejsu… ale nie całego, a wyłącznie tych elementów (komponentów), w których faktycznie coś się zmieniło. Do porównywania interfejsu „przed” i „po” zmianie stanu React wykorzystuje abstrakcyjną kopię widoku przechowywaną w pamięci aplikacji – tzw. Virtual DOM – i na jej bazie synchronizuje z rzeczywistym widokiem tylko różnice między nimi, a nie cały interfejs.

W „czystym” React’cie renderowanie zmian w interfejsie ma miejsce po stronie klienta, bezpośrednio w przeglądarce, co idealnie sprawdza się w projektach aplikacji single-page. Natomiast jeśli połączymy Reacta z – na przykład – Next.js, wtedy bez problemu da się skonfigurować stronę tak, aby była:

• albo renderowana po stronie serwera dla krótszego czasu pierwszego ładowania;
• albo generowana statycznie, jeżeli jej treść się nie zmienia, tak jak np. na blogach lub w artykułach newsowych.

Zresztą sam React również zaczął się rozwijać w stronę server-side, bo od pewnego czasu biblioteka ma już narzędzia do budowania pojedynczych komponentów renderowanych na serwerze (Server Components) – można je łączyć w jednej strukturze z komponentami wykonywanymi w przeglądarce.

Do budowy aplikacji typu SPA wykorzystuje się różne rozwiązania – np. Vue czy Angular, a więc najpopularniejsze frameworki języka JavaScript. W wielu przypadkach React JS działa po prostu szybciej niż jakakolwiek inna implementacja tego rodzaju.

Zarówno plusem, jak i minusem może być wysokie tempo rozwoju biblioteki React JS. Szybki rozwój sprawia, że programiści muszą być na bieżąco z nowinkami, bo środowisko i sposób pracy wciąż ewoluują. To może nie być wygodne dla wszystkich. Ciągłe wydania nowych narzędzi powodują kolejny problem – niekompletną dokumentację zewnętrznych bibliotek w ekosystemie. Developerzy tworzą ją więc sami na potrzeby konkretnych projektów.

Według niektórych słabą stroną React JS jest też to, że używa JSX – programiści i projektanci narzekają na jego złożoność. Specjaliści radzą, aby dokładnie testować stronę pod kątem SEO, bo Google miewa problemy z tak dużą dynamiką, jaką umożliwia React, chociaż sama w sobie jest zgodna z jego zasadami. Niestety zdarza się, że algorytmy nie radzą sobie z poprawnym odczytem.

Wady React JS są raczej drobiazgami w porównaniu z tym, co biblioteka oferuje. Warto zastanowić się, czy te minusy mają znaczenie dla danego programisty – wszystko zależy od specyfiki pracy konkretnej osoby i racjonalnej oceny wpływu wad systemu na projekt.

Powiedzieć, że z Reacta korzystają niemal wszyscy, byłoby przesadą. Nie ulega jednak wątpliwości, że to jedna z najpopularniejszych technologii webowych. Według Statista prawie 45% respondentów zadeklarowało, że na co dzień korzysta z tej biblioteki. Wyższy wynik – 48,7% – osiągnęło jedynie Node.js, czyli standardowe środowisko uruchomieniowe dla JavaScript.

Oto fragment statystyk ze wspomnianego badania:

Nic więc dziwnego, że komponenty Reacta znajdziesz we frontendzie największych witryn, platform webowych i aplikacji mobilnych. A oto kilka przykładów:

• Facebook – przypomnijmy, że to właśnie członek zespołu dev Facebooka stworzył Reacta. Frontend webowej aplikacji platformy Marka Zuckerberga oparty jest na React JS, a interfejs aplikacji mobilnej – na korzystającym z niego pakiecie narzędzi React Native. To właśnie tej bibliotece zawdzięczamy aktualizowany na żywo feed z treściami oraz dynamiczny, pozbawiony jakichkolwiek ekranów ładowania interfejs;
• Instagram – React JS jest również fundamentem drugiej platformy należącej do Meta. Komponenty biblioteki tworzą szkielet aplikacji mobilnej, odpowiadają za działanie wielu kluczowych integracji, m.in. z Google Maps i systemem GPS oraz napędzają silnik wbudowanej wyszukiwarki;
• Netflix – twórcy popularnej platformy streamingowej wykorzystali Reacta przy projektowaniu prostego, skalowalnego interfejsu oraz do skrócenia czasu renderowania dostarczanych do użytkownika treści;
• Airbnb – co ciekawe, programiści Airbnb nie tylko korzystają z Reacta do rozwoju jednego z najbardziej intuicyjnych interfejsów mobilnych (biorąc pod uwagę ilość przetwarzanych danych), ale także stworzyli uniwersalny zestaw standardów kodowania przy pomocy tej biblioteki. Do dziś korzystają z nich dziesiątki tysięcy programistów;
• Walmart – dla największej amerykańskiej sieci supermarketów React JS okazał się sposobem na uporanie się z czasami ładowania strony i aplikacji mobilnej, które przypominały długie kolejki do kasy w sklepie. Potwierdził to sam CTO sieci, Jeremy King;
• Discord – popularny komunikator wykorzystał React Native do zbudowania swoich aplikacji mobilnych, co pozwoliło na błyskawiczne współdzielenie kodu między platformami;
• Dropbox – kolejna usługa działająca głównie w chmurze, która również nie funkcjonowałaby tak sprawnie bez Reacta. W przypadku aplikacji opartej na błyskawicznym przesyle plików biblioteka była oczywistym wyborem ze względu na możliwość skrócenia czasu synchronizacji danych;
• BBC – w przypadku brytyjskiego nadawcy React posłużył do stworzenia funkcjonalnego, przejrzystego, zdolnego do obsłużenia na bieżąco aktualizowanych treści (w różnych formatach i w ogromnych ilościach) interfejsu;
• Twitch – platforma do prowadzenia transmisji na żywo nie może pozwolić sobie na mało wydajny, obciążający działanie serwerów frontend. Przejście na bibliotekę React JS było dla twórców Twitcha jedną z najważniejszych decyzji, jakie pozwoliły platformie na szybszy rozwój i ustabilizowanie własnej infrastruktury.

Reacta możesz zintegrować z innymi frameworkami lub systemami zarządzania treścią. Oto parę przykładów:

1. React i Node.js – najpopularniejsze środowisko uruchomieniowe JavaScript umożliwia wykonywanie skryptów tego języka nie tylko klasycznie, po stronie klienta, ale też po stronie serwera. Jeśli masz już zbudowaną aplikację frontendową na React’cie i backendową w Node.js, wystarczy połączyć je za pomocą prostego API po stronie Reacta, do pobierania danych z „zaplecza”.
2. React i PHP/Symfony – inaczej wygląda współpraca Reacta z typowymi, PHP-owymi rozwiązaniami server-side. Symfony domyślnie nie obsługuje frontendowych assetów pisanych w JavaScript, ale można to zmienić przy pomocy prostego narzędzia Webpack Encore (wymaga też instalacji Node.js).
3. React i Laravel – w przypadku Laravel jest zdecydowanie łatwiej, bo framework ma własną, oficjalną paczkę Laravel UI do obsługi komponentów z bibliotek JavaScript (nie tylko Reacta, ale też np. Vue). Inna sprawa, że Laravel teoretycznie jest frameworkiem full-stack i mógłby obsłużyć również i frontend aplikacji, ale połączenie z Reactem daje o wiele więcej możliwości. Wiele projektów integruje je przy pomocy Inertia.js – świetnego narzędzia do łączenia aplikacji typu SPA z narzędziami server-side, w tym z Laravelem.
4. React i Next.js – wspomniany już Next.js jest w zasadzie w stu procentach oparty na komponentach Reacta, składając je w bardzo funkcjonalny i wciąż dość elastyczny framework, z możliwością renderowania po stronie serwera oraz renderowania statycznego. Nawet w oficjalnej dokumentacji Reacta radzi się, aby przy tworzeniu aplikacji SSR (np. z pomocą Node.js) bazować właśnie na Next.js, zamiast budować frontend od zera z reactowych komponentów.
5. React i Drupal – React doskonale współgra z CMS-ami typu headless, czyli tymi, które pozwalają oddzielić od siebie front- i backend, obsługując jedynie zaplecze strony, a kwestię jej prezentacji oddając w ręce developerów JavaScript. Drupal jest świetnym przykładem takiego systemu. Kilka lat temu powstał nawet darmowy projekt React for Drupal, który zbiera w jednym miejscu wszystkie artykuły, kursy i poradniki na temat tego, jak łączyć ze sobą oba rozwiązania.

React JS cały czas się rozwija. Stoi za nim ogromna społeczność. Codziennie powstają nowe narzędzia, z których można korzystać, więc przyszłość biblioteki wydaje się stabilna. React JS nie należy do trudnych i nie wymaga zaawansowanej wiedzy – jest dostępny dla wszystkich, a w internecie znajduje się wiele samouczków oraz fora internetowe, które znacznie ułatwiają wdrożenie początkującym programistom. Osoba znająca JavaScript powinna poradzić sobie w stosunkowo krótkim czasie z pracą z React JS. Ze względu na korzyści oraz popularność biblioteki, warto spróbować ją opanować.