react-native-template-gsr

1.0.8 • Public • Published

React Native Template GSR

npm npm GitHub issues GitHub last commit NPM

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.

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.

Estrutura de Arquivos

A estrutura de arquivos está da seguinte maneira:

react-native-template-gsr
├── src/
│   ├── assets/
│   │   ├── fonts/
│   │   ├── images/
│   │   └── lotties/
│   ├── components/
│   ├── config/
│   │   ├── persistNavigation
│   │   │   └── index.js
│   │   ├── ReactotronConfig
│   │   │   └── index.js
│   │   └── Transitions
│   │       └── left.js
│   ├── datas/
│   ├── hooks/
│   ├── screens/
│   │   ├── Login/
│   │   │   ├── index.js
│   │   │   └── styled.js
│   │   └── index.js
│   ├── services/
│   │   ├── api/
│   │   │   └── base.js
│   │   ├── i18n/
│   │   │   ├── locales/
│   │   │   │   └── en-US.js
│   │   │   │   └── pt-BR.js
│   │   │   └── index.js
│   │   └── navigation/
│   │       └── index.js
│   ├── store/
│   │   ├── ducks/
│   │   │   ├── index.js
│   │   │   └── Login.js
│   │   ├── sagas/
│   │   │   └── index.js
│   │   └── index.js
│   ├── styles/
│   │   ├── colors.js
│   │   ├── fonts.js
│   │   ├── index.js
│   │   └── metrics.js
│   ├── index.js
│   └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .prettierrc.js
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md

Serão explicados os arquivos e diretórios na seção de Edição.

Instalação

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

npx @react-native-community/cli@next init --template=react-native-template-gsr AwesomeExample

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. Após isso você poderá rodar o script yarn android ou yarn ios.


Edição

