react-native-template-typescript-jpd v1.0.3
Tabela de Conteúdo
Sobre o Projeto
Este projeto visa a criação de um template que possa ser utilizado no momento de criação de projetos utilizando React Native, visto que o processo de instalação e configuração das libs no início de um projeto podem gerar certa complexidade e muitas vezes até erros que atrasam o processo, atrapalhando assim o fluxo de 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;
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 native Navigation - O React Native Navigation fornece navegação 100% nativa da plataforma no iOS e Android para aplicativos React Native. A API JavaScript é simples e multiplataforma - basta instalá-la no seu aplicativo e dar aos usuários a sensação nativa que eles merecem;
React Native Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;
apisauce - Axios + erros padronizados + transformações de solicitação / resposta;
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;
reactotron-redux - Plugin que permite acompanhar todas as Actions que são disparadas na aplicação, mostrando toda a estrutura da Action;
reactotron-redux-saga - Plugin que permite você percorrer uma saga na sua aplicação, poderá ver a saga e os efeitos que ela desencadeia ao longo do caminho;
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)
Instalação
- Para instalar e utilizar esse template o processo é bem simples, basta criar um projeto novo utilizando o comando:
react-native init AwesomeExample --template jholdy
- Depois do projeto criado você pode deletar o arquivo
App.js
da raiz, pois o arquivoindex.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.
Passo Adicional no Android e IOS
Para que funcione as rotas, icons e o redux-persist. É necessario instalar manualmente as libs conforme o react-native-navigation indica.
Publicação
Para publicar um template como esse, o processo é bastante simples e rápido.
- Crie uma conta no site do NPM;
- Com a conta criada execute o comando abaixo e insira suas credenciais;
npm login
- Basta abrir o arquivo
package.json
e modificar as informações de acordo com o seu template, mas as informações mais importantes são duas, oname
e oversion
, que são os únicos que tem restrições, seguem abaixo as restrições:
O
name
sempre deve começar com o prefixoreact-native-template-
seguido do nome do seu template;O template deve ser publicado em uma conta pessoal, pois quando publicado em uma Organization é acrescentado o prefixo
@<nome_da_organization>
no nome do pacote;O
name
deve ser único, não podendo ser igual ao de um template já publicado;A
version
deve ser atualizada a cada publicação, se o template está na versão 0.0.1 e é preciso publicar uma atualização no mesmo, aversion
deve ser diferente e superior a versão atual, por exemplo, 0.0.2;
- Após configurar corretamente o
package.json
basta executar no terminal/prompt o comandonpm publish
;
- Com a publicação finalizada o template deve ficar disponível através do link
https://www.npmjs.com/package/react-native-template-<nome_do_template>
.
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.
Faça um Fork do projeto
Crie uma Branch para sua Feature (
git checkout -b feature/FeatureIncrivel
)Adicione suas mudanças (
git add .
)Comite suas mudanças (
git commit -m 'Adicionando uma Feature incrível!
)Faça o Push da Branch (
git push origin feature/FeatureIncrivel
)Abra um Pull Request
Licença
Distribuído sob a licença MIT. Veja LICENSE
para mais informações.
Contato
Jholdy Damasceno - Github - jholdydamasceno@gmail.com