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.

$3

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 :)

$3

A estrutura dos arquivos está conforme abaixo:

``bash
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
`

$3

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

`sh
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//MainActivity.java, e comece importando os pacotes:

`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():

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

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