Jeśli zaczynasz swoją przygodę z Reactem, warto sięgnąć po boilerplate, czyli „starter kit”, zawierający niezbędne elementy do stworzenia aplikacji webowej. Jako że takich gotowców jest sporo, poniżej znajdziesz przegląd najpopularniejszych z nich.
Najszybszym i najłatwiejszym sposobem na rozpoczęcie projektu opartego na React.js jest użycie paczki create-react-app (CRA) i prawdopodobnie to właśnie z niej skorzystasz za pierwszym razem. Paczka, oferująca bardzo dogodne środowisko pracy, zawiera wszystkie niezbędne narzędzia, których potrzebujesz na początku oraz dobrą strukturę katalogów i plików.
Boilerplate jest blokiem kodu, który można skopiować i korzystać z niego w kolejnych projektach. Działa on więc jak szablon, którego można użyć od razu lub po wprowadzeniu zmian, w zależności od potrzeb.
Pamiętaj, że aby rozpocząć pracę z CRA i skonfigurować aplikację webową, potrzebujesz node >= 8.10 i npm 5.6 lub nowszy. Niewątpliwym plusem jest fakt, że projekt możesz stworzyć za pomocą jednej komendy. Jeśli zdecydujesz się na użycie paczki create-react-app, otrzymasz projekt ze skonfigurowanymi Babel (transpilator JavaScript) i Webpack (używany do kompilacji modułów JavaScript), czyli podstawę do pracy z React.js. Jeśli chcesz użyć większej liczby modułów lub bibliotek, możesz je dodać we własnym zakresie, według potrzeb.
Czym jest react boilerplate?
Dla osób mających nieco doświadczenia z Reactem lepszym rozwiązaniem może okazać się użycie paczki startowej, zawierającej więcej bibliotek, co pomaga przy bardziej złożonych projektach. Jedną z najpopularniejszych paczek jest react-boilerplate — wysoce skalowalny boilerplate z gotowym środowiskiem, dzięki czemu można niemal od razu skupić się na pisaniu kodu.
Co znajdziesz w paczce react-boilerplate?
- Redux — samodzielna biblioteka, pozwalająca na zarządzanie stanem aplikacji i przepływem danych.
- Redux-Saga — middleware Reduxa; złożone narzędzie, obsługujące akcje asynchroniczne.
- Jest — framework do testowania JavaScript.
- React Router — biblioteka używana do routingu po stronie klienta.
- ESLint — narzędzie, które automatycznie analizuje kod, pozwalające na szybkie znalezienie i naprawę problemów; możesz z łatwością dostosować konfigurację .eslintrc.js do projektu przez podpięcie własnych reguł.
- Nowoczesna składnia JavaScript — wprowadzenie szeregu przydatnych funkcji, jak destrukturyzacja obiektów, czy funkcje strzałkowe.
- Struktura folderów — paczka startowa prezentuje dobre podejście do podziału projektu w React.
Korzyści z używania react-boilerplate
Jedną z głównych zalet paczki react-boilerplate jest duża społeczność, oferująca wsparcie w razie problemów z projektem. Kolejną rzeczą jest szybkie tworzenie aplikacji wielojęzycznej, za pomocą paczki react-intl.
Co z minusami?
Główną kwestią sporną jest fakt, że programiści mają różne podejście do tego typu starterów, zwłaszcza gdy zaczynasz swoją przygodę z Reactem. Mowa przede wszystkim o liczbie funkcjonalności, dostarczanych z paczkami — zazwyczaj otrzymujesz więcej kodu i większą złożoność niż to konieczne.
Dla przykładu, react-boilerplate wykorzystuje redux razem z middleware redux-saga do akcji asynchronicznych. Tymczasem, szczególnie na początku, wystarczającym i zdecydowanie łatwiejszym rozwiązaniem jest użycie redux-thunk, szczególnie w przypadku prostych zadań. Co więcej, redux-saga wykorzystuje generatory, więc pisanie testów może być skomplikowane i nieintuicyjne.
Nie oznacza to jednak, że react-boilerplate nie jest przydatnym rozwiązaniem. Z pewnością przyda się bardziej programistom, którzy znają poszczególne biblioteki i rozumieją, jakie są ich funkcje.
Jeśli więc jesteś dopiero na początku drogi z tworzeniem aplikacji w React, korzystanie z rozbudowanej paczki może cię nieco przytłoczyć. Naukę lepiej rozpocząć od wykorzystania startera create-react-app.
Co dalej?
Jeśli ruszasz z pierwszym projektem, pisanym w React.js, śmiało możesz skorzystać z dostępnych boilerplate’ów. Paczki startowe zwykle zawierają wszystko, czego potrzebujesz do stworzenia aplikacji webowej, co pozwoli ci zaoszczędzić sporo czasu. Pamiętaj tylko, że niektóre z nich są bardziej złożone od innych, więc upewnij się, że wiesz z czym to się je.