Nesta seção haverão instruções caso você queira editar o template, explicando para que os diretórios são utilizados e também os arquivos de configuração.

  • src - Diretório contendo todos os arquivos da aplicação, é criado um diretório src para que o código da aplicação possa ser isolado em um diretório e facilmente portado para outros projetos, se necessário;

    • assets - Diretório contendo arquivos de imagem, animações em lottie, fonts e qualquer outro arquivo adicional como vídeo ou sons que você deseja adicionar em sua aplicação.

    • config - Diretório para guardar os arquivos de configuração da aplicação, por exemplo, a configuração de uso do Reactotron e configuração de inicialização do Firebase;

      • persist_navigation - Diretório contendo a configuração da persistencia das informações da tela que serão usados somente em modo de desenvolvimento para evitar o reset total das telas ao realizar reload em sua aplicação;

      • reactotron_config - Diretório contendo a configuração do Reactotron, com os Plugins reactotron-redux e reactotron-redux-saga, para ser usado na aplicação;

      • transitions - Diretório contendo animações de transição entre telas, atualmente existe apenas uma animação mais você poderá criar e adicionar mais animações conforme sua necessidade.

    • datas - Diretório que poderá conter arquivos .json que poderão ser utilizados em sua aplicação caso seja necessário;

    • hooks - Diretório que poderá conter seus hooks customizados, ao invés de criar um diretório util encapsule suas funções em um hook e torne sua solução mais elegante (Sobre hooks customizados clique aqui );

    • screens - Diretório onde ficam as páginas (telas) da aplicação, como forma de padronização e boas práticas toda página fica dentro de um diretório com seu nome;

      • login - Diretório exemplo de uma página cujo nome é Login, por padrão foi adotado usar sempre como nome do diretório o nome da página em camelCase, dentro desse diretório é necessária a criação ao menos do arquivo index.js;

        • index.js - Arquivo com toda a lógica da página, com os componentes visuais a serem renderizados e também o código para conectar o componente ao Redux para acessar o State global e as Actions criadas nos Ducks;

        • styled.js - Arquivo contendo toda a estilização da tela feita com styled-components;

    • services - Diretório onde serão criados os arquivos relacionados a serviços utilizados na aplicação, por exemplo, requisições HTTP, autenticação com Firebase ou qualquer outro serviço que for utilizado;

      • api - Diretório com a configuração da biblioteca Axios para envio de requisições HTTP, o endereço que vem configurado por padrão é para a API do Github;

      • i18n - Diretório contendo as configurações para tradução nas línguas que forem definidas;

        • locales - Diretório contendo resources para traduções.
      • navigation - Diretório contendo a action para disparo de navegação fora dos componentes, como por exemplo nos sagas;

    • store - Diretório onde será criada toda a estrutura do Redux para a aplicação, como os Ducks (Reducers + Action Types + Action Creators), os Sagas e um arquivo para centralizar toda essa configuração e disponibilizar para o restante da aplicação;

      • ducks - Diretório destinado a centralizar os Ducks da aplicação para padronização na estrutura relacionada ao Redux;

        • index.js - Arquivo responsável por importar cada Duck criado e combiná-los em um só para serem usados no Redux através da função combineReducers();

        • user.js - Arquivo contendo um exemplo de um duck .

      • sagas - Diretório destinado a centralizar os Sagas da aplicação para padronização na estrutura relacionada ao Redux;

        • index.js - Arquivo responsável por relacionar as Actions disparadas pela aplicação às funções do Saga, que são Funções Generator, nele é definido os Action Types a serem "escutados" e qual função executar quando um Action Creator for executado;
      • index.js - Arquivo responsável por executar a configuração para o funcinamento do Redux + Redux Saga, dentre suas funções estão: criar um Middleware para monitorar as Actions disparadas na aplicação, aplicar o middleware criado juntamente com um Enhancer que monitora o fluxo de uma função do Saga, criar o store global da aplicação combinando os reducers existentes e exportar o state criado, além de possuir a configuração do redux-persist e reactotron;

    • index.js - Arquivo responsável por centralizar o código do diretório src, nele é inserido o HOC Provider do react-redux que é o responsável por disponilizar o state global para a aplicação, e dentro do Provider são chamadas as rotas tal como qualquer outra configuração que precise ser executada na inicialização da aplicação, ele é como um Entry Point do diretório src;

    • routes.js - Arquivo com as configurações de navegação da aplicação, nele são criados os Navigators disponibilizados na biblioteca React Navigation;

  • .editorconfig - Arquivo destinado à configuração do plugin Editor Config, que padroniza algumas configurações para o editor em diferentes ambientes;

  • .eslintrc.json - Arquivo de configuração do ESLint, é nele que são inseridas as regras e configurações de Linting do projeto, tal como a configuração do Resolver para o Babel Plugin Root Import e configuração da variável global __DEV__;

  • .prettierrc.js - Arquivo de configuração com regras do prettier para padronização do código;

  • babel.config.js - Arquivo de configuração do Babel, é nele que é configurado o Babel Plugin Root Import para aceitar imports absolutos na aplicação usando o diretório src como raiz;

  • index.js - Arquivo raiz da aplicação, também chamado de Entry Point, é o primeiro arquivo chamado no momento do build e execução da aplicação, nele é chamado o arquivo src/index.js que por sua vez chama as rotas da aplicação;

  • jsconfig.json - Arquivo de configuração do JavaScript no Editor, ele é o responsável por ativar o Auto Complete de códigos JavaScript na aplicação;

  • package.json - Diferente dos projetos comuns, esse arquivo tem as configurações necessárias para a publicação do Template no NPM, para saber mais sobre isso veja a seção abaixo.

  • react-native.config.js - Arquivo contendo algumas configurações do projeto, como a especificação do diretório contendo fonts que poderão ser adicionadas no projeto.

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.

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

Licença

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

Contato

Gleydson Rodrigues - Github - gleydsonsr@gmail.com

Package Sidebar

Install

npm i react-native-template-gsr

Weekly Downloads

4

Version

1.0.8

License

MIT

Unpacked Size

627 kB

Total Files

107

Last publish

Collaborators

  • gleydson