A pre configured boilerplate, with some useful stuff already configured
MIT License
Um projeto baseado inicialmente no template typescript
que temos para react native, porém, com algumas configurações extra que na grande maioria das vezes fará sentido serem configuradas. Aqui, já teremos tudo pronto.
Zustand - Não tão famosa quanto Redux (igual era configurado nas versões anteriores do boilerplate), porém, extremamente simples! Acredito que você vá curtir utilizar.
React Navigation - Navegação. Caso performance seja um detalhe crucial, vale dar uma olhada na biblioteca react-native-navigation.
Styled Components - Framework para estilização.
ESLint - Inspetor de JavaScript, pré configurados os fortes e consistentes padrões que já vem com o React Native + plugin de absolut import.
Babel Plugin Module Resolver - Disponibilidade de imports absolutos.
./src
do projeto. Ao invés de fazer ../../components/MeuComponente
, você acessa-o direto do import absoluto, utilizando @src/components/MeuComponente
. Uma feature incrivelmente útil, principalmente quando o projeto vai crescendo, e começamos à ficar com enormes cadeias de ../../../
por todo o projeto.babel.config.json
, e também o tsconfig.json
(este, para tornar visíveis as rotas absolutas via intellisense (autocomplete))
Inicialmente, certifique-se que passou por todo o processo de configuração de ambiente, da documentação oficial do React Native.
Execute o comando abaixo, substituindo <nomeDoProjeto>
pelo nome desejado:
$ npx react-native init <nomeDoProjeto> --template react-native-template-ts-boilerplate
Pronto, agora você já pode aproveitar o boilerplate e usufruir de toda a configuração já concluída.
OBS: Case dê algum erro de Cocoapods na instalação do template, não se preocupe, pois as dependências ainda não foram instaladas. Pode seguir adiante.
Indico seguir os passos da biblioteca react-native-rename para renomear, de fato, todas as pastas internas com o nome correto. (assim evitaremos ter pastas com nome TSBoilerplate
dentro de seu projeto).
Para rodar este comando, você terá de ter seu projeto com o
.git
iniciado, e com os arquivos commitados.
$ npx react-native-rename@latest "nomeDoProjeto" -b "com.user.nomeDoProjeto"
Este
-b
no script é para a alteração também do bundle ID
Considerando que o desenvolvimento React (ou React Native) não é devidamente convencionado, fica aberto para cada um fazer de seu jeito. Por este motivo, segue abaixo uma estruturação sugerida. Nem preciso dizer que é tudo estritamente opcional. Independente do caminho, só tente evitar bagunça.
📦src
┣ 📂commons (quando não são componentes, e devem ser reutilizáveis)
┣ 📂components (para componentes reutilizáveis)
┣ 📂stores (módulos contendo stores do zustand)
┣ 📂screens
┃ ┣ 📂Authenticated
┃ ┃ ┣ 📂Home
┃ ┃ ┃ ┣ 📜index.tsx (arquivo principal, que contém a View/UI)
┃ ┃ ┃ ┣ 📜StackNavigator.tsx (caso sua raiz seja um stack navigator)
┃ ┃ ┃ ┣ 📜styles.ts (componentes já estilizados pelo styled-components)
┃ ┃ ┃ ┗ 📜types.ts (tipos pertencentes apenas à esta estrutura)
┃ ┃ ┗ 📜BottomTabNavigator.tsx
┃ ┗ 📂NotAuthenticated
┃ ┃ ┣ 📂Signin
┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┗ 📜styles.ts
┃ ┃ ┣ 📂Signup
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┗ 📜StackNavigator.tsx
┣ 📜App.tsx (componente principal, onde ficam os providers)
┗ 📜RootNavigator.tsx (rotas raíz do projeto, caso deseje adicionar)
Primeiramente, indico fortemente o uso do pnpm. Ganha muito em performance e em uso de disco. Mas fique à vontade para rodar tudo em npm
diretamente. (pode usar yarn
também, mas eu parei de utilizar já há algum tempo...)
Caso queira utilizar o pnpm
, lembre-se de alterar o arquivo _npmrc
para .npmrc
na raíz do projeto.
Se for utilizar yarn
ou npm
, pode apagar o arquivo _npmrc
sem problemas.
Isso é feito para o pnpm instalar as dependências de forma flat, ou seja, pastas individuais, ao invés de agrupadas (igual seria, sem este arquivo presente). Tive problemas de configuração com algumas dependências, devido à esta alteração na estrutura do
node_modules
. Portanto, esta me pareceu a saída mais fácil e direta. (Fique à vontade para sugerir melhorias...)
Instale o pnpm via brew
$ brew install pnpm
E as dependências do projeto
$ pnpm i # ou npm i
Caso use
yarn
ounpm
para instalação de dependências, este arquivo.npmrc
não é necessário.
Aqui, podemos utilizar o comando do npm diretamente
Primeiramente, precisamos instalar os Pods
no projeto.
$ pnpx pod-install # ou npx pod-install
Agora basta dar start, e, depois de carregar, apertar a tecla i
, que um emulador iOS será aberto.
$ pnpm start
Para Android, faça o start diretamente
$ pnpm start
Agora basta pressionar a
, que o script dará launch num emulador Android configurado.
Agora, pressione i
, que o script dará launch num emulador Android configurado.
Divirta-se!