React-native-template-constate-ts NPM

A React native template using typescript :D

Sobre o Projeto

Esta template foi desenvolvida para atender todas as necessidades de uma aplicação avançada em React-Native.

Feito Com

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;
Redux - O Redux é um contêiner de estado previsível para aplicativos JavaScript. Ele ajuda você a escrever aplicativos que se comportam consistentemente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar;
- Redux Saga - O redux-saga é uma biblioteca que tem como objetivo tornar os efeitos colaterais dos aplicativos mais fáceis de gerenciar, mais eficientes de executar, fáceis de testar e melhores em lidar com falhas;
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;
Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;
i18n - O i18n é uma biblioteca auxiliar para criação de aplicativos multi-idiomas;
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;

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.

Pré-requisitos

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)

Estrutura de Arquivos

A estrutura de arquivos está da seguinte maneira:

rocketseat-advanced
├── src/
│   ├── config/
│   │   └── ReactotronConfig.js
│   ├── images/
│   │   ├── rocketseat_logo_roxa.png
│   │   └── rocketseat_logo.png
│   ├── pages/
│   │   └── Main/
│   │       └── index.js
│   ├── services/
│   │   └── api.js
│   ├── store/
│   │   ├── ducks/
│   │   │   └── index.js
│   │   ├── sagas/
│   │   │   └── index.js
│   │   └── index.js
│   ├── index.js
│   └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md

Instalação

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

react-native init SeuApp --template react-native-template-constate-ts

Depois do projeto criado você pode deletar o arquivo 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.

Edição

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.

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;
  - ReactotronConfig.js - Arquivo contendo a configuração do Reactotron, com os Plugins reactotron-redux e reactotron-redux-saga, 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, com os componentes visuais a serem renderizados e também o código para conectar o componente ao Redux para acessar o State global e as Actions criadas nos Ducks;
- 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;
- store - Diretório onde será criada toda a estrutura do Redux para a aplicação, como os Ducks (Reducers + Action Types + Action Creators), os Sagas e um arquivo para centralizar toda essa configuração e disponibilizar para o restante da aplicação;
  - ducks - Diretório destinado a centralizar os Ducks da aplicação para padronização na estrutura relacionada ao Redux;
    - index.js - Arquivo responsável por importar cada Duck criado e combiná-los em um só para serem usados no Redux através da função combineReducers();
  - sagas - Diretório destinado a centralizar os Sagas da aplicação para padronização na estrutura relacionada ao Redux;
    - index.js - Arquivo responsável por relacionar as Actions disparadas pela aplicação às funções do Saga, que são Funções Generator, nele é definido os Action Types a serem "escutados" e qual função executar quando um Action Creator for executado;
  - index.js - Arquivo responsável por executar a configuração para o funcinamento do Redux + Redux Saga, dentre suas funções estão: criar um Middleware para monitorar as Actions disparadas na aplicação, aplicar o middleware criado juntamente com um Enhancer que monitora o fluxo de uma função do Saga, criar o store global da aplicação combinando os reducers existentes e exportar o state criado;
- index.js - Arquivo responsável por centralizar o código do diretório src, nele é inserido o HOC Provider do react-redux que é o responsável por disponilizar o state global para a aplicação, e dentro do Provider 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 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;
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, @babel/runtime, 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.