Arquitetura para aplicações React

4 min readOct 7, 2021

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:

Print da estrutura de pastas da aplicação

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