45 pakietów NPM w React

Mówiąc najprościej, React jest genialny, popularny, a także wydajny. Jednak ważnym aspektem Reacta jest również fakt, że nie jest on dostarczany ze wszystkimi rozwiązaniami. Dlatego jesteśmy zmuszeni szukać dodatkowych bibliotek, a mogą one być zarówno dobre, jak i złe. Jeśli jesteś początkujący, to na pewno spędzasz znaczną ilość czasu na szukaniu najlepszego rozwiązania problemu.

Dzisiaj odbędziemy dyskusję porównawczą, aby dowiedzieć się więcej o alternatywnych rozwiązaniach różnych problemów w React.

1. Globalne zarządzanie stanem

Współdzielenie stanu pomiędzy komponentami jest obowiązkowe w 99% aplikacji. I jest kilka dobrych rozwiązań — zarówno tych wbudowanych, jak i tych zewnętrznych.

Rekomendowane

Jeśli poprosisz mnie o jedno rozwiązanie, powiem tylko jedno: Redux. Nie dlatego, że jest najlepszy, ale dlatego, że jest najbardziej praktyczny. Wiele firm już z niego korzysta i w pewnym momencie Ty też będziesz musiał.

• redux i react-redux

Świetny jest również ekosystem. Znajdziesz rozwiązanie niemal każdego problemu. Oto niektóre świetne biblioteki, które idą w parze z Reduxem:

• redux-thunk- > Do obsługi zdarzeń asynchronicznych.
• redux-persist- > Do przechowywania danych lokalnie (wsparcie offline).
• reselect - > Do przyspieszenia zapytań w cache’u

Alternatywy

• context - > Wbudowana w React. Przydatna do prostych czynności. Niezbyt dobra dla wydajności. Zwłaszcza jeśli masz dużą ilość szybko zmieniających się danych.
• recoil - > Zaprojektowana w celu rozwiązania konkretnego problemu. Nie jest dobra dla wszystkich przypadków użycia. Zrozumiesz trochę więcej jeśli zajrzysz tutaj.
• mobx- > Korzysta ze wzorca obserwatora. Dobra dla programowania reaktywnego. Nie powinna być używana w nowym projekcie.

2. Zarządzanie stanem serwera

