Nasza strona używa cookies. Dowiedz się więcej o celu ich używania i zmianie ustawień w przeglądarce. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

10 najpopularniejszych bibliotek Reacta

Poznaj 10 bibliotek Reacta, które powinien znać każdy programista JavaScript.

React jest jednym z trzech najpopularniejszych rozwiązań wykorzystywanych przez programistów front-endowych. W przeciwieństwie do dwóch pozostałych rozwiązań (Vue i Angular), React nie jest pełnowymiarową biblioteką, a raczej biblioteką do budowania interfejsów użytkownika, więc jeśli planujesz rozwijać bardziej zaawansowany projekt, prawdopodobnie będziesz musiał sparować React z kilkoma dodatkowymi bibliotekami. Do wyboru jest ich wiele, ale ja skupię się na 10 najlepszych według mnie. Zaczynajmy.


Redux do zarządzania stanem aplikacji React

Pamiętasz jeszcze czasy, w których posiadało się kilka pendrive'ów, każdy z inną zawartością, porozrzucane w przypadkowych miejscach w domu? Teraz sytuacja ma się podobnie w aplikacjach React, których komponenty mają tylko własny stan lokalny. W niektórych przypadkach to wystarcza (głównie w małych aplikacjach, w których dane nie muszą być współdzielone), ale w większych projektach lepiej mieć scentralizowane miejsce na swoje dane.

Wyobraź sobie, że umieszczono te pamięci USB w chmurze, aby każdy mógł z nich skorzystać. Tak właśnie działa Redux. Genialne, prawda? Dane mogą być współdzielone przez wszystkie komponenty aplikacji i aktualizowane za pomocą zestawu predefiniowanych akcji i czystych funkcji (reduktorów). Ten mechanizm jest przewidywalny, co oznacza, że przy tych samych działaniach w tej samej kolejności, zawsze będziemy mieli ten sam stan, a to ułatwia testowanie i debugowanie. To bardzo elastyczne rozwiązanie. Nie musisz decydować się na jedną opcję - możesz użyć zarówno stanu komponentu, jak i Reduxa w jednym projekcie.


Enzyme do testowania komponentów React

Tutaj możemy znowu przytoczyć pewną analogię. Spójrzmy na rzeczy, z których korzystasz na co dzień: komputer, samochód, smartfon. Każda z nich musi być certyfikowana przez producenta, aby potwierdzić, że jest bezpieczna w użyciu i działa poprawnie. Aby zapewnić tego rodzaju niezawodność, potrzeba zespołu ekspertów, którzy poddają te urządzenia rygorystycznym testom.

Enzyme to narzędzie, które pomaga programistom testować ich komponenty React. Jest kompatybilny z wieloma popularnymi frameworkami do testowania (np. Mocha, Jest, Jasmine), więc konfiguracja tej biblioteki nie powinna być problemem. Z nią możesz mieć pewność, że kluczowe części aplikacji są napisane poprawnie.


Redux Form do budowania bezpiecznych formularzy w React

Pewnie zdarza Ci się podpisywać formalne dokumenty. Zazwyczaj podpis obu stron wystarcza do zawarcia umowy. Czasami jednak, gdy w grę wchodzą duże pieniądze, potrzebny jest podpis w obecności notariusza, czyli zewnętrznej, neutralnej jednostki, która formalnie “przyklepuje” umowę.

Taka ostrożność jest ważna również w świecie aplikacji. Kradzież tożsamości przy transakcjach online, jest w dzisiejszych czasach poważnym problemem. Hakerzy mogą łatwo modyfikować formularze online w HTML i CSS. Rozwiązanie tego problemu znaleziono już dawno temu i zaimplementowano je w formularzu Redux. To biblioteka uniemożliwiająca atakującym wprowadzanie dodatkowych danych do formularzy, a nawet przesyłanie takich formularzy bez powiadomienia użytkownika.

Wszystkie te mechanizmy zapobiegania są zawarte w Redux Form. Dzięki tej bibliotece Reacta możesz budować nie tylko bezpieczne, ale przy okazji piękne formularze. Na stronie dokumentacji można znaleźć wiele przykładów tworzenia konkretnych formularzy i dodawania niestandardowych reguł sprawdzania poprawności.


Eslint, czyli biblioteka open source do dbania o czystość kodu

