React – czym jest i dlaczego warto go używać?

Opublikowano przez

Wyobraź sobie, że masz za zadanie stworzyć dla klienta stronę internetową pełną funkcjonalności – prezentacja danych, wykresy, tabele, panele notyfikacji oraz obsługę różnych zdarzeń jak kliknięcia, czy rozbudowane formularze. Ponadto dane często się zmieniają, niekiedy same powinny odświeżać się na interfejsie użytkownika.

Jeśli do tej pory nie korzystałeś z bibliotek lub frameworków frontendowych, to pewnie w pierwszej kolejności przychodzi ci do głowy połączyć JS z HTML i CSS. A może słyszałeś coś o jQuery i chciałbyś go użyć do tego celu. Jeśli tak, to dobrze myślisz, dało by się zrobić powyższy projekt przy wykorzystaniu tylko tych technologii. Jednak szybko przekonałbyś się, że nie jest to najlepsze rozwiązanie, bo zawiłości kodu i wymyślanie koła na nowo zajęło by zbyt wiele czasu, nie mówiąc już o potencjalnych błędach trudnych do debugowania przy skomplikowanych funkcjonalnościach.

Biblioteka React

Z pomocą przychodzi tutaj React – jedno z wielu narzędzi do przyśpieszenia pracy nad skomplikowanymi projektami. Został stworzony w 2011 roku przez inżyniera Facebooka — Jordana Walke — jako wewnętrzne narzędzie do budowy dynamicznego interfejsu dla Facebooka. W 2013 roku projekt został udostępniony jako open source, co zapoczątkowało jego szybki rozwój i popularność w świecie frontendowym.

Wykres najpopularniejszych frameworków w śród deweloperów na podstawie danych z portalu statista.com

React jest to biblioteka frontendowa. Dlaczego biblioteka, a nie framwework? Ponieważ React odpowiada za jedną rzecz – budowanie interfejsów użytkownika i tylko za to. Nie narzuca sposobu budowania aplikacji, nawigacji między podstronami, zarządzania skomplikowanymi stanami czy formularzami. Dzięki temu po pierwsze jest lekki i szybki w działaniu, idealnie dla prostych ale także skomplikowanych aplikacji.

A co w przypadku jeśli zależy nam na wcześniej wspomnianej nawigacji, czy łatwej obsłudze formularzy? Nie ma problemu – ekosystem React jest bardzo rozbudowany. Istnieje wiele gotowych i sprawdzonych w boju rozwiązań. Wystarczy doinstalować odpowiednią wtyczkę by poszerzyć jego funkcjonalności. Dzięki temu nie potrzebujemy całego ciężkiego frameworka, zrobić nawigację pomiędzy stronami oraz formularze. Na przykład do obsługi routingu między widokami użyjemy pakietu react-router-dom, a do obsługi formularzy chociażby react-hook-form. A jeśli w trakcie rozwoju projektu okaże się, że potrzebujemy walidacji formularzy, możemy wybrać kolejną wtyczkę – zod czy yup.

Jak sam widzisz React pozwala na pełną dowolność. Jest to zaleta dla bardziej doświadczonych programistów, jak i niestety wada dla dopiero zaczynających przygodę z tą biblioteką. Dlatego w przyszłych materiałach pojawiających się na blogu będę próbował rozwiewać wątpliwości oraz przekazywać swoją wiedzę by każdy wyniósł coś wartościowego z tego bloga 🙂

Architektura React

Przy rozwoju aplikacji w React korzystamy z komponentów, czyli podstawowego elementu tej biblioteki.
Każdy widok składa się z komponentów. Każdy komponent może zawierać w sobie jeden lub wiele innych komponentów, a także przechowywać lub przyjmować dane (propsy).

Jeśli jakieś dane wewnętrzne lub przekazane do komponentu się zmienią, React automatycznie zauważy tę zmianę i odświeży (przerenderuje) tylko ten fragment interfejsu, który właśnie tego wymaga.

Dzieje się tak dzięki tzw. Virtual DOM – wirtualnej kopii drzewa elementów strony, w której React w pamięci analizuje różnice między starą, a nową wersją widoku. Dzięki temu nie musi przebudowywać całej strony przy każdej zmianie, co znacząco poprawia wydajność i płynność działania aplikacji.

Bazując na wymaganiach z początku tego wpisu projekt moglibyśmy podzielić właśnie na komponenty, na przykład:

  • komponent dashboard:
    • komponent wyświetlania danych w tabeli
    • komponent wyświetlania danych w liście
  • komponent notyfikacji:
    • komponent z najnowszymi powiadomieniami
  • komponent zamówień:
    • komponent formularza
      • komponent pola imie
      • komponent pola nazwisko
      • komponent ładnie „ostylowanego” przycisku

