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.

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:

1components
2|-- YourComponent
3   |-- YourComponent.tsx
4   |-- YourComponent.stories.tsx
5   |-- YourComponent.spec.tsx
6   |-- interfaces.ts
7   |-- styles.ts
8   |-- index.ts
9...

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:

1pages
2|-- YourPage
3   |-- components/
4   |-- YourPage.tsx
5   |-- YourPage.spec.tsx
6   |-- interfaces.ts
7   |-- styles.ts
8   |-- index.ts
9...

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.