Wondering what’s next for npm?Check out our public roadmap! »

    react-native-template-andersonfrfilho

    0.0.4 • Public • Published

    npm npm GitHub issues GitHub last commit NPM


    Template Anderson Fernandes

    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 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 Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;
    • Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;
    • 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;
    • ESLint - O ESLint é uma ferramenta de lint plugável para JavaScript e JSX;
    • Prettier - O Prettier atualiza seu código automaticamente seguindo os padrões que você quiser toda vez salva o arquivo;
    • 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)

    Estrutura de Arquivos

    A estrutura de arquivos está da seguinte maneira:

    andersonfrfilho
    ├── src/
    │   ├── assets/
    │   │   ├── fonts/
    │   │   │   ├── Roboto-Black.ttf
    │   │   │   ├── Roboto-BlackItalic.ttf
    │   │   │   ├── Roboto-Bold.ttf
    │   │   │   ├── Roboto-BoldItalic.ttf
    │   │   │   ├── Roboto-Light.ttf
    │   │   │   ├── Roboto-LightItalic.ttf
    │   │   │   ├── Roboto-Medium.ttf
    │   │   │   ├── Roboto-MediumItalic.ttf
    │   │   │   ├── Roboto-Regular.ttf
    │   │   │   ├── Roboto-RegularItalic.ttf
    │   │   │   ├── Roboto-Thin.ttf
    │   │   │   └── Roboto-ThinItalic.ttf
    │   │   └── image/
    │   │       └── logo.png
    │   ├── components/
    │   │   ├── Logo/
    │   │   │   ├── index.js
    │   │   │   └── styles.js
    │   │   ├── Input/
    │   │   │   ├── index.js
    │   │   │   └── styles.js
    │   │   ├── Header/
    │   │   │   ├── index.js
    │   │   │   └── styles.js
    │   │   └── Button/
    │   │       ├── index.js
    │   │       └── styles.js
    │   ├── config/
    │   │   └── ReactotronConfig.js
    │   ├── pages/
    │   │   ├── Login/
    │   │   │   ├── index.js
    │   │   │   └── styles.js
    │   │   ├── Menu/
    │   │   │   ├── index.js
    │   │   │   └── styles.js
    │   │   ├── Repositories/
    │   │   │   ├── index.js
    │   │   │   └── styles.js
    │   │   ├── Repository/
    │   │   │   ├── index.js
    │   │   │   └── styles.js
    │   ├── routes/
    │   │   ├── components/
    │   │   │   ├── Drawer/
    │   │   │   │   ├── index.js
    │   │   │   │   └── styles.js
    │   │   │   └── Tabs/
    │   │   │       ├── index.js
    │   │   │       └── styles.js
    │   │   ├── menu.routes.js
    │   │   ├── repository.routes.js
    │   │   └── tabs.routes.js
    │   ├── schemes/
    │   │   ├── index.js
    │   │   └── Products.scheme.js
    │   ├── services/
    │   │   ├── api.js
    │   │   ├── navigation.js
    │   │   └── realm.js
    │   ├── store/
    │   │   ├── modules/
    │   │   │   ├── common/
    │   │   │   │   ├── actions.js
    │   │   │   │   └── reducer.js
    │   │   │   ├── login/
    │   │   │   │   ├── actions.js
    │   │   │   │   ├── reducer.js
    │   │   │   │   └── sagas.js
    │   │   │   ├── menu/
    │   │   │   │   ├── actions.js
    │   │   │   │   ├── reducer.js
    │   │   │   │   └── sagas.js
    │   │   │   ├── repositories/
    │   │   │   │   ├── actions.js
    │   │   │   │   ├── reducer.js
    │   │   │   │   └── sagas.js
    │   │   │   ├── rootReducer.js
    │   │   │   └── rootSaga.js
    │   │   └── index.js
    │   ├── styles/
    │   │   ├── colors.js
    │   │   ├── general.js
    │   │   ├── index.js
    │   │   └── colors.js
    │   ├── utils/
    │   │   ├── formats.js
    │   │   ├── exceptions.js
    │   │   └── index.js
    │   ├── index.js
    │   └── routes.js
    ├── .editorconfig
    ├── .eslintrc.json
    ├── .gitignore
    ├── .gitattributes
    ├── .npmignore
    ├── .prettierrc.js
    ├── app.json
    ├── dependencies.json
    ├── devDependencies.json
    ├── index.js
    ├── LICENSE
    ├── package.json
    ├── react-native.config.js
    └── README.md

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

    Instalação

    1. Para instalar e utilizar esse template o processo é bem simples, basta criar um projeto novo utilizando o comando:
    react-native init AwesomeExample --template andersonfrfilho
    1. 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 exceto a parte do navigation que segue com as seguintes alterações.


    Passo Adicional no Android

    dependencies section in android/app/build.gradle:

    Copy

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

    Para que os gestos sejam habilitados no Android é necessário um passo a mais, que é bem simples, abra o arquivo android/app/src/main/java/<pacote_do_projeto>/MainActivity.java, e comece importando os pacotes como abaixo:

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

    import com.facebook.react.ReactActivity;
     
     
    public class MainActivity extends ReactActivity {
     
      @Override
      protected String getMainComponentName() {
        return "Example";
      }
     
      @Override
      protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(thisgetMainComponentName()) {
          @Override
          protected ReactRootView createRootView() {
           return new RNGestureHandlerEnabledRootView(MainActivity.this);
          }
        };
      }
    }

    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 para armazenar imagens e recursos do projeto em geral que possam ser utilizadas na aplicação, esse diretório pode ser renomeado para, assim é possível ter um diretório para guardar todo tipo de arquivo, e não apenas imagens;

        • fonts - Arquivo contendo as fonts que serão utilizadas no projeto para linka-las ao projeto abra o cmd na raiz do projeto e execute o comando react-native link;

          • Roboto-Black.ttf - Font utilizada no template;

          • Roboto-BlackItalic.ttf - Font utilizada no template;

          • Roboto-Bold.ttf - Font utilizada no template;

          • Roboto-BoldItalic.ttf - Font utilizada no template;

          • Roboto-Light.ttf - Font utilizada no template;

          • Roboto-LightItalic.ttf - Font utilizada no template;

          • Roboto-Medium.ttf - Font utilizada no template;

          • Roboto-MediumItalic.ttf - Font utilizada no template;

          • Roboto-Regular.ttf - Font utilizada no template;

          • Roboto-RegularItalic.ttf - Font utilizada no template;

          • Roboto-Thin.ttf - Font utilizada no template;

          • Roboto-ThinItalic.ttf - Font utilizada no template;

        • images - Arquivo contendo as imagens para ser usado na aplicação;

          • logo.png - Arquivo de imagem de exemplo para ser utilizado na aplicação;
      • components - Diretório para guardar os components utilizados e compartilhados na aplicação;

        • Button - Exemplo de component de button para ser utlizado na aplicação;

          • index.js - Arquivo contendo o conteudo e as estilizações importadas do arquivo styles;

          • styles.js - Arquivo de componentes estilizados pelo o styled components;

        • Header - Exemplo de component de Header para ser utlizado na aplicação;

          • index.js - Arquivo contendo o conteudo e as estilizações importadas do arquivo styles;

          • styles.js - Arquivo de componentes estilizados pelo o styled components;

        • Input - Exemplo de component de Input para ser utlizado na aplicação;

          • index.js - Arquivo contendo o conteudo e as estilizações importadas do arquivo styles;

          • styles.js - Arquivo de componentes estilizados pelo o styled components;

        • Logo - Exemplo de component de logo para ser utlizado na aplicação;

          • index.js - Arquivo contendo o conteudo e as estilizações importadas do arquivo styles;

          • styles.js - Arquivo de componentes estilizados pelo o styled components;

      • 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;

        • ReactotronConfig.js - Arquivo contendo a configuração do Reactotron, com os Plugins reactotron-redux e reactotron-redux-saga, para ser usado na aplicação;
      • pages - 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 é Main, 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 de dois arquivo index.js e styles.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;

          • styles.js - Arquivo com todos os components estilisados;

        • Menu - Diretório exemplo de uma página cujo nome é Main, 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 de dois arquivo index.js e styles.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;

          • styles.js - Arquivo com todos os components estilisados;

        • Repositories - Diretório exemplo de uma página cujo nome é Main, 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 de dois arquivo index.js e styles.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;

          • styles.js - Arquivo com todos os components estilisados;

        • Repository - Diretório exemplo de uma página cujo nome é Main, 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 de dois arquivo index.js e styles.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;

          • styles.js - Arquivo com todos os components estilisados;

      • routes - Diretório responsavel por guardar as rotas dos projetos podendo, estas ter ou não um componente próprio que também terão um index.js e um styles.js;

        • components.js - Diretório responsavel por guardar os componentes de navegação se nescessario;

          • 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;

          • styles.js - Arquivo com todos os components estilisados;

        • menu.routes.js - Arquivo com exemplo na utilização de rotas;

        • repository.routes.js - Arquivo com exemplo na utilização de rotas;

        • tabs.routes.js - Arquivo com exemplo na utilização de rotas;

      • schemes - Diretório responsavel por guardar os esquemas de banco de dados local visando a utilização do realm-DB contém os arquivos index.js e um de exemplo de squema de banco products.scheme.js;

        • index.js - Arquivo contendo index e exportando as configurações dos squemas de db;

        • products.scheme.js - Arquivo com exemplo na utilização de esquemas;

        • tabs.routes.js - Arquivo com exemplo na utilização de rotas;

      • 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.js - Arquivo 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;

        • navigation.js - Arquivo com a configuração da biblioteca Navigation para a configuração de serviço de roteamento da aplicação;

        • realm.js - Arquivo com a configuração da biblioteca Realm-DB para a configuração de banco de dados locais;

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

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

          • common - Diretório responsável por conter actions e reducer comuns compartilhados pela a aplicação visando deixar a aplicação menos verbosa com funções de actionLoading,actionSuccess e actionFailure;

            • action.js - Arquivo responsável por conter as actions comuns compartilhadas no projeto;

            • reducer.js - Arquivo responsável por conter os estados e compartilha-los entre a aplicação deles loading,message,error;

          • login - Diretório responsável por conter actions e reducer do módulo de login;

            • action.js - Arquivo responsável por conter as actions comuns compartilhadas no projeto;

            • reducer.js - Arquivo responsável por conter os estados e compartilha-los entre a aplicação;

            • sagas.js - Arquivo responsável por conter as regras de negócio que utilizam informações externas como chamadas a api todas a funções assincronas ou sincronas dependendo a utilização;

          • menu - Diretório responsável por conter actions e reducer do módulo de login;

            • action.js - Arquivo responsável por conter as actions comuns compartilhadas no projeto;

            • reducer.js - Arquivo responsável por conter os estados e compartilha-los entre a aplicação;

            • sagas.js - Arquivo responsável por conter as regras de negócio que utilizam informações externas como chamadas a api todas a funções assincronas ou sincronas dependendo a utilização;

          • repositories - Diretório responsável por conter actions e reducer do módulo de login;

            • action.js - Arquivo responsável por conter as actions comuns compartilhadas no projeto;

            • reducer.js - Arquivo responsável por conter os estados e compartilha-los entre a aplicação;

            • sagas.js - Arquivo responsável por conter as regras de negócio que utilizam informações externas como chamadas a api todas a funções assincronas ou sincronas dependendo a utilização;

          • rootReducer - Arquivo destinado a centralizar os Reducers da aplicação para padronização na estrutura relacionada ao Redux;

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

        • 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;

      • styles - Diretorio responsavel por conter todos os stilos globais compartilhados entre a aplicação destes como colors, responsaveis pelas cores utilizadas na aplicação, general, funções comuns entre os components e metrics, são as medidas compartilhadas padrões da aplicação;

        • colors.js - Arquivo com as cores compartilhadas no projeto essas cores podem ser disponiveis no pigment picker, adobe colors que são ótimos combinadores;

        • general.js - Arquivo com funções se nescessario;

        • metrics.js - Arquivos com as medidas padrões da aplicação;

        • index.js - Arquivo de centralização das funções e propriedades do arquivo colors;

      • utils - Diretorio responsavel por conter todos as funções uteis para o projeto como formato de hora e de moeda ou funções de exceção, estas estão contidas nos arquvios exceptions e formats ;

        • exceptions.js - Arquivo funções de exceção dentre elas estão newExcepction que fara uma nova exceção onde não esta disponivel ou uma exceção legitma e a verifyException, onde sera verificado o motivo e retornado o erro;

        • formats.js - Arquivo com funções de formatos nacionais como tempo, data e moeda;

        • index.js - Arquivo de centralização das funções e propriedades dos arquivos;

      • 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__;

    • 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;

    • dependencies.json - Arquivo contendo apenas um objeto com a lista de dependências que devem ser instaladas na aplicação, vale lembrar que as dependências que já vem por padrão no projeto como react e react-native não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;

    • devDependencies.json - Arquivo contendo apenas um objeto com a lista de dependências de desenvolvimento que devem ser instaladas na aplicação, vale lembrar que as dependências de desenvolvimento que já vem por padrão no projeto como @babel/core, @babel/runtime, entre outras, não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;

    • 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.

    Publicação

    Para publicar um template como esse, o processo é bastante simples e rápido.

    1. Crie uma conta no site do NPM;

    2. Com a conta criada execute o comando abaixo e insira suas credenciais;

    npm login
    1. 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, o name e o version, que são os únicos que tem restrições, seguem abaixo as restrições:

      1. O name sempre deve começar com o prefixo react-native-template- seguido do nome do seu template;
      2. 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;
      3. O name deve ser único, não podendo ser igual ao de um template já publicado;
      4. 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, a version deve ser diferente e superior a versão atual, por exemplo, 0.0.2;
    2. Após configurar corretamente o package.json basta executar no terminal/prompt o comando npm publish;

    3. 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.

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

    Licença

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

    Contato

    Anderson - Github - andersonfrfilho@gmail.com

    Install

    npm i react-native-template-andersonfrfilho

    DownloadsWeekly Downloads

    20

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    2.18 MB

    Total Files

    75

    Last publish

    Collaborators

    • avatar