Cra-template-evocorp NPM

Tabela de Conteúdo

Sobre o Projeto

Este projeto visa a criação de um template que possa ser utilizado no momento da criação de novos projetos utilizando React JS, visto que o processo de instalação, configuração das libs e a definição de um padrão na montagem da entrutura de pastas 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 - O React é um framework que permite o desenvolvimento de aplicações web 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 Router (Dom) - O React Router (Dom) surgiu da necessidade de uma lib completa para controle de rotas de maneira fácil de usar e configurar, e escrita em JavaScript;
Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;
Antd - O Ant Design é uma famosa lib que contém um conjunto de componentes de alta qualidade para criar interfaces de usuário interativas e ricas;
- Antd Design Pro - O Ant Design Pro é uma solução pronta para produção para interfaces administrativas. Com base nos princípios de design desenvolvidos pelo Ant Design;
Dayjs - O Day.js é uma biblioteca JavaScript minimalista que analisa, valida, manipula e exibe datas e horas para navegadores modernos com uma API amplamente compatível com Moment.js. Se você usa o Moment.js, já sabe como usar o Day.js;
Reactotron - O Reactotron é um app Desktop para inspecionar projetos em React ou React Native. Está disponível para macOS, Linux e Windows;
- reactotron-react-js - Plugin para configurar o Reactotron para se conectar ao projeto React;
- 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-plugin-root-import - Esse plugin do Babel permite que sejam feitos imports e requires em caminhos baseados em uma raiz(root);
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, siga os passos abaixo.

Pré-requisitos

Antes de seguirmos para as configurações e uso do template, é ideal que você tenha algum conhecimento prévio sobre o Create React App.

O Create React é uma maneira oficialmente suportada de criar aplicativos React. Ele oferece uma configuração de compilação moderna, quase sem nenhuma configuração necessária.

Para isso você pode acessar o link da documentação abaixo:

Create React App

Estrutura de Arquivos

A estrutura de arquivos está da seguinte maneira:

my-app
├── node_modules/
├── public/
│   └── ...
├── src/
│   ├── assets/
│   │   └── images/
│   │       └── logo.svg
│   ├── components/
│   │   └── index.js
│   ├── config/
│   │   ├── ReactotronConfig.js
│   │   └── LocaleConfig.js
│   ├── constants/
│   │   ├── index.js
│   │   └── urls.js
│   ├── helpers/
│   │   └── index.js
│   ├── pages/
│   │   ├── Main/
│   │   │   ├── index.js
│   │   │   └── styles.module.css
│   │   └── NotFound/
│   │       └── index.js
│   ├── services/
│   │   ├── api.js
│   │   └── index.js
│   ├── store/
│   │   ├── ducks/
│   │   │   └── index.js
│   │   ├── sagas/
│   │   │   └── index.js
│   │   └── index.js
│   ├── styles/
│   │   ├── colors.js
│   │   ├── images.js
│   │   └── index.js
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── routes.js
├── .editorconfig
├── .env.example
├── .prettierrc.js
├── config-overrides.js
├── jsconfig.json
├── package.json
├── README.md
└── yarn.lock

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 create-react-app my-app --template evocorp

Com isso o projeto será criado com todas as dependências do template devidamente instaladas em suas respectivas versões mais recentes, tal como os arquivos de configuração que são copiados para o projeto.

Para executar o projeto basta navegar até a pasta do projeto e executar o comando:

yarn start

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 - Esse diretório nos permite trabalhar com arquivos extras a nossa aplicação, como as nossas imagens ou fonts, etc;
  - images -Diretório para armazenar imagens em geral que possam ser utilizadas na aplicação. Como por exemplo, a logo da sua aplicação;
