Este projeto tem como objetivo mostrar uma sugestão de estrutura de pastas para um projeto em react de múltiplo propósito. A estrutura inicial parte do Create React App, é uma base extremamente versátil e utilizada na comunidade.

Uma das características mais interessantes de trabalhar com uma biblioteca como o react é ter a liberade de adotar inúmeras estruturas de acordo com o objetivo proposto. Este projeto é uma sugestão de uma estrutura que escala bem e é ótimo para projetos comerciais.

Segue abaixo uma listagem das pastas que estão a nível da raiz /src do projeto, assim como uma descrição do objetivo da mesma. Estas estruturas podem ter subpastas, as mesmas serão descritas em subtópicos.

A pasta onde se localiza arquivos de detalhes da aplicação.

A pasta onde se localiza a maior quantidade de componentes React do projeto.

Seção de componentes focada em formulários.

Exemplo: Input de texto, input de número e wrapper/containers de formulários.

Seção de componentes focada em layout.

Exemplo:

• Layout/Wrapper da área publica do sitema (que contém Login / Esqueci minha senha/Primeiro cadastro e afins);
• Layout/Wrapper da área restrita do sistema (que contém Dashboard / Páginas internas e afins)

Seção de componentes focada em elementos comuns e reutilizáveis em todo sistema.

Exemplo: Botões, Janelas/Modal, Menu, Linha do tempo, Cards, Tabelas;

Pasta para componentes reutilizáveis em um contexto. Esta seção somente comporta múltiplos diretórios.

Pasta de componentes de um contexto.

Exemplo:

Arquivos JSON que tenham grandes coleções de constantes utilizadas no projeto.

Exeplo de arquivos encontrados aqui:

• endpoints.js como a relação de endpoints que a aplicação acessa;
• menu.js como a relação das opções disponíveis no menu;
• routes.js como a relação de rotas disponíveis no sistema;

Arquivos javascript que exportam hooks úteis e comuns na aplicação.

Exemplo de arquivos encontrados aqui:

• useNetwork.js como um hook para verificar o status da internet;
• usePortal.js como um hook para facilitar o uso do React Portal;
• useScroll.js como um hook para facilitar o uso do acompanhamento do scroll do usuário;

Neste diretório ficam arquivos relacionados a funções ou metodos que auxiliam ou automatizam tarefas.

Neste diretório ficam arquivos relacionados a internacionalização das pages.

Exemplo de arquivos encontrados aqui:

• en.json um arquivo json titulos, subtitulos, preview em inglês;
• es.json um arquivo json titulos, subtitulos, preview em espanhol;

Arquivos jsx que exportam componentes referentes a uma paginas a ser renderizada pelo navegador em uma rota especifica.

O diretório Store é onde fica armazenada toda a gerência de estado da aplicação. Nela são armazenados os ducks e os sagas. É interessante salvar cada duck e sagas em seu diretório correspondente, por exemplo:

• auth/auth.ducks.js esse arquivo javascript é responsável por exportar as actions, reducer e os types referentes a autenticação;
• auth/auth.sagas.js esse arquivo javaScript é responsavel por exportar funcões que fazem sentido no dominio do login, como por exemplo, signIn;

Arquvios javascript que exportam conexões com API's. Como por exemplo:

• api.js se refere a api consumida pelo front end;
• webSocket.js se refere ao sonsumo de algum websocket pelo front end;
• otherAPI.js se refere a qualquer outra API de terceiros por exemplo API do google

Arquivos que servem como um Wrapper para toda a aplicação. Como por exemplo:

• ThemeProvider é um provedor de tema para a aplicação;
• IntlProvider é um provedor de internacionalização para a aplicação;