Photo by Randy Fath on Unsplash

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!

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
  • 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
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

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 deixei ai nos comentários 💬

Se gostou, dê 1 ou 50 claps 👏

Obrigado pela leitura!

Me acompanhe por ai! 😜

Senior Software Engineer | React enthusiast | Love traveling and Mountain Bike. See more about me — vinniciusgomes.dev

Senior Software Engineer | React enthusiast | Love traveling and Mountain Bike. See more about me — vinniciusgomes.dev