Najlepsze boilerplaty React Native w 2023 roku

W miarę jak technologia React Native się rozwija i zdobywa zaufanie społeczności programistów, zaczęły pojawiać się rozwiązania takie jak gotowe biblioteki i komponenty UI, które przyspieszają pracę z tą technologią. 

Dzięki React Native zespół programistów iOS i Android nie musi tworzyć osobnych aplikacji. Zamiast tego jedną aplikację można napisać w JavaScripcie i płynnie używać jej na różnych platformach z jedną bazą kodu. 

Jak można się jednak domyślić, tych „boilerplate’ów” jest bardzo dużo. Analiza GitHuba pokazuje, że istnieje około 2875 repozytoriów z boilerplate’ami React Native. Żeby oszczędzić Ci cennego czasu, przeczytaj ten artykuł i poznaj osiem najlepszych boilerplate’ów React Native na 2023 rok.

Omówimy też część ich cech - architekturę UI, typ nawigacji i możliwości testowania. Dzięki temu zdecydujesz, który z nich pasuje do Twojego projektu. Zaczynajmy!

EDYCJA: zaktualizowaliśmy ten artykuł, żeby był aktualny również w 2023 roku. Miłej lektury!

Czym jest boilerplate?

Boilerplate to fragment kodu generowany po to, żeby programiści mogli zacząć projekt bez czasochłonnej konfiguracji. Boilerplate oszczędza im ręcznego powtarzania tych samych fragmentów kodu w całym projekcie.

Boilerplate a szablon boilerplate’a

Boilerplate skraca czas pracy, powielając fragmenty kodu, a szablon to element, którym możesz swój boilerplate wzbogacić - na przykład dodając TypeScript do create-react-app.

Korzyści z używania kodu boilerplate

Dużą zaletą boilerplate’ów jest oszczędność czasu i krótka krzywa uczenia się. Zamiast pisać wszystko od zera, dołączasz szablon kodu. Poza tym dzięki gotowemu rusztowaniu kodu praca projektanta staje się prostsza.

Wyzwaniem bywa jednak dodatkowe utrzymanie kodu i konieczność poruszania się po cudzym kodzie. Do tego polecenia boilerplate’a mogą zrzucić kod z informacjami konfiguracyjnymi, więc trzeba ręcznie rozwiązywać listy błędów, sprzątać sporo kodu i aktualizować zależności z oryginalnego repozytorium. 

Porównanie boilerplate’ów React Native

Ponieważ gusta programistów i potrzeby projektów się różnią, nie ma czegoś takiego jak najlepszy boilerplate Reacta - każdy rozwiązuje inne problemy. Omówimy jednak najpopularniejsze boilerplate’y 2022 roku, porównując część ich cech: architekturę UI, typ nawigacji i możliwości testowania.

1. Ignite by Infinite Red

Ignite to nowoczesny boilerplate projektów React Native od Infinite Red, który zawiera CLI, generatory komponentów i modeli oraz wiele więcej.

Dzięki zgodności z Expo od razu po instalacji Ignite jest najpopularniejszym boilerplate’em aplikacji React Native - zarówno dla Expo, jak i czystego React Native. W tym gotowym na TypeScript projekcie MobX odpowiada za zarządzanie stanem, React Navigation za routing i nawigację, Apisauce za komunikację z serwerami REST, a testy działają na Jeście.

Ten boilerplate jest wydajny, bo od początku jest gotowy na Flippera, Reactotron i Expo. Do zarządzania stanem używa MobX zamiast Redux, bo uchodzi za dużo łatwiejszy do zrozumienia. Ma też AsyncStorage, który w połączeniu z MST pozwala przywracać stan.

Ignite-CLI to interfejs wiersza poleceń Ignite. Zamiast instalować i utrzymywać konkretną wersję CLI globalnie, użyj npx z Node.js, żeby przy uruchomieniu sięgnąć po najnowszą wersję CLI.

Po spełnieniu wszystkich warunków opisanych na stronie tego projektu powinieneś móc utworzyć nowy projekt następującymi poleceniami:

# for vanilla React Native

npx ignite-cli new PizzaApp

 

# or for Expo-powered:

