[ Tips ] - Estruturando as camadas de uma arquitetura React
Tags: react, architecture, develop, frontend
Published: 2020-09-18 13:53:34

Recentemente tenho trabalhado com alguns projetos com arquiteturas bem confusas, aqui quando me refiro a arquitetura eu falo sobre a estruturação das camadas de dependência da aplicação.

Sendo assim, trabalhando com umas camadas especificas, tais como, camadas de serviços, camadas de componentes (sendo dois tipos específicos), camada para suas views/pages e por fim uma camada de Store para o seu gerenciador de estados.

Vamos entender o que são essas "camadas".

## **Camadas de Serviços**

Basicamente vai conter tudo que for responsável por serviços de requisição de serviços externos, aqui podemos configurar nosso axios, por exemplo, e todos os requests que envolvem nossa aplicação.

## **Camada de pages/views**

Eu digo das duas formas pois ambas tem a mesma responsabilidade que é renderizar sua pagina, mas porque eu vejo view em uns projetos, page em outros e as vezes os dois?
Bom vamos partir do propósito delas existirem:

-  **Pages** é basicamente para você colocar sua pagina quando ela estiver finalizada sem logica de requests ou manipulação de eventos, somente um componente sem estado.
- **View** normalmente é usada pra montar sua página, onde encontramos vários componentes, manipulação de estado, eventos e requests.

Tem quem use as duas camadas e tem quem use somente a pages, como no framework do Nextjs, que precisa ter obrigatoriamente uma pasta pages para que ele encontre as rotas de cada página criada.
Mas não se preocupe, o uso de ambas ou somente pages não estará errado.

## **Camadas de Componentes**

Essa parte é a que mais deixa dúvidas na nossa cabeça, sempre temos a imagem da pasta `components` e colocamos tudo que é components lá nessa pasta, mas pare pra pensar, se você tem componentes StateLess e StateFull, faz realmente sentido ter tudo isso dentro de uma unica pasta? Leve em consideração que se você tiver um projeto com 10 páginas e cada página tem no minimo 5 componentes, estaremos trabalhando com 50 arquivos .js/.jsx/.ts/.tsx dentro de uma única pasta.

Sendo que o conceito básico do React é basicamente a componentização e a fácil manipulação deles, além de reagir ao estado.

Vamos organizar isso então:

**1º Passo:** A nossa organização vai partir por separar o que pode ser reaproveitado e o que não pode.

**2º Passo:** Na sua pasta pages crie uma pasta para essa página e dentro dela crie uma também chamada de `components`, dentro dessa pasta coloque somente componentes que serão usados somente por essa página (que não são reutilizáveis).

**3º Passo:** Na pasta de `components` que está no mesmo nível da `pages` deixe somente o que for reutilizável, por exemplo, _loader_, _toast_, _modal_, ... 

Pronto, seguindo esses três passos temos uma boa estruturação e uma facil manipulação desses components caso a gente queira desacoplar uma página não precisaremos "caçar" os seus respectivos componentes.

## **Camada de Store (Gerenciamento de estados)**

Bom, no mercado atual temos diversas libs que fornecem esse serviço de gerenciamento, seja< Redux-thunk, Redux-Saga, MobX, Redux-Relay, entre outros, crie uma pasta no mesmo nível de `pages` e `components` do projeto com essas configurações.

## **Bônus**

Podemos ter também camadas para utils, que serão utilitários na sua aplicação, arquivos que fazem tratativas em algum trecho do seu projeto, por exemplo, conversão de moeda.

Podemos ter a camada de Helpers, que pode manipular [Error Boundaries](https://pt-br.reactjs.org/docs/error-boundaries.html) entre outras coisas que são para ajuda no seu projeto.

Podemos ter a camada de `assets` que vai ser onde vai conter suas imgs, fonts e arquivos de estilização.

Podemos ter uma camada para tratar rotas publicas e privadas, se sua aplicação necessitar.

Podemos ter uma camada para `Middlewares`, se sua aplicação necessitar.

Mas sempre se lembre de não deixar suas camadas com dependência direta de outra camada.

Basicamente esse será nosso resultado final:

![Tree Arch](https://dev-to-uploads.s3.amazonaws.com/i/9yqo6huf36w1skork5ut.PNG)