Mohammad FaisalSenior Software EngineerAdvanced Mobility Analytics
45 pakietów NPM w React
Kompleksowy przewodnik po 45 pakietach, które pomogą rozwiązać 16 problemów w React. Wybierz swój idealny pakiet NPM.
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ł.
Ś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.
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.
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.
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.
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.
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.
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 jakstyled-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.
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.
Ł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.
Alternatywy
Istnieje również kilka innych alternatyw.
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.
Alternatywy
Jeśli potrzebujesz czegoś, co jest już gotowe do użycia, oto kilka rekomendacji:
framer-motion- > Animacja gotowa do produkcjireact-awesome-reveal- > Używane dla prostych animacji, aby pokazać komponentreact-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
Alternatywa
Jeśli nie potrzebujesz nieskończonej przewijanej listy, możesz po prostu stronicować dane
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
Alternatywa
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
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.
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
Jest bardzo łatwa w użyciu i zaprojektowana tak, aby odpowiadała rzeczywistym potrzebom.
Alternatywy
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
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.