npx ignite-cli new PizzaApp --expo

2. React Native Starter Kit od mcnamee

React Native Starter od mcnamee to narzędzie boilerplate dla React Native, które szybko postawi Cię na nogi. 

Redux odpowiada za zarządzanie stanem, React Native Router za nawigację i routing, NativeBase za architekturę UI, React Native Vector Icons za ikony, Axios za komunikację z serwerami REST, a Jest za testy.

Twórcy tego boilerplate’a zadbali o komplet. Zawiera on NativeBase - pakiet z kluczowymi wieloplatformowymi komponentami UI dla React Native - oraz Redux persist, czyli framework pozwalający zapisać store Reduksa w pamięci lokalnej przeglądarki.

Nowy projekt na bazie tego boilerplate’a tworzysz, po prostu klonując go poleceniem:

clone https://github.com/mcnamee/react-native-starter-kit.git your_app_name

3. React Native Boilerplate od TheCodingMachine

React Native Boilerplate od TheCodingMachine to projekt React Native do budowy solidnych wieloplatformowych aplikacji mobilnych z wyraźnym rozdzieleniem zagadnień między interfejsem, zarządzaniem stanem a logiką biznesową. 

Ten boilerplate zawiera system zarządzania stanem Redux, React Navigation do routingu i nawigacji, Axios do obsługi serwerów REST oraz framework Jest do testów.

Wygodne jest to, że łatwo go skonfigurować i że zawiera bibliotekę internacjonalizacji i18next.

Zanim skorzystasz z tego projektu, wejdź na konfigurację środowiska React Native i wybierz zakładkę React Native CLI Quickstart. Następnie wykonaj instrukcje konfiguracji docelowych systemów operacyjnych.

Po spełnieniu wszystkich warunków opisanych na stronie projektu zatrudnij dedykowanych programistów mobilnych React Native, żeby zbudować nowy projekt tym poleceniem:

npx react-native init MyApp –template @thecodingmachine/react-native-boilerplate

4. React Native Template TypeScript od społeczności React Native

Oto krótki szablon React Native do szybkiej nauki TypeScriptu.

Ten gotowy na TypeScript projekt nie ma bibliotek do zarządzania stanem, nawigacji, architektury UI ani komunikacji z serwerami REST, bo z założenia ma być prosty. Ma jednak system testów Jest.

Dlatego programiści React Native którzy chcą błyskawicznie postawić projekt, sporo na tym boilerplacie zyskają.

Po spełnieniu wszystkich warunków opisanych na stronie tego projektu powinieneś móc utworzyć nowy projekt tym poleceniem:

npx react-native init MyApp —template react–native–template–typescript

5. ReactNativeSeed od GeekyAnts

Projekt ReactNativeSeed od GeekyAnts oferuje do wyboru wiele boilerplate’ów React Native. Strona projektu pozwala wybrać dowolne funkcje, które mają się w nim znaleźć.

Do zarządzania stanem możesz użyć MobX albo Reduksa, do nawigacji i routingu React Navigation, do statycznego sprawdzania typów TypeScriptu lub Flow, a jako stos Create React Native App (CRNA) albo czysty React Native.

Część boilerplate’ów zawiera NativeBase do projektowania UI, React Native Vector Icons oraz framework Jest do testów.

Ta pozycja jest wyjątkowa, bo pozwala wybrać komponenty, które mają znaleźć się w aplikacji, jeszcze przed pobraniem boilerplate’a.

6. React Native Boilerplate od victorkvarghese

Reactive Native Boilerplate od victorkvarghese to architektura oparta na typach do budowy aplikacji React Native z przepływem autoryzacji, wykorzystująca React, Redux, Sagi i hooki. 

W tym gotowym na TypeScript projekcie Redux odpowiada za zarządzanie stanem, React Navigation za routing, React Native Paper za projekt UI, do tego React Native Vector Icons, Axios do komunikacji z serwerami REST i framework Jest do testów.

Dwa najmocniejsze atuty tego boilerplate’a to routing i nawigacja z przepływem uwierzytelniania oraz UI zaprojektowane w React Native Paper. 

