Poniższy wpis ma na celu pomóc w pierwszych wyborach początkującym programistom i zaprezentować listę najpopularniejszych bibliotek do rozwiązania standardowych problemów podczas tworzenia aplikacji w React.
Czym jest React?
React jest sam w sobie zaledwie niewielką biblioteką pozwalającą w łatwy sposób tworzyć interfejsy użytkownika. Został stworzony i opublikowany przez Facebooka jako open source – https://github.com/facebook/react. W przeciągu zaledwie kilku lat istnienia zdobył szerokie grono użytkowników i współtwórców. Dokumentację Reacta znajdziecie TUTAJ.
React oferuje podejście wykorzystujące reużywalne komponenty. To elementy zawierające w jednym miejscu zarówno część wizualną, która ma się wyświetlić np. w przeglądarce, jak i logikę, którą ma wykonywać.
Dzięki temu podejściu można swobodnie powiedzieć, że aplikacja składa się z “klocków”. Możemy wykorzystywać zarówno “klocki” przygotowane przez kogoś innego, jak i tworzyć własne.
Błyskawiczne i bezproblemowe tworzenie aplikacji to dwa przymiotniki, które idealnie opisują Reacta. Początkujący developer może spotkać się jednak z pewnymi trudnościami, gdy spróbuje zaimplementować standardową funkcjonalność znaną z innych frameworków. Jak pisaliśmy wyżej, React ma tylko jedno zadanie – ułatwiać tworzenie interfejsów użytkownika. Nie ma za to wbudowanych takich rozwiązań, jak router (czyli zarządzanie wyświetlaniem odpowiednich widoków dla odpowiednich ścieżek URL), czy serwis HTTP (umożliwiający wymienianie danych z innymi serwerami czy bazą danych).
Wszystkie powyższe elementy i znacznie więcej można oczywiście do Reacta dołączyć za pomocą modułów, jakie oferuje NPM (manager pakietów) i sam język JavaScript. Łatwość, z jaką można dodawać kolejne moduły/biblioteki do Reacta, a także ogromna społeczność współtwórców powoduje, że jest ich niesamowicie dużo. Z tego powodu czasami ciężko zorientować się, które z zewnętrznych rozwiązań będzie dla nas najlepsze.
Znane biblioteki React
1. React Router – routing w aplikacji
https://reacttraining.com/react-router/
Pierwsza i prawdopodobnie najważniejsza dodatkowa biblioteka do Reacta to react-router. Umożliwia ona wyświetlanie odpowiednich części aplikacji dla odpowiednich ścieżek w adresie URL. W wielu frameworkach znajduje się od razu po „wyjęciu z pudełka”, czyli instalacji. W React’cie musi być dodana z zewnątrz. Korzystanie z React Routera jest wśród deweloperów uznawane wręcz za standard i można go spotkać w ogromnej liczbie aplikacji.
React Router oferuje komponenty-ścieżki, które zostaną wyświetlone tylko gdy ścieżka z adresu URL będzie się zgadzała z tą podaną w komponencie.
2. Redux – zarządzanie stanem aplikacji
Redux jest biblioteką tak zakorzenioną w świadomości programistów piszących w React, że nie można o niej nie wspomnieć.
Warto jednak wiedzieć, że nie jest to oficjalna biblioteka stworzona przez Facebooka. Nie jest też integralną częścią Reacta mimo, że w wielu poradnikach jest tak prezentowana.
Redux ułatwia nam trudne zadanie, jakim jest zarządzanie stanem aplikacji, czyli wszystkimi danymi jakich aplikacja używa aby zaoferować swoje funkcjonalności. Oferuje on tak zwany store, czyli jedno miejsce, w którym te dane są przechowywane i jednokierunkowy przepływ zmian tych danych. Jeśli jakieś dane mają się zmienić, muszą zostać zmienione właśnie w storze, a następnie komponenty zostaną poinformowane o tej zmianie, by zaktualizować treści wyświetlane użytkownikowi. Używając Reduxa, nie ma innej drogi by zmienić dane w aplikacji. Jako deweloperzy możemy więc być pewni, że każda część danych pochodzi ze stora i jest zarządzana przez Reduxa. Takie rozwiązanie ułatwia poszukiwanie potencjalnych błędów do (upraszczając) jednego miejsca.
Użycie Reduxa jest jednak stosunkowo skomplikowane i wymaga wprowadzenia sporej ilości dodatkowego kodu. Z tego powodu używany on jest w rozbudowanych aplikacjach wymagających zarządzania danymi ze względu na większą przejrzystość takiego rozwiązania. Nie ma większego powodu do używania Reduxa w aplikacjach pokroju prostej “to do” listy.
3. Redux Thunk – asynchroniczne zapytania w aplikacji
https://github.com/reduxjs/redux-thunk
Redux sam z siebie nie jest w stanie obsługiwać operacji innych niż synchroniczne – czyli (upraszczając) takie, na których efekt nie trzeba czekać. Powoduje to, że sam Redux nie jest w stanie wykonać nawet prostego zapytania do innego serwera (gdzie oczywiście trzeba chwilę poczekać na odpowiedź). Rozwiązuje ten problem redux-thunk. Jest to middleware (czyli wtyczka-pośrednik) dla Redux’a , który dodaje do Reduxa możliwość wykonywania asynchronicznych akcji.
4. React Intl – internacjonalizacja aplikacji
https://github.com/yahoo/react-intl
Niezwykła biblioteka, która znacząco ułatwi nam przygotowanie aplikacji dla użytkowników innych narodowości. Posiada narzędzia do formatowania dat, numerów, wyrazów oraz wspiera translację według standardu i18n. Ciekawostka – i18n to skrót od słowa internationalization, gdzie pomiędzy i a n jest dokładnie 18 innych liter :).
React-Intl rozwiązuje oczywiste problemy, jak tłumaczenia wszystkich treści w aplikacji, ale także mniej oczywiste jak format wyświetlania daty i czasu które różnią się pomiędzy kulturami.
Jak zostać front-end developerem?
Podsumowanie
Powyższe biblioteki znacząco ułatwią Wam pierwsze kroki w ekosystemie Reacta i znacząco przyspieszą Waszą pracę. React sam w sobie jest, jak wspominaliśmy na początku, zaledwie małą biblioteką. Ale React + React Router + Redux jako zestaw, w naszej opinii mogą swobodnie być nazywanym pełnoprawnym frameworkiem. Możemy wręcz korzystać z gotowych starter-kitów oferujących już zainstalowane wszystkie powyższe biblioteki (np. https://github.com/notrab/create-react-app-redux).
Przy pisaniu aplikacji nie zapominajmy jednak, że React to biblioteka napisana w JavaScript. Bez problemu możemy więc korzystać z dobrze znanych narzędzi, takich jak:
- Lodash (https://lodash.com/ )
- Moment (https://momentjs.com/ )
- Classnames (https://github.com/JedWatson/classnames )
Na koniec zostawiamy Wam jeszcze jeden link:
Czasami, zamiast wsiąkać w dokumentację, warto zajrzeć tutaj i skorzystać ze świetnie zaprezentowanych kluczowych zagadnień bibliotek (nie tylko Reacta) wraz z czytelnymi przykładami.
Autor: Christian Grobelski
