Este projeto visa a criação de um template que possa ser utilizado no momento de criação de projetos utilizando React, 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.
Abaixo segue o que foi utilizado na criação deste template:
- React - O React é uma biblioteca que permite o desenvolvimento de aplicações 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 comunidade do React de uma navegação de forma fácil de se usar, e escrita toda em Javascript;
- Styled Components - O Styled Components é uma biblioteca que permite criar escopos de estilização para os componentes;
- 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;
- Seamless Immutable - Integrado com Redux, seta o estado como imutável, ganhando performance e organizacao.
- Reactotron - O Reactotron é um app Desktop para inspecionar projetos em React ou React Native. Está disponível para macOS, Linux e Windows;
- 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;
- 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;
- 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;
- Jest - Biblioteca principal para testes da aplicação. Normalmente utilizando o conceito de Test Driven Development (TDD), são testados
os reducers, sagas, integrações, etc.
- Enzyme - Biblioteca para facilitar o processo de test utilizando DOM, no qual conseguimos importar os componentes JSX. Normalmente utilizado em testes end-to-end
- Enzyme-react-16 - Adaptar enzyme ao react 16
A estrutura de arquivos está da seguinte maneira:
react-test
├── src/
│ ├── __tests__
│ ├── components
├───├── config/
│ │ └── ReactotronConfig.js
│ ├── assets/images/
│ │ ├── logo.png
│ │ └── logo.svg
│ ├── pages/
│ │ └── Main/
│ │ └── index.js
│ ├── services/
│ │ └── api.js
│ ├── store/
│ │ ├── ducks/
│ │ │ └── index.js
│ │ ├── sagas/
│ │ │ └── index.js
│ │ └── index.js
│ ├── index.js
│ └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── index.js
├── setupTests.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md
Serão explicados os arquivos e diretórios na seção de Edição.
Nesta seção haverão instruções caso você queira editar o template, explicando para que os diretórios são utilizadas 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;-
tests- Diretório contento todos os arquivos destinados a testes da aplicação, os tests são realizados atraves das bibliotecas Jest e Enzyme;
-
Components - Diretório principal da aplicação contendo todos componentes. Para melhor organização a estrutura foi dividida da seguinte forma: nome da pasta (inicial maiuscula) > arquivo index.js (componente statefull ou stateless) e styles.js (css via 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
ereactotron-redux-saga
, para ser usado na aplicação;
- ReactotronConfig.js - Arquivo contendo a configuração do Reactotron, com os Plugins
-
images - Diretório para armazenar imagens em geral que possam ser utilizadas na aplicação, esse diretório pode ser renomeado para
assets
e dentro deassets
criar um novo diretório para guardar somente as imagens, assim é possível ter um diretório para guardar todo tipo de arquivo, e não apenas imagens; -
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;
-
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 para acessar o State global e as Actions criadas nos Ducks;
-
-
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;
-
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()
;
- 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
-
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;
-
-
index.js - Arquivo responsável por centralizar o código do diretório
src
, nele é inserido o HOC Provider doreact-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óriosrc
; -
routes.js - Arquivo com as configurações de navegação da aplicação, nele são criados os Navigator disponibilizados na biblitoeca 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__
;
-
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.
-
setupTest.js - Arquivo inicial de configuração do Enzyme para testes na aplicação, create-react-app identifica automaticamente esse arquivo antes de iniciar os testes.
Distribuído sob a licença MIT. Veja LICENSE
para mais informações.