Template POINTEC Basic

Está gostando do projeto? Deixe sua estrela :)

Tabela de conteúdo

• Tabela de conteúdo
  • Sobre o projeto
  • Packages inclusos
  • Iniciando
    • Pré-requisitos
    • Estrutura de arquivos
    • Instalação
      • Passo Adicional no Android
• Passo adicional para o Husky e Lint-staged
  • Configuração do Husky e Lint-staged
  • Ajustando o commitlint.config
• Configuração dos Módulos de imports (eslint-plugin-import-helpers)
• Ajuda
  • Contribuição
  • Licença
  • Contato

Sobre o projeto

Projeto para a criação de um template do React Native. Agilizando na hora de iniciar um novo projeto, facilitando o fluxo de desenvolvimento.

Packages inclusos

O templete inclui os seguites pacotes:

• 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-reanimated - Dependência para o React Navigation
  • react-native-screens - Dependência para o React Navigation
  • react-native-safe-area-context - Dependência para o React Navigation
  • react-native-community/masked-view - Dependência para o React Navigation
  • react-navigation/stack - Fornece uma maneira do aplicativo fazer a transição entre telas, onde cada nova tela é colocada no topo de uma pilha.
  • react-navigation/bottom-tabs - Uma barra de guias simples na parte inferior da tela que permite alternar entre diferentes rotas.
  • react-navigation/drawer - Componente que renderiza uma drawer de navegação que pode ser aberta e fechada através de gestos.
  • react-native-paper - Uma biblioteca para a interface que segue o Material Design, é compatível com os padrões e deixa seu aplicativo mais nativo.
  • react-navigation/material-bottom-tabs - Uma barra de guias com tema do Material Design na parte inferior da tela que permite alternar entre diferentes rotas com animação.
  • react-navigation/material-top-tabs - Uma barra de guias com tema do Material Design na parte superior da tela que permite alternar entre diferentes rotas tocando na rota ou passando horizontalmente.
  • react-native-community/react-native-tab-view - Um componente de exibição de guia com recursos animados e gestos suaves.
• React Native Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;
• React Native Modal - Um modal aprimorado, animado e personalizável, conta com uma API simples e ajustes de layout.
• React Native Vector Icons - Uma opção para usar ícones, há vários conjuntos de ícones incluídos.
• React Native SVG - Fornece suporte SVG ao React Native no iOS e Android, e uma camada de compatibilidade para a web.
• Styled Components - Permite escrever código CSS aos componentes.
• Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;
• 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-config-standard - Este pacote fornece ao .eslintrc a configuração Standard;
  • eslint-plugin-import - Plugin do ESLint com regras para ajudar na validação de imports;
  • eslint-plugin-import-helpers - Regras para ordenação automática dos módulos de imports;
  • eslint-plugin-node - Regras adicionais do ESlint para o Node.js;
  • eslint-plugin-promise - Impor práticas recomendadas para promises do JS;
  • eslint-plugin-standard - Regras Standard básicas para o ESlint;
  • 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;
• Husky - O Husky é usado para ganchos do Git, podendo impedir um commit ruim, push e mais.
• Lint-staged - Evite erros enviados para o repositório do Git, execute uma validação antes do commit.

Iniciando

Para utilizar o template, seja através do React Native CLI ou copiando localmente os arquivos, siga as etapas abaixo.

Pré-requisitos

Antes de seguirmos para as configurações e uso do template, é recomendado que você tenha o ambiente configurado para criar e testar aplicativos em React Native. Se você tem, ótimo segue em frente, senão corre pra configurar :)

Estrutura de arquivos

A estrutura dos arquivos está conforme abaixo:

pointec-basic
├── .husky/
│   ├── _/
│   ├── commit-msg
│   ├── pre-commit
│   ├── prepare-commit-msg
├── src/
│   ├── assets/
│   │   ├── pointec_logo.png
│   │   └── pointec_logo@2x.png
│   │   └── pointec_logo@3x.png
│   ├── components/
│   │   └── Details/
│   │       └── index.js
│   │       └── styles.js
│   ├── config/
│   │   └── index.js
│   ├── pages/
│   │   └── Main/
│   │       └── index.js
│   │       └── styles.js
│   ├── routes/
│   │   └── main.routes.js
│   ├── services/
│   │   └── api.js
│   ├── index.js
│   └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .prettierrc.js
├── .travis.yml
├── babel.config.js
├── commitlint.config
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md

Instalação

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

react-native init MeuTemplate --template pointec-basic

2. Após o projeto ser criado por completo, você pode deletar o arquivo App.js da raiz, alteramos para o arquivo index.js na 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, abra o arquivo android/app/src/main/java/<pacote_do_projeto>/MainActivity.java, e comece importando os pacotes:

// ...
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():

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

Passo adicional para o Husky e Lint-staged

Se você for utilizar o Husky e o Lint-staged, você precisa instalar globalmente/localmente os pacotes:

• commitizen
• @commitlint/cli
• @commitlint/config-conventional
• cz-conventional-changelog

yarn global add commitizen

yarn global add @commitlint/cli @commitlint/config-conventional

yarn global add cz-conventional-changelog

É possível instalar local ao invés de global.

Você também pode utilizar o NPM para instalar.

Configuração do Husky e Lint-staged

Adicione em seu package.json o seguinte:

  "scripts": {
    "eslintfix": "eslint --fix",
    "prettiercheck": "prettier --write",
    "commit": "git-cz"
  },
  "lint-staged": {
    "*@(js)": [
      "yarn eslintfix",
      "yarn prettiercheck"
    ]
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

Há configurações na pasta .husky.

Você pode ajustar o package.json e os arquivos da pasta do .husky conforme as suas necessidades.

Ajustando o commitlint.config

Quando for utilizado a instalação dos pacotes acima globalmente, configurar o arquivo da seguinte forma:

# Alterar o 'C:/Users/Rafael/AppData/Local/Yarn/Data/global/node_modules/'
# Para o caminho do seu usuário e da pasta de instalação

module.exports = {
  extends: ['C:/Users/Rafael/AppData/Local/Yarn/Data/global/node_modules/@commitlint/config-conventional'],
}

Obs.: Solução temporária e não é a melhor forma de corrigir.

Se for feito localmente, utilizar a seguinte configuração:

module.exports = {
  extends: ['@commitlint/config-conventional'],
}

Solução para o erro da issue #613.

Configuração dos Módulos de imports (eslint-plugin-import-helpers)

Para a ordenação automática dos imports, criamos no eslintrc.json um padrão de configuração.

Você pode ajustar conforme as suas necessidades.

Ajuda

Você pode ajudar o projeto, veja abaixo como contribuir.

Contribuição

Se quiser você pode contribuir com o projeto. Contribuições são o que fazem a comunidade open source um lugar incrível. Qualquer contribuição que você fizer será muito bem vinda.

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

Para testar o template de um caminho local, coloque o caminho absoluto junto com o prefixo file://

react-native init MeuTemplate --template file:///Users/DEV/MeusProjetos/react-native-template-pointec-basic

Licença

Distribuído sob a licença MIT. Veja LICENSE para mais informações.

Contato

POINTEC - Github - developer@pointec.dev