Este projeto visa a criação de um template que possa ser utilizado no momento de criação de projetos utilizando React Native com expo, visto que o processo de instalação e configuração das libs no início de um projeto podem gerar certa complexidade e muitas vezes até erros que atrasam o processo, atrapalhando assim o fluxo de desenvolvimento.
Abaixo segue o que foi utilizado na criação deste template:
- React Native - O React Native é um framework que permite o desenvolvimento de aplicações mobile usando JavaScript e React;
- Expo - O Expo é uma plataforma de código aberto para criar aplicativos nativos universais que são executados no Android, iOS e na web;
- React Navigation - O React Navigation surgiu da necessidade da comunidade do React Native de uma navegação de forma fácil de se usar e escrita toda em JavaScript;
- React Native Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;
- Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;
- Prop Types - Verificação de tipo em tempo de execução para propriedades (props) React e objetos semelhantes;
- Babel - O Babel é um compilador JavaScript gratuito e de código aberto e transpiler configurável usado no desenvolvimento de aplicações JavaScript;
- babel-eslint - Este pacote é um wrapper do parser do Babel para o ESLint;
- babel-plugin-root-import - Esse plugin do Babel permite que sejam feitos imports e requires em caminhos baseados em uma raiz(root);
- babel-plugin-transform-remove-console - Esse plugin do Babel remove todos os console.* da sua aplicação (Dica no site oficial do RN);
- ESLint - O ESLint é uma ferramenta de lint plugável para JavaScript e JSX;
- eslint-config-airbnb - Este pacote fornece o .eslintrc do Airbnb como uma configuração compartilhada extensível;
- eslint-plugin-import - Plugin do ESLint com regras para ajudar na validação de imports;
- eslint-plugin-jsx-a11y - Verificador estático AST das regras do a11y em elementos JSX;
- eslint-plugin-react - Regras de linting do ESLint específicas do React;
- eslint-plugin-react-native - Regras de linting do ESLint específicas do React Native;
- eslint-import-resolver-babel-plugin-root-import - Um resolver da lib babel-root-import para a lib eslint-plugin-import;
- Prettier - O Prettier atualiza seu código automaticamente seguindo os padrões que você quiser toda vez salva o arquivo;
- eslint-plugin-prettier - Roda o Prettier como uma regra do ESLint;
- eslint-config-prettier - Desativa todas as regras que são desnecessárias ou que podem dar conflito com o Prettier;
- EditorConfig - O EditorConfig é um formatador de arquivos e coleções em forma de Plugin para Editores de código/texto com o objetivo de manter um padrão de código consistente entre diferentes editores, IDE's ou ambientes;
Para conseguir utilizar o template, seja através do expo CLI ou com uma cópia local dos arquivos, siga os passos abaixo.
Antes de seguirmos para as configurações e uso do template, é ideal que você tenha o ambiente configurado para criar e testar aplicativos em React Native com expo, para isso você pode seguir o guia do link abaixo:
A estrutura de arquivos está da seguinte maneira:
gersonrsantos-basic
├── src/
│ ├── config/
│ │ └── ReactotronConfig.js
│ ├── assets/
│ │ ├── images/
│ │ └── sounds/
│ ├── screens/
│ │ └── Home/
│ │ ├── index.js
│ │ └── styles.js
│ ├── services/
│ │ └── api.js
│ └── routes/
│ └── index.js
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .prettierrc.js
├── babel.config.js
├── App.js
├── app.jon
├── LICENSE
├── jsconfig.js
├── LICENSE
├── yarn.lock
├── package.json
├── package-lock.json
├── README_CRA.md
└── README.md
Serão explicados os arquivos e diretórios na seção de Edição.
- Para instalar e utilizar esse template o processo é bem simples, basta criar um projeto novo utilizando o comando:
expo init AwesomeExample --template react-native-template-gersonrsantos-basic
- Depois do projeto criado você pode entrar na pasta do seu projeto e executar o comando
npm start
Com isso o projeto será criado com todas as dependências do template devidamente instaladas e linkadas, tal como os arquivos de configuração que são copiados para o projeto.
Nesta seção haverão instruções caso você queira editar o template, explicando para que os diretórios são utilizados e também os arquivos de configuração.
Esta sesão ainda esta em construção!
-
src - Diretório contendo todos os arquivos da aplicação, é criado um diretório
src
para que o código da aplicação possa ser isolado em um diretório e facilmente portado para outros projetos, se necessário;-
config - Diretório para guardar os arquivos de configuração da aplicação, por exemplo, a configuração de uso do Reactotron e configuração de inicialização do Firebase;
-
assets - Diretório para armazenar imagens e recursos em geral que possam ser utilizadas na aplicação, esse diretório pode ser renomeado para
images
e dentro deimages
criar um novo diretório para guardar somente as imagens, assim é possível ter um diretório para guardar todo tipo de arquivo, e não apenas imagens; -
screens - Diretório onde ficam as páginas (telas) da aplicação, como forma de padronização e boas práticas toda página fica dentro de um diretório com seu nome;
-
Home - Diretório exemplo de uma página cujo nome é Home, por padrão foi adotado usar sempre como nome do diretório o nome da página em camelCase, dentro desse diretório é necessária a criação ao menos do arquivo
index.js
;-
index.js - Arquivo com toda a lógica da página, tal como os componentes visuais a serem renderizados;
-
styles.js - Arquivo com toda a estilização da página;
-
-
-
services - Diretório onde serão criados os arquivos relacionados a serviços utilizados na aplicação, por exemplo, requisições HTTP, autenticação com Firebase ou qualquer outro serviço que for utilizado;
- api.js - Arquivo com a configuração da biblioteca Axios para envio de requisições HTTP, o endereço que vem configurado por padrão é para a API do Github;
-
routes - Diretório responsável por centralizar o código de navegabilidade da aplicação, nele são chamadas as rotas tal como qualquer outra configuração que precise ser executada na inicialização da aplicação, ele é como um Entry Point das rotas da aplicação;
- routes.js - Arquivo com as configurações de navegação da aplicação, nele são criados os Navigators disponibilizados na biblioteca React Navigation;
-
-
.editorconfig - Arquivo destinado à configuração do plugin Editor Config, que padroniza algumas configurações para o editor em diferentes ambientes;
-
.eslintrc.json - Arquivo de configuração do ESLint, é nele que são inseridas as regras e configurações de Linting do projeto, tal como a configuração do Resolver para o Babel Plugin Root Import e configuração da variável global
__DEV__
; -
babel.config.js - Arquivo de configuração do Babel, é nele que é configurado o Babel Plugin Root Import para aceitar imports absolutos na aplicação usando o diretório
src
como raiz; -
App.js - Arquivo raiz da aplicação, também chamado de Entry Point, é o primeiro arquivo chamado no momento do build e execução da aplicação, nele é chamado o arquivo
src/routes/index.js
que por sua vez chama as rotas da aplicação; -
jsconfig.json - Arquivo de configuração do JavaScript no Editor, ele é o responsável por ativar o Auto Complete de códigos JavaScript na aplicação;
-
package.json - Diferente dos projetos comuns, esse arquivo tem as configurações necessárias para a publicação do Template no NPM, para saber mais sobre isso veja a seção abaixo.
Para publicar um template como esse, o processo é bastante simples e rápido.
-
Crie uma conta no site do NPM;
-
Com a conta criada execute o comando abaixo e insira suas credenciais;
npm login
-
Basta abrir o arquivo
package.json
e modificar as informações de acordo com o seu template, mas as informações mais importantes são duas, oname
e oversion
, que são os únicos que tem restrições, seguem abaixo as restrições:- O
name
sempre deve começar com o prefixoreact-native-template-
seguido do nome do seu template; - O template deve ser publicado em uma conta pessoal, pois quando publicado em uma Organization é acrescentado o prefixo
@<nome_da_organization>
no nome do pacote; - O
name
deve ser único, não podendo ser igual ao de um template já publicado; - A
version
deve ser atualizada a cada publicação, se o template está na versão 0.0.1 e é preciso publicar uma atualização no mesmo, aversion
deve ser diferente e superior a versão atual, por exemplo, 0.0.2;
- O
-
Após configurar corretamente o
package.json
basta executar no terminal/prompt o comandonpm publish
; -
Com a publicação finalizada o template deve ficar disponível através do link
https://www.npmjs.com/package/react-native-template-<nome_do_template>
.
Contribuições são o que fazem a comunidade open source um lugar incrível para aprender, inspirar e criar. Qualquer contribuição que você fizer será muito apreciada.
- Faça um Fork do projeto
- Crie uma Branch para sua Feature (
git checkout -b feature/FeatureIncrivel
) - Adicione suas mudanças (
git add .
) - Comite suas mudanças (
git commit -m 'Adicionando uma Feature incrível!
) - Faça o Push da Branch (
git push origin feature/FeatureIncrivel
) - Abra um Pull Request
Entre em contato comigo em um dos seguintes lugares!
- Linkedin em Gerson Santos
- Instagram gersonrsantos
Distribuído sob a licença MIT. Veja LICENSE para mais informações.
Me acompanhe nas minhas redes sociais.
Feito com ❤️ by Gerson