Kluczowe w tworzeniu komponentów jest dzielenie ich na jak najmniejsze części. Dzięki temu czytelność wzrasta i łatwiej analizować taki kod. Ponadto możemy wydzielać niektóre komponenty, które później użyjemy w innych częściach aplikacji bez zbędnego powtarzania kodu, a nawet skomponujemy inne, być może bardziej złożone komponenty.

Dzielenie komponentów na mniejsze może wpłynąć też na wydajność renderowania strony. O tym i więcej o komponentach przeczytasz w kolejnych rozdziałach w pełni im poświęconym.

React a problem SEO

Jedną z największych zalet biblioteki React jest tworzenie dynamicznych aplikacji jednostronicowych (SPA), które nie przeładowują całej strony, a na bieżąco podmieniają tylko wybrane elementy, co poprawia szybkość i płynność działania.

Niestety z punktu widzenia wyszukiwarek ma to swoją słabą stronę — aplikacja napisana w React (podobnie jak w Angularze) jest renderowana dopiero po uruchomieniu skryptów JavaScript, a nie od razu przy odwiedzinach. Dla robotów wyszukiwarek, które najlepiej indeksują statyczny HTML, może to być problem, szczególnie gdy treści są ładowane dynamicznie. W efekcie strona może być indeksowana gorzej i trudniej osiągnąć wysokie pozycje w wynikach wyszukiwania.

Na szczęście ten problem także można rozwiązać. Z pomocą może nam przyjść SSR (ang. Server Side Rendering) – czyli generowanie gotowego HTML- a na serwerze lub w czasie budowy aplikacji, zanim trafi ona do przeglądarki. Co prawda obecne roboty radzą sobie ze skryptami JS, jednak warto mieć świadomość, że SSR może nieco pomóc.

Popularnymi rozwiązaniami do SSR może być na przykład Next.js, ale na ten moment nie chcę poruszać tego tematu – przyjdzie na to czas w osobnych wpisach 🙂

Integracja z TypeScript

Jedną z bolączek JavaScript było brak statycznego typowania, które pozwalałoby wyłapywać błędy jeszcze przed uruchomieniem kodu. W dużych projektach literówki w nazwach właściwości czy niezgodności typów potrafią wprowadzić chaos i trudne do znalezienia błędy w runtime aplikacji.

Na szczęście pojawił się TypeScript – nadzbiór JavaScriptu, który wprowadza typy i dodatkowe narzędzia programistyczne, dzięki czemu błędy mogą być wyłapywane zanim jeszcze powstaną.

Dzięki temu w React możemy budować większe, bardziej złożone aplikacje bez obaw, że drobne literówki przekazywanych atrybutów do komponentów czy niezgodności typów spowodują krytyczne błędy w działaniu.

Jeśli jeszcze nie zapoznałeś się z TypeScript, to gorąco zachęcam. Uwolni cię od wielu bólów głowy podczas rozwijaniu aplikacji webowych.

Podsumowanie

Jak sam widzisz React jako biblioteka ma wiele zalet takich jak wydajność, rozszerzalność, bardzo rozbudowany ekosystem i niezliczonych zwolenników tej technologii. Pozwala to na sprawne tworzenie nowych aplikacji i szybkie znajdowanie odpowiedzi na nurtujące nas pytania lub zwyczajnie pomocy w rozwiązywaniu problemów.

Jednak nie możemy zapominać o wadach. Algorytmy robotów SEO mogą nie być łaskawe dla takich aplikacji. Chociaż i na nie można znaleźć sposób używając SSR. Wydajność aplikacji także może zależeć od wielu czynników, a nawet od samego zrozumienia działania biblioteki co zademonstruję ci w przyszłych wpisach.

Zaletą, a także wadą jest dowolność i brak konkretnego podejścia do budowania aplikacji w oparciu o React. W doświadczonych rękach może być to złoty środek do rozwiązania wielu problemów biznesowych. Jednak u osoby początkującej niekiedy przysporzy wielu problemów nie tylko w związku ze strukturą projektu ale także przy wyborze odpowiednich bibliotek.

W kolejnym wpisie zejdziemy nieco głębiej w odmęty mechanizmów React – Virtual DOM. Tymczasem dziękuję, że dotrwałeś do końca wpisu. Zapraszam także do sekcji komentarzy, w której chętnie podyskutuję na temat waszych przemyśleń o React :).

Post Views: 8