Co to jest React?
React jest popularną i coraz częściej używaną biblioteką umożliwiającą proste tworzenie interfejsów użytkownika. Biblioteka ta została stworzona i opublikowana przez Facebooka na licencji open source. Jej istotną jest wykorzystywanie reużywalnych komponentów, które składają się z części wizualnej i logicznej.
Głównym zastosowaniem React’a będzie więc proste oraz szybkie tworzenie aplikacji na zasadzie układania gotowych klocków. Tworzenie interfejsów w ten sposób nie zakłada zbyt skomplikowanych rozwiązań, które można jednak dołączyć do biblioteki przy pomocy modułów managera pakietów, a także JavaScript. React umożliwia zatem bardzo szybkie i łatwe dodawanie kolejnych modułów, które są z nim kompatybilne i znacząco poszerzają jego funkcjonalność.
React jest biblioteką, ale mimo to wielu programistów nazywa go frameworkiem. Wszystko za sprawą ogromnej różnorodności dostępnych gotowych rozwiązań, z których można korzystać za pośrednictwem bibliotek zewnętrznych. Do najważniejszych i najczęściej stosowanych modułów należy react-router. Czy wiesz, czym jest reactrouter i jakie są jego zalety i wady?
React- zalety i wady
Obecnie React jest używany właściwie wszędzie tam, gdzie pojawiają się interakcje online, a więc na stronach internetowych czy we wszelkiego rodzaju aplikacjach. Sporą jego zaletą jest lekkość, stabilność i szybkość działania, którą zawdzięczamy jednokierunkowemu przepływowi danych.
Poza tym React opiera swoje działanie na reużywalnych komponentach, co pozwala na skrócenie czasu pracy programisty, a co za tym idzie, zmniejsza koszty całego projektu. To, co jest zaletą React’a, może okazać się jego wada. Chodzi tu o brak narzuconej struktury tworzonych aplikacji. Dzięki ogromnej swobodzie działania, możliwości wykorzystania React’a są potężne, a jednocześnie ryzykowne w przypadku mniej doświadczonych programistów.
Główne zastosowania React’a
React pozwala na wygodne tworzenie tzw. SPA, czyli Single Page Application. Są to jednostronicowe aplikacje internetowe, posiadające jeden plik HTML. Dzięki takiej konstrukcji strona nie przeładowuje się po każdej akcji, a to sprawia, że korzystanie z niej jest wygodniejsze i szybsze. React pojawia się również wszędzie tam, gdzie mamy do czynienia z projektowaniem interfejsów. Przy zastosowaniu React’a, stworzenie aplikacji jest łatwe i intuicyjne, a do tego daje potężne możliwości.
Czym jest React-router?
React-router to najważniejsza biblioteka dodatkowa. Daje ona możliwość wyświetlania właściwych części czy fragmentów aplikacji dla właściwych ścieżek wg adresu URL. React Router stosowany jest praktycznie w każdej aplikacji internetowej, a jego zastosowanie jest już dzisiaj standardem. Jako biblioteka umożliwiająca tworzenie routingu po stronie klienta, react-router będzie alternatywą dla globalnych menedżerów stanu. Routing po stronie klienta jest oparty na podejściu dynamicznym. O tym, co to właściwie oznacza, przeczytasz poniżej.
Routing po stronie serwera vs routing po stronie klienta – różnice
Jeżeli mówimy o routingu po stronie serwera, mamy na myśli wykorzystanie linku, przez który użytkownik prosi o nową stronę i dane od serwera. Chodzi tu o następującą sekwencję czynności: klient klika link umieszczony na stronie internetowej, a tym samym przeglądarka wysyła żądanie do serwera. Serwer odpowiada nowymi treściami, a przesłane treści odświeżają informacje na ekranie. Powoduje to zaktualizowanie URL. Głównym źródłem treści jest tu więc router.
Takie podejście może skutkować nierównym czasem wyświetlania się treści na stronie. Przy każdym odświeżeniu strony, jej zawartość ładuje się od początku, co może negatywnie odbijać się na szybkości działania strony. Kluczowa będzie zatem szybkość odświeżania. Routing po stronie serwera nie jest częścią React Routera.
Odwrotnym sposobem jest router po stronie klienta. Takie rozwiązanie najchętniej stosowane będzie przez programistów podczas tworzenia aplikacji. W najprostszych słowach routing po stronie klienta polega na wewnętrznej obsłudze przekazów przez JS. Nie ma konieczności ładowania wielu stron, a jedynie początkowego żądania z początkowymi plikami HTML, CSS oraz JS z serwera.
W przypadku routingu po stronie klienta użytkownik otrzymuje możliwość wpisania konkretnego adresu URL i załadowania konkretnego widoku danej aplikacji. Poza tym użytkownik ma możliwość używania przycisków „back” i „forward” dzięki wykorzystaniu history API.
Zalety routingu po stronie klienta
Routing po stronie klienta ma wiele zalet. Przede wszystkim, daje on możliwość użytkownikowi URL na odnalezienie się w stworzonej aplikacji. Ponadto, wykorzystując routing po stronie klienta, możesz mieć pewność, że aplikacja będzie miała o wiele mniejszy lag podczas poruszania się pomiędzy stronami.
Routing statyczny, a routing dynamiczny
Routing statyczny zakłada tworzenie ścieżek i wywoływanie ich według potrzeb. W tym celu należy utworzyć plik o nazwie routes.js, który będzie zawierał w sobie wszystkie możliwe potrzebne ścieżki. Routing statyczny sprawia, że serwer jest wywoływany do odpowiedzi na każde żądanie, co zajmuje sporo czasu. Ogólny czas żądania i reakcji ma ścisły związek z jakością połączenia z serwerem.
Routing dynamiczny natomiast zakłada aktualizowanie ścieżek podczas renderowania aplikacji i niepotrzebna jest do tego celu komunikacja z serwerem. Wadą React Router jest przede wszystkim to, że początkowe żądanie do strony głównej spowoduje załadowanie się całej strony, co może zająć więcej czasu. React Router daje możliwość uzyskania jednolitych linków i dynamicznego renderowania.
3 min.
