Arquitetura para aplicações React
Hoje vou mostrar como crio a arquitetura das minhas aplicações front-end utilizando React, escalável e de uma forma organizada para ser de fácil entendimento e manutenção do código.
Mas antes…
Se você mora em uma caverna, deixa eu te explicar o que é React 👇
O ReactJS ou React é 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.
Agora de volta ao tópico!
⚠️ Uma informação importante:
O projeto de exemplo foi iniciado utilizando o create-react-app 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, vou te mostrar como estruturo minhas aplicações 🏗
O meu principal objetivo quando começo uma nova aplicação para um cliente, é de como eu vou deixar isso simples e fácil para os outros desenvolvedores do time.
E na minha opinião o melhor caminho para atingir esse objetivo é deixar tudo o mais simples e claro possível, o 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 dando voltas e voltas que deixava tudo bem confuso. E quando eu tinha que resolver algum problema eu perdia mais tempo tentando achar onde estava o arquivo do que corrigindo o bug em si.
Então eu começo pensando em como vou organizar meu File System, e o jeito que eu mais gosto de fazer é dessa forma:
Deixa eu te explicar o que é cada pasta:
- Common
Aqui estão todos os asstes do projeto que serão usados pelo aplicativo, como estilos globais, imagens, fontes, mocks, stories, funções reutilizáveis como máscaras, entre outros. - Components
Aqui vai ficar todos os componentes que são utilizados de uma forma global pela aplicação, componentes utilizados somente por uma página em específica vai ficar em outro lugar. - Configs
Aqui vai ficar todos os arquivos de configuração, que são utilizados de uma forma global pela aplicação. - Containers
Aqui vai ficar todos os nossos containers responsáveis por desacoplar a nossa aplicação de alguma biblioteca, possibilitando alterar as libs sem precisar mexer em varios lugares do código. - Hooks
Aqui eu gosto de deixar todos os hooks customizáveis da aplicação, por exemplo, um hook que cuida da sessão do usuário. - Pages
Como o próprio nome já diz, aqui vai ficar todas as páginas da nossa aplicação, ah e lembra que falei que os componentes utilizados somente por uma página ficariam em outro lugar?! Então, aqui é o lugar também, dentro de cada pasta de página vamos ter uma pasta components que contém todos os componentes exclusivos da página. - Routes
Aqui vai ficar todos os nosso arquivos que gerenciam as rotas da nossa aplicação. - Services
Nessa pasta fica todos os arquivos responsáveis por consumir serviços externos, como por exemplo o arquivo de configuração do axios para consumir APIs RestFul.
Agora vou te dar um exemplo de como fica a estrutura de uma pasta de componente:
components
|-- YourComponent
|-- YourComponent.tsx
|-- YourComponent.stories.tsx
|-- YourComponent.spec.tsx
|-- interfaces.ts
|-- styles.ts
|-- index.ts
...Dentro de cada pasta de componente eu gosto de criar os seguintes arquivos:
- Um arquivo responsável pelo componente:
YourComponent.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 - E um arquivo responsável por exportar o componente:
index.ts
E por último, como fica a pasta de uma página:
pages
|-- YourPage
|-- components/
|-- YourPage.tsx
|-- YourPage.spec.tsx
|-- interfaces.ts
|-- styles.ts
|-- index.ts
...Dentro de cada pasta de página eu gosto de criar os seguintes arquivos:
- Uma pasta responsável pelos componentes que só são utilizados naquela página, ah e essa pasta segue a mesma estrutura da pasta de componentes que mostrei acima 👆
- Um arquivo responsável pela página:
YourPage.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 - E um arquivo responsável por exportar a página:
index.ts
E é dessa forma que eu organizo 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.
Post sobre arquitetura de aplicações em Next.js.
Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe ai nos comentários 💬
Se gostou, dê 1 ou 50 claps 👏
Obrigado pela leitura!
Me acompanhe por ai! 😜
- Portfólio: vinniciusgomes.dev
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
