React-native-template-n5-template NPM

N5-Template

Tabela de Conteúdo

Motivo

Este projeto visa a criação de um template que possa ser utilizado no desenvolvimento de projetos pela comunidade, pois a instalação e configuração das libs podem gerar bastate desconforto, tanto para os iniciantes quanto para os experientes, dificultando dessa forma o desenvolvimento.

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 - Utilizado para criar uma navegaçao de forma facil;
React Native Gesture Handler - usado para manipulação de gestos;
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-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;
Gitmoji - É uma iniciativa para padronizar e explicar o uso de emojis nas mensagens de confirmação do GitHub;
Import-Helpers - Este pacote foi criado para complementar as regras fornecidas pelo eslint-plugin-import. Existem muitas regras ótimas, mas faltam alguns casos de uso importantes;
Styled-Components - Utilizando literais tag modelo (uma adição recente ao JavaScript) e o CSS, styled-components permite escrever código CSS real ao estilo de seus componentes. Também remove o mapeamento entre componentes e estilos - o uso de componentes como uma construção de estilo de baixo nível não poderia ser mais fácil;

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 no NPM é está da seguinte maneira:

n5-template
├── src/
│   ├── pages/
│   │   └── Main/
│   │       └── index.js
│   ├── services/
│   │   └── api.js
│   ├── index.js
│   └── routes.js
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.json
├── 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 nomedoProjeto --template n5-template

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.

Passos adicionais no Android

No React Navigation, a partir da versão do React Native 0.60 e superior, a vinculação é automática. Então você não precisa rodar o react-native link.
Para finalizar a instalação do react-native-screens para Android, adicione as duas linhas a dependencies seguir na seção android/app/build.gradle:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

Para finalizar a instalação react-native-gesture-handler, adicione o seguinte na parte superior (verifique se está na parte superior e se não há mais nada antes) do seu arquivo de entrada, como index.js ou App.js:

import 'react-native-gesture-handler';

Nota: Se você pular esta etapa, seu aplicativo poderá falhar na produção, mesmo que funcione bem no desenvolvimento.

Agora, precisamos envolver o aplicativo inteiro NavigationContainer. Normalmente, você faria isso no seu arquivo de entrada, como index.jsou App.js.

Passo adicional no IOS

Se você estiver em um Mac e desenvolvendo para iOS, precisará instalar pods para concluir a vinculação. Verifique se você possui o Cocoapods instalado. Então execute:

cd ios; pod install; cd ..

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.