React Native Paper to zestaw w pełni konfigurowalnych i gotowych do produkcji komponentów React Native, zgodnych z zasadami Material Design Google’a.

Po spełnieniu wszystkich warunków opisanych na stronie tego projektu utwórz nowy projekt w następujący sposób.

Na początek sklonuj repozytorium boilerplate’a:

git clone https://github.com/victorkvarghese/react-native-boilerplate.git <your project name>

Przejdź do katalogu głównego projektu:

cd <your project name>

Usuń folder .git:

rm -rf .git

Gdy zaktualizujesz nazwę projektu przez react-native-rename, wszystko będzie gotowe:

npx react-native-rename <newName>

7. Re-start od react-everywhere

Re-start od react-everywhere to szablon React Native, który z jednej bazy kodu obsługuje różne platformy: web, mobile i desktop.

Ten boilerplate używa Reduksa do zarządzania stanem i React Routera do routingu oraz nawigacji. Niestety nie zawiera biblioteki do projektowania UI, komunikacji z serwerami REST ani testów.

Piękne w tym boilerplacie jest to, że pozwala korzystać z API React Native i jednej bazy kodu na wielu platformach (Android, iOS, web, Windows i Electron).

Po spełnieniu wszystkich warunków opisanych na stronie tego projektu utwórz nowy projekt w następujący sposób.

Za pomocą react-native-cli utwórz nowy projekt react-native z re-base jako szablonem:

react-native init <Your Project Name> --template re-base

React Native nie obsługuje dziedziczenia szablonów. Jeśli chcesz użyć szablonów pochodnych, takich jak re-dux czy re-route, zainstaluj je bezpośrednio na nowo utworzonym projekcie. Jeśli dostaniesz ostrzeżenie, że projekt już istnieje, zgódź się na nadpisanie potrzebnych plików:

react-native init <Your Project Name> --template re-dux

react-native init <Your Project Name> --template re-route

react-native init <Your Project Name> --template re-start

Szablon re-start wymaga zarówno re-route, jak i re-dux, więc zainstaluj je w tej kolejności.

Ponieważ react-native-template nie obsługuje dodawania własnych skryptów do package.json, dokończ konfigurację projektu przez ./finishInstall.js.

8. React Native Template – TypeScript od AmitM30

React Native Template od AmitM30: TypeScript to szablon, który pomaga zacząć budowę solidnych aplikacji w React Native i TypeScript, instalując z góry najczęściej używane zasoby.

Ten boilerplate używa Reduksa do zarządzania stanem, React Native Navigation do routingu i nawigacji, React Native Paper do projektowania UI, React Native Vector Icons, Axiosa do komunikacji z serwerami REST oraz frameworka testowego Jest.

To, że korzysta z React Native Navigation do routingu i nawigacji, czyni go jeszcze lepszym od wcześniej wymienionych. W porównaniu z biblioteką React Navigation, używaną w części pozostałych boilerplate’ów z tego artykułu, React Native Navigation daje w 100 procentach natywną nawigację na iOS i Androidzie oraz sprawia, że aplikacja działa wydajniej.

Nowy projekt na bazie tego boilerplate’a zaczniesz, po prostu klonując go poleceniem:

git clone https://github.com/AmitM30/react-native-typescript-boilerp

Podsumowanie

Programiści mają różne preferencje, jeśli chodzi o najlepsze boilerplate’y React Native. To trochę jak pytanie o najlepszy język do pisania kodu - każdy będzie bronił swojego ulubionego.

Warto jednak pamiętać, że każdy boilerplate przydaje się do innych zadań. Co więcej, przy wyborze weź pod uwagę, że ma on znaczenie także dla skalowania i utrzymania strony lub aplikacji. 

Jeśli nadal nie wiesz, który boilerplate React Native wybrać, napisz do nas. Nasz zespół doświadczonych programistów zawsze chętnie podzieli się wiedzą i doradzi najlepsze rozwiązanie.

Możesz też pracować z naszym Ideamotive Talent, żeby rozwinąć swój produkt. Zbudujemy idealny zespół do Twoich projektów, pomożemy Ci rozwinąć karierę i pracować na własnych zasadach.

Skontaktuj się z nami jeszcze dziś, żeby omówić szczegóły!