Programowanie przypomina pisanie książki. Aby stworzyć powieść, musisz odhaczyć przynajmniej niektóre z tych zadań: planowanie, pisanie, korekta, edycja i publikacja. Skupmy się na korekcie. Bez niej książka z pewnością byłaby pełna błędów. Na pewno kojarzysz wbudowaną opcję autokorekty w Microsoft Word, dzięki której łatwo można pozbyć się błędów ortograficznych i gramatycznych.

Ta sama odpowiedzialność spoczywa na Eslint. Ta biblioteka sprawdza składnię i sugeruje najlepsze praktyki. Możesz użyć domyślnych reguł lub jednego z popularnych przewodników stylu programowania, np. Google lub AirBnB. Możesz ją również skonfigurować do działania w środowisku CI i by ochronić projekt przed scaleniem fragmentów, które nie spełniają ustalonych reguł. Oczywiście nie wszystko można zweryfikować za pomocą lintera. Użycie jej jest zalecane, ale nie oczekuj, że Twój kod stanie się nagle idealny, jak za dotknięciem czarodziejskiej różdżki. Jeśli chodzi ocenę całego rozwiązania i użycie wzorców w kodzie, zawsze powinieneś polegać na starym dobrym code review ze strony innego programisty.


Material-UI do implementacji designu Twoich komponentów React

W dzisiejszych czasach prawie wszyscy mają w swoich smartfonach wbudowaną porządną kamerę, jednak nie czyni nas to profesjonalistami. Doświadczeni fotografowie i programiści mają ze sobą wiele wspólnego - nawet jeśli potrafią tworzyć swoją pracę od zera, często używają gotowych rozwiązań w celu optymalizacji procesu. Trudno wyobrazić sobie profesjonalnego fotografa bez profesjonalnego osprzętu do oświetlenia lub narzędzi do edycji zdjęć.

Podobnie programiści, mają własne narzędzia do przekształcania kodu w efektowne aplikacje. Material-UI pomaga w tworzeniu spójnego wyglądu aplikacji, wykorzystując gotowe do użycia komponenty. Wszystkie elementy zostały przetestowane i działają intuicyjnie, co jest wielkim plusem z perspektywy user experience. Można także skorzystać z wbudowanej palety kolorów i cieszyć się faktem, że wszystkie komponenty wykorzystują responsive web design. Korzystanie z nich pozwala zaoszczędzić wiele godzin pracy.


React Intl do obsługi aplikacji wielojęzycznych

Tutaj sprawa jest prosta: jeśli chcesz udostępnić swoje treści ludziom na całym świecie, musisz pomóc im je zrozumieć. Ta biblioteka ułatwia programistom tworzenie aplikacji wielojęzycznych. Użytkownicy będą czuć się komfortowo, widząc treść sformatowaną i przetłumaczoną zgodnie ze standardami, do których są przyzwyczajeni.

Obsługuje nie tylko tłumaczenia dla ponad 150 języków, ale także pomaga w pluralizacji rzeczowników, gdyż tutaj różnice w odmianie zależą od kraju. Np. w języku angielskim mamy dwie formy:

a po polsku mamy cztery:

React Intl dba o to za Ciebie. Wszystko, co musisz zrobić, to podać tłumaczenia dla poszczególnych wartości liczbowych i przekazać je do komponentu.

Ta inteligenta biblioteka obsługuje także różne formaty daty i godziny. Możesz łatwo przedstawić datę w formie: 3/20/2019 10:29 lub: 20 marca 2019 r., 10:29. To samo dotyczy różnych formatów liczb, np. 1,235.56 (USA) i 1 234,56 (Polska).


Storybook, czyli środowisko dla komponentów UI

Moment rozpakowania nowego zakupu jest zazwyczaj ekscytujący. Dla wielu osób sam ten rytuał jest przyjemny, niezależnie od rozpakowywanego przedmiotu. Eksperci branżowi dobrze o tym wiedzą i często pracują nad tym, aby otwieranie produktu już było dla konsumenta wyjątkowym doświadczeniem.  - imo to się jakoś super nie łączy z kolejnym akapitem..

