react-native-template-frintezza-basic

Template Frintezza Basic

Tabela de Conteúdo

- Tabela de Conteúdo
- Sobre o Projeto
- Feito Com
- Começando
- Pré-requisitos
- Estrutura de Arquivos
- Instalação
- Passo Adicional no Android
- Edição
- Publicação
- Contribuição

- Sobre

Sobre o Projeto

Este projeto visa a criação de um template usando o padrão de Arquitetura Page/Component que possa ser utilizado no momento de criação de projetos utilizando React Native, 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.

Esse template foi baseado no Template Rocketseat Basic da Rocketseat.

$3

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;
- React Navigation - O React Navigation surgiu da necessidade 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;
- React Native Device Info - API que permite a acessar informações sobre o Device;
- 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;
- Reactotron - O Reactotron é um app Desktop para inspecionar projetos em React ou React Native. Está disponível para macOS, Linux e Windows;
- reactotron-react-native - Plugin para configurar o Reactotron para se conectar ao projeto React Native;
- 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_;
- 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;

Começando

Para conseguir utilizar o template, seja através do React Native CLI ou com uma cópia local dos arquivos, siga os passos abaixo.

$3

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, para isso você pode seguir o guia do link abaixo:

Ambiente React Native (Android/iOS)

$3

A estrutura de arquivos está da seguinte maneira:

``bash
frintezza-basic
├── src/
│ ├── assets/
│ │ └── frintezza.jpg
│ ├── components/
│ │ └── Header/
│ │ └── index.js
│ ├── config/
│ │ └── ReactotronConfig.js
│ ├── pages/
│ │ └── Main/
│ │ └── index.js
│ ├── services/
│ │ └── api.js
│ ├── themes/
│ │ ├── colors.js
│ │ ├── fonts.js
│ │ ├── images.js
│ │ ├── index.js
│ │ ├── metrics.js
│ ├── index.js
│ └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── package.json
└── README.md
`

Serão explicados os arquivos e diretórios na seção de Edição.

$3

1. Para instalar e utilizar esse template o processo é bem simples, basta criar um projeto novo utilizando o comando:

`sh
react-native init AwesomeExample --template frintezza-basic
`

2. Depois do projeto criado você pode deletar o arquivo App.js (executando esse comando na raiz do projeto: rm ./App.js) da raiz, pois o arquivo index.js agora aponta para a pasta src.

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.

---

#### Passo Adicional no Android

Para que os gestos sejam habilitados no Android é necessário um passo a mais, que é bem simples, abra o arquivo android/app/src/main/java//MainActivity.java, e começe importando os pacotes como abaixo:

`java
// ...
import com.facebook.react.ReactActivity;
// Importações adicionadas
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
`

Feito a importação vamos criar um método novo, logo abaixo do getMainComponentName(), ficando:

`java
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() { ... }
// Método adicionado
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
`

---

$3

Nesta seção haverão instruções caso você queira editar o template, explicando para que os diretórios são utilizadas e também os arquivos de configuraçã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;

- assets - Diretório para guardar todo tipo de arquivo, relacionado a assets (Ex: images, fonts, etc..)

- components - Diretório para guardar todo tipo de component criado na sua aplicação.

- 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;

- ReactotronConfig.js - Arquivo contendo a configuração do Reactotron para ser usado na aplicação;

- images - Diretório para armazenar imagens em geral que possam ser utilizadas na aplicação, esse diretório pode ser renomeado para assets e dentro de assets 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;

- pages - 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;

- Main - Diretório exemplo de uma página cujo nome é Main, 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;

- 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;

- themes - Diretório onde para guardar todos os arquivos relacionados a estilização de modo global.

- colors.js - Arquivo com as constantes das cores a serem usadas na aplicação.

- fonts.js - Arquivo com as fonts e seus styles a serem usados na aplicação.

- images.js - Arquivo com as constantes das images a serem usadas na aplicação.

- index.js - Arquivo com todos os arquivos dessa pasta indexado.

- metrics.js - Arquivo com as metricas tratadas para vários tipos de devices a partir do seu PixelRatio.

- index.js - Arquivo responsável por centralizar o código do diretório src, 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_ do diretório src;

- routes.js - Arquivo com as configurações de navegação da aplicação, nele são criados os Navigator disponibilizados na biblitoeca 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;

- dependencies.json - Arquivo contendo apenas um objeto com a lista de dependências que devem ser instaladas na aplicação, vale lembrar que as dependências que já vem por padrão no projeto como react e react-native não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;

- devDependencies.json - Arquivo contendo apenas um objeto com a lista de dependências de desenvolvimento que devem ser instaladas na aplicação, vale lembrar que as dependências de desenvolvimento que já vem por padrão no projeto como @babel/core, eslint, entre outras, não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;

- index.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/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.

$3

Para publicar um template como esse o processo bastante simples e rápido.

1. Crie uma conta no site do NPM;

2. Com a conta criada execute o comando abaixo e insira suas credenciais;

`sh
npm login
`

3. 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, o name e o version, que são os únicos que tem restrições, seguem abaixo as restrições:

1. O name sempre deve começar com o prefixo react-native-template- seguido do nome do seu template;
2. O template deve ser publicado em uma conta pessoal, pois quando publicado em uma Organization é acrescentado o prefixo @ no nome do pacote;
3. O name deve ser único, não podendo ser igual ao de um template já publicado;
4. 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, a version deve ser diferente e superior a versão atual, por exemplo, 0.0.2;

4. Após configurar corretamente o package.json basta executar no terminal/prompt o comando npm publish;

5. Com a publicação finalizada o template deve ficar disponível através do link https://www.npmjs.com/package/react-native-template-.

Contribuição

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.

1. Faça um Fork do projeto
2. Crie uma Branch para sua Feature (git checkout -b feature/FeatureIncrivel)
3. Adicione suas mudanças (git add .)
4. Comite suas mudanças (git commit -m 'Adicionando uma Feature incrível!)
5. Faça o Push da Branch (git push origin feature/FeatureIncrivel)
6. Abra uma Pull Request

Sobre

Me segue lá no Twitter: @samuelmataraso