Essa semana estive iniciando o desenvolvimento de um app usando React Native e me lembrei do quanto de tempo me custa para fazer todas aquelas configurações iniciais do projeto. Foi aí que me lembrei que poderia, na verdade já deveria ter feito um boilerplate para me facilitar esse passo.
Mas afinal, o que é esse tal boilerplate que estou falando?
- Boilerplate é nada mais que um modelo pronto que posso usar como ponto de partida para um projeto, igual quando você usa um Expo, por exemplo, que já vem configurado com aquelas duas views padrões que você sempre acaba por deletar ou refazer. Só que, nesse caso, é você que configura tudo na primeira vez, então vem do jeitinho que você gosta de trabalhar. E aí vai de sua criatividade e necessidade: você já pode preparar sua arquitetura, suas libs favoritas, alguns imports comuns, preparar a configuração de testes que usa, e por aí vai.
Entre as principais vantagens podemos citar:
Economia de tempo: Você não precisa mais configurar do zero a cada novo projeto. O boilerplate já traz tudo pronto, então é só clonar e começar a trabalhar nas features específicas do app.
Consistência entre projetos: Quando uso um boilerplate, todos os meus projetos seguem a mesma estrutura e padrão. Isso facilita não só o desenvolvimento, mas também a manutenção e a leitura do código, principalmente se estou trabalhando com uma equipe.
Redução de erros: Como o boilerplate já foi testado e ajustado em vários projetos, ele se torna mais estável. Ou seja, menos chances de enfrentar problemas com dependências quebradas ou configurações incorretas.
Melhor organização: Uma das coisas mais legais é que posso configurar o boilerplate de acordo com o que eu considero uma boa prática. Posso definir uma estrutura de pastas bem organizada e incluir as ferramentas e pacotes que sempre uso, como Redux, React Navigation, Axios, etc.
Foco no desenvolvimento: Como tudo já está preparado, eu posso me concentrar na parte que realmente importa: o desenvolvimento das funcionalidades do app. Não preciso perder tempo configurando dependências, ferramentas de testes ou estrutura de pastas.
Mas como fazer seu próprio Boilerplate?
Para criar o seu boilerplate, você pode começar com um projeto básico de React Native e, em vez de usá-lo como algo temporário, você vai aprimorando-o para atender todas as necessidades que costuma ter nos seus projetos.
Vamos lá:
_Inicie um projeto novo: _Comece com um projeto básico utilizando o comando
:npx react-native init MeuProjeto.
Adicione as bibliotecas que sempre usa: Inclua bibliotecas que você utiliza em praticamente todos os projetos, como React Navigation, Redux, Axios, entre outras. Isso já economiza um bom tempo na configuração futura.
_Configure a estrutura de pastas: _Organize a estrutura do seu projeto da maneira que considera mais eficiente. Separe as pastas de componentes, telas, serviços, hooks, etc. Assim, você já começa com tudo no lugar certo.
Prepare as ferramentas de testes: Se você costuma usar testes em seus projetos, configure tudo logo no início. Adicione bibliotecas como Jest, Testing Library, e as configure de acordo com o seu padrão.
Teste tudo: Após configurar, rode o projeto e veja se tudo está funcionando bem. O objetivo aqui é garantir que, no futuro, quando você for reutilizar o boilerplate, não vai ter que lidar com erros ou configurações quebradas.
Salve seu boilerplate: Quando tudo estiver pronto, suba o projeto para um repositório no GitHub ou GitLab. Isso facilita para você clonar e usar em novos projetos ou até compartilhar com outros desenvolvedores.
_
Use o boilerplate nos próximos projetos:_ Agora, sempre que for iniciar um novo app, em vez de fazer tudo do zero, você pode simplesmente clonar o repositório do seu boilerplate e já começar com tudo configurado.
Um exemplo de como usar o boilerplate seria:
git clone https://github.com/seuUsuario/seuBoilerplate.git MeuProjeto
E assim você tem seu boilerplate, e pode usar sempre que precisar, te poupando bastante tempo enquanto diminui o retrabalho e garantindo uma padronização.
Ah, e o boilerplate não é algo específico do react-native, você pode usar a vontade em outras linguagens. Pode usar da forma que lhe for mais conveniente.
Top comments (0)