- components - Diretório onde é localizado todos os componentes criados da aplicação. Qualquer componente que seja reutilizado mais de uma vez em lugares diferentes no código será armazenado neste diretório;
- 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 localização do Dayjs;
  - LocaleConfig.js - Arquivo contendo a configuração de localização do DayJS e do Antd, configurando todos os componentes para o português (pt-br);
  - ReactotronConfig.js - Arquivo contendo a configuração do Reactotron, com os Plugins reactotron-redux e reactotron-redux-saga, para ser usado na aplicação;
- constants - Diretório para armazenar todas as constantes utilizadas na aplicação. Como por exemplo, urls ou chaves;
  - urls.js - Este arquivo contêm todas as urls chamadas. Como chamadas à APIs. E a BASE_URL utilizada pelo Axios, inclusive;
- helpers - Neste diretório ficam todos os arquivos com funcionalidades para auxiliar o desenvolvimento, como funções de conversão e funções específicas para pacotes;
- pages - Diretório onde ficam as páginas da aplicação, como forma de padronização e boas práticas toda página fica dentro de um diretório com seu nome;
  - Main - 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 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 (via Hooks) para acessar o State global e as Actions criadas nos Ducks;
    - styles.module.css - Arquivo contento todo os estilos css da página. Foi adotado para estilização, o padrão Css Modules, por possuir a característica de não funcionar de maneira global e duplicar o css de uma página para outra. Leia mais sobre Css Modules neste Link: Css Modules;
  - NotFound - Diretório exemplo de uma página cujo nome é NotFound, logo é a página referente a rota 404. Qualquer rota não existente ou disponível na aplicação será redirecionada para aqui;
- services - Diretório onde serão criados os arquivos relacionados a serviços utilizados na aplicação, por exemplo, requisições HTTP, armazenamento de dados no localStorage do Browser 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 na BASE_URL é apenas um exemplo. Você pode alterá-lo no diretório de contants/urls.js; Tanto o endereço de PRODUÇÃO quanto de DESENVOLVIMENTO;
- 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();
  - 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;
- styles - Diretório utilizado para guardas todos os estilos utilizados na aplicação. Desde cores há imagens;
  - colors.js - Arquivo utilziado para exportar todas as cores que serão utilizadas na aplciaçaõ;
  - images.js - Arquivo destinado para exportar a url (require) de todas as imagens que ficam armazenadas no diretório assets/images;
- App.js - Arqquivo raiz da pasta src. Onde é 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, e inicializadas as configurações do Reactotron e Locale, 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;
- index.css - Arquivo contento os estilos globais da aplicação. Com por exemplo a fonte utilizada globalmente;
- index.js - Arquivo responsável por centralizar o código do diretório src;
- routes.js - Arquivo com as configurações de navegação da aplicação, nele são criadas todas as rotas disponibilizados na aplicação utilizando a biblioteca React Router (Dom);
.editorconfig - 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;
.env.example - Arquivo de configuração das variáveis de ambiente. Por padrão vem com a configuração BROWSER=none, isso evita que a cada vez que o projeto seja iniciado (yarn start) seja aberta uma nova aba no browser. Renomeio para .env para habilitar. Fique livre para adicionar quantas variáveis forem necessárias.
.prettierrc.js - Arquivo de configuração do ESlint de acordo com o Prettier;
config-overrides.js - Arquivo utilizad para alterar as configurações do webpack no create-react-app;
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.

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, 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 cra-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;
Em seguida, deve-se criar um arquivo denominado template.json. Neste arquivo ficará todas as suas dependencies dentro de um objeto denominado package;
Depois crie um diretório chamado de template. Neste diretório será colocado todo o código que será copiado para o projeto quando executado o comando npx create-react-app <nome_do_projeto> --template <nome_do_template>;
Após configurar corretamente o package.json basta executar no terminal/prompt o comando npm publish;
Com a publicação finalizada o template deve ficar disponível através do link https://www.npmjs.com/package/cra-template-<nome_do_template>.

Se tiver alguma dúvida referente ao processo de criação de um template utilizando o Create React App acesse o link da documentação oficial logo abaixo.

Custom Templates