react-native-template-vilaapps

Template VilaApps

Tabela de Conteúdo

• Sobre o Projeto
• Começando
  • Pré-requisitos
  • Estrutura de Arquivos
  • Instalação

Sobre o Projeto

Este é um template usado para o desenvolvimento de APPS em react-native da VilaApps, baseado no template da Rocketseat.

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;

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

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

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

• I18n-js: Uma blibioteca que para tratar internacionalização no Javascript.

• Memoize: Usado para criar funções e memorizar seu retorno.

• Prettier: Formatador de código para javascript.

• Prettier Quick: Plugin para rodar o prettier juntamente com husky.

• Husky: Plugin que fornece hooks a serem executados nos pre-commits, pre-push... etc.

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

É nescessario ter o ambiente React Native (Android/iOS) configurado.

Estrutura de Arquivos

A estrutura de arquivos está da seguinte maneira:

rocketseat-basic
├── src/
│   ├── assets/
│   │   └── img
│   │       └── logo.png
│   ├── config/
│   │   └── ReactotronConfig.js
│   ├── helpers/
│   │   ├── clearForm.js
│   │   ├── formatCurrency.js
│   │   ├── formatTime.js
│   │   ├── inputChanges.js
│   │   ├── validateFields.js
│   │   └──config.js
│   ├── i18n/
│   │   ├── translations
│   │   │   └── index.js
│   │   └──config.js
│   ├── pages/
│   │   └── Main/
│   │       └── index.js
│   ├── services/
│   │   └── http.js
│   ├── state/
│   │   └── ContextProvider.js
│   ├── theme/
│   │   └── colors.js
│   ├── commons.js
│   ├── index.js
│   └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .huskyrc
├── .prettierignore
├── .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 App --template vilaapps

• Adicione o script de lint do template

  "scripts" : {
    ...
    "commit": "./node_modules/cz-customizable/standalone.js"
 }

• Extraia o arquivo cz-customizable.zip para dentro da node_modules, substintuindo o arquivo existente.

• 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.