Uprość proces onboardingu nowych programistów. To doświadczenie jest ściśle powiązane z omawianą przez nas biblioteką. Storybook umożliwia programistom tworzenie książki z przykładami użycia konkretnych funkcji. Zobaczysz nie tylko, jak wyglądają poszczególne komponenty, ale również jak się zachowują. Korzystanie z tej opcji opłaca się zwłaszcza w dłuższej perspektywie, ponieważ nowi programiści będą mogli szybko zdobyć odpowiednią wiedzę na temat komponentów. Oszczędza to ogromną ilość czasu i pomaga we współpracy. W dzisiejszych czasach to niezbędnik odpowiedzialnego zespołu.


Reach Router do łatwego definiowania routingu

Kojarzysz jak kiedyś (i gdzieniegdzie nawet dzisiaj!) funkcjonowała infolinia? Wybierasz numer, aby zostać przekierowanym na inny i po 10 minutach dodzwaniasz się do osoby, która będzie (lub nie) w stanie Ci pomóc. Zautomatyzowana infolinia powinna mieć pytania skonstruowane w taki sposób, aby potrzebujący mógł szybko i intuicyjnie uzyskać dostęp do odpowiedzi na swoje pytanie.

Podobnie jest w przypadku dbania o wygodę korzystania ze strony internetowej: ważne elementy powinny znajdować się w zasięgu wzroku i wymagać maksymalnie dwóch kliknięć, żeby do nich dotrzeć. Dlatego potrzeba sposobu na organizację zawartości strony. Zamiast jednego miejsca wejściowego, zawierającego wszystkie informacje, powinieneś utworzyć wiele: do landingów, do zarządzania użytkownikami, do dokumentacji. Aby tworzyć nowoczesne strony internetowe, potrzebujesz rozwiązania takiego jak Reach Router, czyli podkręconego następcy starego React Routera. Ten sam autor, lepsze możliwości.


GraphQL do pobierania danych

W czasach, gdy tradycyjne urzędy pocztowe były bardziej popularne, wysyłanie paczki trwało kilka dni. Obecnie prawie każda duża firma przesyłkowa oferuje usługę dostawy tego samego dnia. Taka możliwość jest wynikiem doskonałej optymalizacji procesu.

Szybki transfer danych ma kluczowe znaczenie przy tworzeniu aplikacji. “Paczki” dostarczane przez aplikację to fragmenty danych przechowywane w bazie danych. Aby szybko dostarczyć je do użytkownika końcowego, potrzebujesz API i warstwy transportowej. Przez lata ich opracowywanie zajmowało zwykle dużo czasu i skutkowało tym, że praca frontentowców była uzależniona od sprawności backendowców. Z pomocą przyszedł GraphQL, którego celem jest rozwiązanie opisanego przed chwilą problemu i dostarczenie danych tak szybko, jak to możliwe. Ponadto, w przeciwieństwie do API REST, zapewnia większą elastyczność, jeśli chodzi o uzyskiwanie określonych informacji.


Gatsby do przyspieszania aplikacji React

Odniesiemy się teraz kamer - w szczególności polaroidów. To świetna rzecz do uwieczniania chwil na obrazkach. Po zrobieniu zdjęć musisz poczekać, aż wyjdą z aparatu i po chwili masz świeżo wykonane, w pełni statycznę reprezentacje dynamicznych sytuacji.

Ta analogia przypomina Gatsby, który jest generatorem statycznych stron. Zasoby statyczne są tworzone na podstawie wielu dostawców informacji statycznych, takich jak informacje z baz danych, pliki markdown, konfiguracja CMS itp. Zamiast wielokrotnie odpytywać tych dostawców, dane są wyodrębniane jako zasoby statyczne. Wystarczy jedno polecenie i Gatsby dokonuje kompilacji, aby aplikacja była gotowa do wgrania. To proste! To narzędzie zapewnia doskonałą wydajność i bezpieczeństwo, ponieważ nie musisz komunikować się bezpośrednio z API.


Podsumowanie

Każda z wymienionych powyżej bibliotek jest kompatybilna z pozostałymi i możesz korzystać z nich wszystkich w jednym projekcie, aby zbudować potężną aplikację. Tysiące profesjonalistów korzysta z nich w codziennej pracy.

Artykuł powstał we współpracy Michała Nicińskiego - Front-end Developera i Mateusza Grzesiukiewicza - Senior JavaScript Developera, pracujących w Boldare.

Zobacz kogo teraz szukają