Jeśli Twoja aplikacja w dużym stopniu opiera się na jakimś zewnętrznym źródle danych, to zarządzanie tymi danymi (cache'owanie, prefetching, itp.) może być kluczowe dla wydajności.

Rekomendowane

Osobiście jestem wielkim fanem react-query i pewnie wiele innych osób także. Działa jak magia.

• react-query

Obsługuje caching nieużywanych danych i wiele innych rzeczy OOTB. Prosta, efektywna i konfigurowalna!

Alternatywa

W grze mamy jeszcze jednego gracza i jest nim SWR. Jest to biblioteka podobna do React Query.

• SWR

Główną zaletą tej biblioteki jest to, że jest ona zbudowana przez firmę Vercel. Są to ci sami ludzie, którzy stworzyli NextJS. Można więc oczekiwać lepszej wydajności przy korzystaniu z NextJS.

3. Scaffolding (rusztowanie)

Tworzenie aplikacji React od podstaw jest skomplikowane. Konfiguracja Webpack, Bable itp. może być zniechęcające!

Rekomendowane

NextJS jest moim wyborem przy tworzeniu aplikacji React od podstaw. Jest to tak zwany full-stack React framework.

• NextJS

W dokumentacji możemy przeczytać:

Next.js daje Ci najlepsze developer experience ze wszystkimi funkcjami, których potrzebujesz w produkcji: renderowanie hybrydowe, statyczne i po stronie serwera, wsparcie TypeScript, inteligentne wiązanie, prefetching i wiele więcej. Nie wymaga konfiguracji.

Najważniejszą cechą tego rozwiązania jest wsparcie w zakresie SEO OOTB. Co jest oczywiście wspaniałe! Możesz również wykonać SEO w React. Ale nie jest to tak proste jak Next.

Alternatywa

Jeśli zaczynasz z Reactem lub budujesz jakiś podstawowy projekt, to masz także inne opcje.

• create-react-app- > Tworzenie single-page application. W sam raz dla początkujących.
• gatsby- > Budowa strony statycznej zorientowanej na treść. Nie nadaje się do innych przypadków użycia.

4. Obsługa formularzy

90% aplikacji internetowych posiada jakiś rodzaj formularza. A obsługa wejść formularzy to udręka. Ale… mam dobre wieści!

Rekomendowane

React hook form to najnowsza i najwspanialsza (według mnie ?) biblioteka do obsługi formularzy. Jest naprawdę wydajna i elastyczna.

• react-hook-form

Posiada dobre wsparcie z niektórymi zewnętrznymi bibliotekami ułatwiającymi projektowanie, takimi jak material-ui i ant-design.

Alternatywy

Istnieje kilka dobrych alternatyw w tym obszarze.

• Formik- > posiada sprawdzone w boju rozwiązania do sprawdzania poprawności danych wejściowych, formatowania, maskowania, tablic i obsługi błędów.
• redux-form- > Tego nie używaj. Może naprawdę zaszkodzić wydajności.

5. Wywołanie HTTP

Współcześnie prawie wszystkie strony internetowe opierają się na jakimś zewnętrznym źródle danych. Wykonywanie wywołań HTTP jest więc banalne.

Rekomendowane

Fetch to rekomendowany sposób do  wykonywania wywołań HTTP.

• fetch

Posiada ograniczone, ale bardzo dobre funkcje. Może obsłużyć 95% Twojej codziennej pracy.

Alternatywa

Axios jest lepszym (i popularniejszym) rozwiązaniem niż fetch. 

• axios

Posiada kilka fajnych funkcji, takich jak wbudowana ochrona XSRF i automatyczna konwersja JSON oraz możliwość przechwytywania wywołań HTTP. Jeśli czegoś takiego potrzebujesz, powinieneś się na to zdecydować.

6. Stylizacja

Będziesz potrzebował stylizacji w aplikacji. Co do tego nie ma wątpliwości. Istnieje na to kilka sposobów.

Rekomendowane

Wiele osób może się ze mną nie zgodzić, ale myślę, że stylizowane komponenty są najlepszym wyborem, jeśli chodzi o stylizację w aplikacjach w React.

• styled-components

Pomaga to w tworzeniu czystych komponentów z wyraźnym oddzieleniem warstw. Ponadto, jest łatwe w zarządzaniu i konfigurowalne poprzez propsy.

Alternatywy

Jednak, jak już wspomniałam, są też inne świetne alternatywy!

• plain old css- > Obsługiwany OOTB Powinien być w sam raz do mniejszych projektów.
• sass- > Lepszy w stosunku do CSS. Zapewnia ciekawe funkcje do zarządzania CSS. Dobry dla średnich lub nawet większych projektów.
• styled-jsx- > Biblioteka posiadająca wiele podobnych funkcji jak styled-components. Posiada też kilka dodatkowych funkcji.

7. Biblioteka UI

W wielu przypadkach ręczne projektowanie wszystkich komponentów może nie być dobrym pomysłem. Lepszą opcją będzie użycie biblioteki UI.

Rekomendowane

Najbardziej uniwersalną i konfigurowalną biblioteką UI jest dla mnie Material UI.

• material-ui

Jest ona bardzo popularna i korzysta z niego wiele firm. Jest wysoce konfigurowalna i dlatego jest tak dobra.

Alternatywy

Jest też kilka dobrych alternatyw, które warto sprawdzić.

• semantic-ui- > Wiele wbudowanych komponentów.
• ant-design- > Mniej konfigurowalny, z ograniczeniami, ale posiada ciekawe komponenty.
• chakra-ui- > Ostatnio zyskuje na popularności.

8. Dokumentacja

Dobra dokumentacja może zaoszczędzić setki godzin Twojego czasu. Dlatego należy być proaktywnym i korzystać z biblioteki dokumentacji na bardzo wczesnym etapie projektu.

Rekomendowane

Zalecanym sposobem tworzenia dokumentacji jest React StyleGuidist.

• react-styleguidist

Łatwy w użyciu i naprawdę bardzo dobry.

Alternatywy

Istnieje również kilka innych alternatyw.

• js-docs- > Ogólne narzędzie do tworzenia dokumentacji dla javascript.
• react-docz- > Bardzo łatwy w użyciu przewodnik po dokumentacji. Warto wypróbować.

9. Wsparcie w wielu językach

Jeśli budujesz produkt na dość szeroką skalę, to prawdopodobnie chciałbyś dodać obsługę wielu języków w swojej aplikacji w React.

Rekomendowane

React i18next jest de-facto opcją dla wdrażania obsługi wielu języków w aplikacjach w React.

• react-i18next
• i18next

Alternatywy

Istnieje również kilka innych alternatyw.

• react-intl

Posiada również wsparcie dla innych bibliotek, w tym takich jak VueJS i Angular.

10. Animacja

Animacje ożywią Twoją aplikację. Istnieje kilka dobrych opcji do wykorzystania animacji w React.

Rekomendowane

Zwyczajny CSS jest najlepszym sposobem na animację aplikacji w React. Prosto i szybko. A do tego wydajnie.

• Plain CSS Animations

Alternatywy

Jeśli potrzebujesz czegoś, co jest już gotowe do użycia, oto kilka rekomendacji:

• framer-motion- > Animacja gotowa do produkcji
• react-awesome-reveal- > Używane dla prostych animacji, aby pokazać komponent
• react-spring- > Kolejna świetna i gotowa do użycia biblioteka.

11. Renderowanie długiej listy

Renderowanie długiej listy może naprawdę mocno zaszkodzić wydajności aplikacji. Korzystanie z biblioteki w tym przypadku będzie dobrym pomysłem.

Rekomendowane

Jeśli masz jakąś aplikację typu nieskończonej przewijanej listy, powinieneś rozważyć React Window

• react-window

Alternatywa

Jeśli nie potrzebujesz nieskończonej przewijanej listy, możesz po prostu stronicować dane

• react-paginate

12. Narzędzie jakości kodu

Lintery mogą statycznie znaleźć każdy błąd w twoim kodzie. Dobrym pomysłem jest użycie jakiegoś rodzaju lintera.

Rekomendowane

Rozwiązaniem jest Eslint

• eslint

Alternatywa

• jshint- > Stara biblioteka
• tslint- > Linter dla typescript. W tym momencie nie jest rekomendowana.

13. Formatowanie

Posiadanie spójnej stylizacji wizualnej jest bardzo ważne dla każdej aplikacji, a komponent formatujący kod, może wykonać tę pracę za Ciebie!

Rekomendowane

• Prettier

To najlepsze rozwiązanie. Nie potrzebujesz już nic więcej!

14. Analityka

Dane to przyszłość. Większość współczesnych firm opiera się na danych. Tak więc posiadanie dobrego narzędzia analitycznego dla Twojej aplikacji jest bardzo ważne!

Rekomendowane

Najbardziej popularnym i bardzo dobrym narzędziem do tego zadania jest React Ga.

• react-ga

Myślę, że to jest już wystarczające.

15. Testowanie

Chyba nie muszę powtarzać, jak ważne jest testowanie dla każdej aplikacji. Tak więc proszę bardzo.

Rekomendowane

Rekomendowana jest React Testing Library

• react-testing-library

Jest bardzo łatwa w użyciu i zaprojektowana tak, aby odpowiadała rzeczywistym potrzebom.

Alternatywy

• jest - > Dla testów jednostkowych
• cyprees- > Dla testowania end-to-end

16. Budowanie komponentów do udostępniania

Jeśli pracujesz w dużym zespole, to łatwe współdzielenie komponentów może stać się dużym problemem!

Rekomendowane

Storybook to dobry pomysł, jeśli szukasz najbardziej kompletnego rozwiązania

• Storybook

To wszystko! Myślę, że teraz masz już całkiem dobre rozeznanie, którą bibliotekę wybrać, oraz kiedy. Daj znać, jeśli uważasz inaczej.

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.