Arquitetura para aplicações React
A aproximadamente um ano atrás fiz um post falando sobre como eu criava a arquitetura das aplicações em React, porém já se passo um bom tempo, e já estava na hora de fazer um update naquela estrutura.
Esse post é para te mostrar a nova maneira como estou criando minhas aplicações React.
Mas antes…
Deixa eu te explicar o que é React 👇
O ReactJS é uma biblioteca JavaScript de front-end de código aberto para a construção de interfaces de usuário ou componentes de IU. É mantido pelo time de engenharia do Facebook e por uma comunidade de desenvolvedores individuais e empresas. Ela cresceu como uma das melhores bibliotecas nos últimos anos para o desenvolvimento de UI baseado em componentes.
É utilizando por grandes empresas no mercado como o próprio Facebook, Instagram, Uber, Netflix, Discord, Tesla, AirBnB entre outras.
⚠️ Uma informação importante:
O projeto de exemplo foi iniciado utilizando o create-react-app com o template do TypeScript que gera para nós um boilerplate básico, contendo na raiz arquivos como .gitinore, package.json, README.md, e também gera as pastas public e src, onde manteremos o código da aplicação. Então caso você tenha alguma dúvida, recomendo dar uma lida na documentação acessando aqui.
Bora para o que interessa!
A principal ideia por trás dessa estrutura, é possibilitar que a nossa aplicação se mantenha organizada mesmo em uma escala muito grande do projeto.
E para fazer isso, na minha opinião o melhor caminho para atingir esse objetivo é deixar tudo o mais simples e claro possível, e por onde começamos isso?! Pela organização e nomenclatura das pastas e arquivos.
Já tive a oportunidade de desenvolver projetos para muitas empresas de grande porte ao redor do mundo, e o que eu mais via nessas aplicações era um file system desorganizado e confuso. Quando eu tinha que resolver algum problema ou criar uma feature eu perdia mais tempo tentando achar onde estava o arquivo do que corrigindo o problema em si.
Para solucionar essa dor, eu criei essa estrutura de arquivos, que funciona muito bem e já foi validada em diversos projetos que desenvolvi durante esse ano, com times pequenos, até times mais complexos de empresas globais.
Minha estrutura segue esse padrão:
Deixa eu te explicar o que é cada pasta:
- Assets
Aqui estão todos os assets do projeto, que serão usados pelo aplicativo, imagens, fontes, mocks, entre outros. - Components
Aqui ficarão todos os componentes utilizados de uma forma global pela aplicação, componentes utilizados somente por uma página em específico ficará em outro lugar. - Configs
Aqui ficarão todos os arquivos de configuração, utilizados de uma forma global pela aplicação. - Context
Aqui ficarão todos os nossos contextos, responsáveis por armazenar e manipular os estados da aplicação. - Feature
Aqui é a cereja do bolo, porém essa pasta eu só utilizo em projetos que são realmente grandes ou quando não sabemos até onde o projeto pode chegar. A ideia da pasta feature é separar todos os códigos de uma funcionalidade específica, por exemplo, uma feature de Dashboard que contém vários componentes que só são utilizados lá, serviços exclusivos, hooks utilizados somente pela feature, entre outros. - Hooks
Aqui gosto de deixar todos os hooks customizáveis da aplicação, caso você não saiba o que é um hook, segue o link da documentação. - Layout
Aqui ficarão todos os nossos layouts que englobam nossa aplicação, por exemplo, um layout que renderiza a navbar e o conteúdo da tela. - Lib
Aqui ficarão todas as integrações com libs externas, por exemplo, o arquivo de configuração do Axios para chamadas HTTP. - Pages
Como o próprio nome já diz, aqui ficarão todas as páginas da nossa aplicação. - Routes
Aqui ficarão todos os arquivos que gerenciam as rotas da nossa aplicação. - Services
Nessa pasta ficarão todos os arquivos responsáveis por consumir serviços como, por exemplo, Analytics. - Styles
Nessa pasta ficarão todos os arquivos de estilos globais, como, por exemplo, arquivos de tema. - Utils
Nessa pasta ficarão todos os arquivos úteis da nossa aplicação como, por exemplo, uma função para formatar moedas ou data.
Agora vou te dar um exemplo de como fica a estrutura de uma pasta de componente:
components
|-- YourComponent
|-- YourComponent.stories.tsx
|-- YourComponent.spec.tsx
|-- interfaces.ts
|-- styles.ts
|-- index.tsx
...Dentro de cada pasta de componente gosto de criar os seguintes arquivos:
- Um arquivo responsável pelo componente:
index.tsx - Um arquivo para os stories do StoryBook:
YourComponent.stories.tsx - Um arquivo para testes:
YourComponent.spec.tsx - Um arquivo para as interfaces (Quando uso TypeScript):
interfaces.ts - Um arquivo para o styled-components:
styles.ts
Como fica a pasta de uma página:
pages
|-- YourPage
|-- components/
|-- index.tsx
|-- YourPage.spec.tsx
|-- interfaces.ts
|-- styles.ts
...Dentro de cada pasta de página gosto de criar os seguintes arquivos:
- Uma pasta responsável pelos componentes que só são utilizados naquela página. Ah! Essa pasta segue a mesma estrutura da pasta de componentes que mostrei acima 👆
- Um arquivo responsável pela página:
index.tsx - Um arquivo para testes:
YourPage.spec.tsx - Um arquivo para as interfaces (Quando uso TypeScript):
interfaces.ts - Um arquivo para o styled-components:
styles.ts
Uma observação importante, a pasta components, eu só utilizo caso não esteja com a organização de features, caso a pasta feature esteja criada, esses componentes ficarão dentro da feature Home por exemplo.
E por último, como fica a pasta de uma feature:
features
|-- YourFeature
|-- components/
|-- hooks/
|-- services/
|-- styles/
|-- index.tsx
|-- interfaces.ts
...E é isso!
É dessa forma que estou organizando minhas aplicações React 🤩
Ah e eu criei um repositório no GitHub com a estrutura completa, se você quiser dar uma olhada mais a fundo na estrutura é só clicar nesse link.
Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬
Se gostou, dê 1 ou 50 claps 👏
Obrigado pela leitura!
Me acompanhe por aí! 😜
- Portfólio: vinniciusgomes.com
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
