Há muitas formas de se estruturar e organizar uma aplicação em React e temos muita liberdade para fazermos da forma como acharmos melhor.

Uma das coisas que temos que ter em mente quando iniciamos um novo projeto, é ter uma noção de como esse projeto vai se expandir, se ele vai ser um projeto de grande duração e com muitas interações, muitas páginas, muitos componentes, muitas chamadas de api.

Ou, se ele vai ser um projeto pequeno, com poucas páginas, poucos componentes e que consuma poucos serviços.

Tendo isso em mente, podemos pensar em uma estrutura de diretórios que faça sentido ao tamanho do projeto e também pensar nas tecnologias adequadas para a nossa necessidade.

As tecnologias que eu costumo usar para desenvolver com React são:

• Create React App ou NextJS (Criar a aplicação)
• Styled Components (Estilização dos componentes)
• TypeScript (Melhora o código com a tipagem)
• Storybook (Criação e documentação dos componentes)
• Redux, Redux Toolkit ou Context API (Gerenciar o estado global)
• Prettier (Formatação de código)

Dependendo do projeto eu faço algumas variações dessas tecnologias, mas acho que para todo tipo de projeto o Styled Components é essencial.

Para estruturação de diretórios eu costumo criar as pastas de arquivos dentro da pasta /src, ficando assim:

/src
  ├─ /components
  ├─ /context
  ├─ /hooks
  ├─ /pages
  ├─ /services
  ├─ /store
  ├─ /styles
  ├─ /utils

• /components:
  Todos os componentes que estão sendo usados em 2 ou mais páginas

• /context:
  Para armazenar a Context API (se eu estiver usando)

• /hooks:
  Coloco todos os Custom Hooks

• /pages:
  Aqui fica todas as páginas da aplicação

• /services:
  Aqui coloco todos os módulos, ou algumas chamadas externas

• /store:
  Caso eu use o Redux, Redux Toolkit

• /styles:
  Estilos globais e temas do Styled Components

• /utils:
  Scripts helpers que podem ajudar (máscaras de formatação e etc)

  
  

Como organizar os componentes

Dentro da pasta /components, eu crio uma subpasta para cada componente separadamente:

/components
    ├─ /Heading
    │  ├─ index.tsx
    │  ├─ styled.ts
    │  ├─ stories.tsx
    ├─ /Footer
    │  ├─ index.tsx
    │  ├─ styled.ts
    │  ├─ stories.tsx

Note que nesse exemplo eu estou usando o TypeScript, por isso os arquivos estão com a extensão .ts e .tsx.

Caso queria implementar testes nos componentes, minha recomendação é criar um arquivo test.ts dentro do diretório do próprio componente.

Como organizar as páginas

Para as páginas, sigo basicamente a mesma estrutura usada para os componentes, com pequenas alterações:

/pages
    ├─ /Home
    │  ├─ index.tsx
    │  ├─ styled.ts
    ├─ /About
    │  ├─ index.tsx
    │  ├─ styled.ts

Nesse caso, tenho apenas uma index.tsx que é a própria página e um arquivo styled.ts para estilizar ela.

Conclusão

E chegamos ao fim desse post.😁

Essa é a organização e estruturação que eu uso para os meus projetos em React, e funciona muito bem tanto em projetos menores quanto em projetos maiores.

Até mais!👋