React Native é uma estrutura desenvolvida pelo Facebook para construir aplicativos Android e iOS com React. Se você está familiarizado com o React Native, sabe que começar um projeto do zero pode ser um processo muito tedioso, repetitivo e demorado. Por esse motivo, neste artigo, daremos uma olhada em alguns dos boilerplates mais populares do React Native que o ajudarão a iniciar um projeto muito mais rápido.
Acredito que esses sejam alguns dos melhores boilerplates disponíveis hoje, e todos foram desenvolvidos por desenvolvedores incríveis. Para ajudá-lo a economizar tempo ao escolher um padrão deste artigo, também falarei sobre alguns de seus recursos para que você possa descobrir qual é o mais adequado para o seu projeto.
Os critérios usados para analisar os boilerplates que logo serão mostrados neste artigo são o design da IU, o tipo de navegação e a capacidade de teste.
Não classifiquei esses projetos porque acredito que cada um deles é uma ferramenta útil. No entanto, usei o número de estrelas no Github para decidir a ordem em que aparecem.
1. Ignite por Infinite Red
Ignite por Infinite Red é um padrão de projeto React Native de última geração que inclui uma CLI, geradores de componente/modelo e muito mais.
Com 12,2 mil estrelas, Ignite é o padrão de aplicativo React Native mais popular para Expo e React Native, e oferece suporte para Expo pronto para uso. Este TypeScript -projeto usa MobX para gerenciamento de estado, React navigation para roteamento e navegação, Apisauce para conversar com servidores REST e a estrutura Jest para teste.
O que eu gosto neste clichê é que ele está pronto para Flipper, Reactotron e oferece suporte para Expo fora da caixa. Além disso, este clichê usa MobX em vez de Redux para gerenciamento de estado, que é conhecido por ser muito mais fácil de entender quando comparado ao Redux. Ele também vem com AsyncStorage integrado com MST para restaurar o estado.
O Ignite possui uma interface de linha de comando integrada chamada ignite-cli . Em vez de instalar e gerenciar uma versão específica da CLI globalmente, é recomendado que você acesse a versão atual em tempo de execução usando npx , que vem com Node.js.
Depois de cumprir todos os pré-requisitos listados na página deste projeto, você deverá ser capaz de criar um novo projeto com os seguintes comandos:
# para Vanilla React Native npx ignite-cli new PizzaApp # ou para a Expo: npx ignite-cli new PizzaApp--expo
2. React Native Starter Kit por mcnamee
React Native Starter por mcnamee é um aplicativo padrão React Native para colocá-lo em funcionamento muito, muito rapidamente. Tem 3 mil estrelas no GitHub.
Este projeto usa Redux para gerenciamento de estado, React Native Router para roteamento e navegação, NativeBase para o design da IU, React Native Vector Icons para os ícones, Axios para conversar com servidores REST e a estrutura Jest para testes.
Os autores deste clichê certificaram-se de que ele veio com as baterias incluídas. Este boilerplate não vem apenas com NativeBase, que é uma biblioteca que nos fornece componentes de interface do usuário multiplataforma essenciais para React Native, mas também com Redux persist , uma biblioteca que nos permite salvar o redux store no armazenamento local de nosso navegador.
Você pode criar um novo projeto usando este boilerplate simplesmente clonando este projeto com o seguinte comando:
git clone https://github.com/mcnamee/react-native-starter-kit.git your_app_name
3. React Native Boilerplate por TheCodingMachine
React Native Boilerplate por TheCodingMachine é um modelo de projeto React Native para construir aplicativos móveis de plataforma cruzada sólidos por meio de uma separação de interesses entre a IU, o gerenciamento de estado e a lógica de negócios. Tem 2.000 estrelas no Github.
Este boilerplate usa Redux para gerenciamento de estado, React Navigation para roteamento e navegação, Axios para falar com servidores REST e o framework Jest para teste.
Este padrão é fácil de instalar e vem com uma biblioteca de internacionalização chamada i18next pronta para uso.
Antes de usar este projeto, vá para a configuração do ambiente React Native e selecione a guia React Native CLI Quickstart. Siga as instruções para seu sistema operacional de desenvolvimento e sistema operacional de destino.
Depois de atender a todos os pré-requisitos listados na página deste projeto, você deverá ser capaz de criar um novo projeto com o seguinte comando:
npx init nativo reactivo MyApp--template @ thecodingmachine/react-native-boilerplate
4. React Native Template TypeScript pela comunidade React Native
React Native Template TypeScript é um projeto de 1,2 mil estrelas da React Native Community . Este é um modelo React Native limpo e minimalista para um início rápido com TypeScript.
Este projeto pronto para TypeScript pretende ser modesto, por isso não vem com nenhuma biblioteca para gerenciamento de estado, navegação, design de IU ou comunicação com servidores REST. No entanto, ele vem com a estrutura Jest para teste.
Este padrão é uma ótima opção para quem gosta de iniciar um projeto nativo reativo com apenas o mínimo.
Depois de atender a todos os pré-requisitos listados na página deste projeto, você deverá ser capaz de criar um novo projeto com o seguinte comando:
npx react-nativo init MyApp--template react-native-template-typescript
Menções honrosas
Os boilerplates nesta seção são projetos que não poderiam entrar na lista dos quatro primeiros, mas são ótimas ferramentas, no entanto.
Reinicie reagindo em qualquer lugar
Reinicie por react-anywhere é um modelo React Native desenvolvido para atingir várias plataformas, incluindo web, celular e desktop com uma única base de código.
Com 1.3K estrelas, este boilerplate usa Redux para gerenciamento de estado e React Router para roteamento e navegação. Infelizmente, esse padrão não vem com uma biblioteca para design de IU, conversação com servidores REST ou teste.
A melhor coisa sobre esse padrão é que ele permite que você direcione várias plataformas (Android, iOS, Web, Windows e Electron) com React Native APIs e uma única base de código.
Depois de atender a todos os pré-requisitos listados na página deste projeto, você deverá ser capaz de criar um novo projeto com o seguinte.
Crie um novo projeto react-native usando react-native-cli e especifique re-base como um modelo:
react-native init--template re-base
O React Native não oferece suporte à herança de modelos. Se você quiser usar um modelo derivado como re-dux ou re-rotear , instale-os diretamente sobre o projeto recém-criado. Você provavelmente receberá um aviso de que o projeto já existe, basta dizer sim para substituir os arquivos necessários:
react-native init--template re-dux react-native init --template re-route react-native init --template re-start
O modelo re-start depende de re-rotear e re-dux , certifique-se de instalá-los primeiro nessa ordem.
Como o react-native-template não oferece suporte à adição de scripts personalizados a package.json , execute ./finishInstall.js para finalizar a configuração do projeto.
ReactNativeSeed por GeekyAnts
ReactNativeSeed , um projeto de GeekyAnts , fornece você com uma série de boilerplates do React Native para escolher.
O site deste projeto permite que você selecione os recursos que gostaria que seu padrão tivesse.
Você pode optar por MobX ou Redux para gerenciamento de estado, React Navigation para navegação e roteamento, TypeScript ou Flow para verificação de tipo estático e Criar React Native App (CRNA) ou React Native simples para a pilha.
Em alguns dos boilerplates fornecidos, você também encontrará NativeBase para o design da IU, React Native Vector Icons e o Jest estrutura para teste.
O que eu gosto nesta entrada é a capacidade de escolher os componentes que você deseja que seu aplicativo tenha antes de baixar o clichê.
Antes de usar este gerador de boilerplate, observe que, infelizmente, alguns dos repositórios contendo os boilerplate que você baixou com base nas escolhas de seus componentes estão um pouco desatualizados.
React Native Boilerplate por victorkvarghese
Boilerplate nativo reativo por victorkvarghese é uma arquitetura baseada em tipo para desenvolver aplicativos React Native usando React, Redux, Sagas e ganchos com fluxo de autorização. Tem 375 estrelas no GitHub.
Este projeto pronto para TypeScript usa Redux para gerenciamento de estado, React Navigation para roteamento e navegação, React Native Paper para o design de IU, React Native Vector Icons, Axios para falar com servidores REST e a estrutura Jest para testes.
Alguns dos maiores pontos de venda desse boilerplate são que o roteamento e a navegação vêm com o fluxo de autenticação integrado e que ele usa o React Native Paper para o design da interface do usuário. React Native Paper é uma coleção de componentes personalizáveis e prontos para produção para React Native, seguindo as diretrizes de Material Design do Google.
Depois de atender a todos os pré-requisitos listados na página deste projeto, você deverá ser capaz de criar um novo projeto com o seguinte.
Primeiro, clone o repositório padrão:
git clone https://github.com/victorkvarghese/react-native-boilerplate.git
Vá para o diretório raiz do projeto:
cd
Remova a pasta.git:
rm-rf.git
Use react-native-rename para atualizar o nome do projeto e você deve estar pronto para ir:
npx react-native-rename
React Native Template-TypeScript por AmitM30
React Native Template-TypeScript por AmitM30 é um padrão que permite que você comece a criar aplicativos robustos usando React Native e TypeScript com as ferramentas mais comumente necessárias já configuradas.
Com mais de 166 estrelas, este padrão usa Redux para gerenciamento de estado, React Native Navigation para roteamento e navegação, React Native Paper para o design de IU, React Native Vector Icons, Axios para falar com os servidores REST e a estrutura Jest para teste.
O que diferencia este boilerplate dos mencionados anteriormente é o fato de ele usar o React Native Navigation para roteamento e navegação. O React Native Navigation fornece navegação de plataforma 100% nativa em iOS e Android e torna seu aplicativo mais eficiente em comparação com a biblioteca React Navigation, que é usada em alguns dos outros boilerplates mostrados neste artigo.
Você pode criar um novo projeto usando este boilerplate simplesmente clonando este projeto com o seguinte comando:
git clone https://github.com/AmitM30/react-native-typescript-boilerplate.git your_app_name
Conclusão
Neste artigo, falamos sobre alguns padrões do React Native que tornam o desenvolvimento de nosso aplicativo muito mais fácil.
Caso você tenha esquecido quais são os pontos fortes desses boilerplates, dê uma olhada na tabela a seguir para refrescar sua memória:
| Recursos/Produto | Ignite por Infinite Red (12,2K  ) |
React Native Starter Kit por mcnamee (3K ) |
React Native Boilerplate por TheCodingMachine (2K  ) |
React Native Template TypeScript da React Native Community (1,2 K ) |
|---|---|---|---|---|
| Gestão estadual | MobX | Redux | Redux |  |
| Navegação | Reagir navegação | Roteador nativo React | Reagir navegação | |
| Componentes de IU | |
NativeBase, React Native Vector Icons | |
|
| HTTP cliente | Apisauce | Axios | Axios | |
| TypeScript |  |
|
|
|
Independentemente do padrão que você escolher, espero que depois de começar a usar um deles, o processo de desenvolvimento de seu aplicativo seja mais tranquilo do que antes.
A postagem Top React Native Boilerplates para 2021 apareceu primeiro no LogRocket Blog .
