Estrutura para projetos React · Guvidaletti

Bom dia, devs!

Hoje estou aqui para compartilhar um pouco da minha experiência como desenvolvedor e saber um pouquinho sobre como vocês fazem, e aprender ainda mais com isso!

Fiquem à vontade para contestar ou corrigir qualquer coisa que eu tenha colocado aqui

Então, sempre achei meus projetos de ReactJS muito bagunçados, e onde trabalho eu tanto crio projetos novos como dou manutenção em projetos legados vim aqui exemplificar o que estou buscando fazer.

Saliento que estou utilizando ReactJS, Typescript e SCSS como base para essa solução.

Estrutura de pastas

src
- assets
  - icons
    
    Arquivos .tsx dos ícones (quando não importo de alguma biblioteca).
  - styles
    
    Meus arquivos de estilo, geralmente tenho um _constants.scss e um index.scss para os estilos globais da aplicação. Esse último eu só importo no arquivo index.tsx da minha aplicação, enquanto o primeiro eu importo em todos os outros arquvios scss, para compartilhamento de constantes.
- components
  - nomeComponente
    
    Arquivos .tsx e .scss do componente que será utilizado na aplicação.
- contexts
  - nome
    
    Arquivos nomeContext.tsx, nomeReducer.tsx e nomeValidator.ts para criação do Context e exportação dos valores iniciais do Provider; Reducer para quando o estado é muito complexo; e Validação (caso necessário). Posso compartilhar melhor essa escolha em outro post.
- hooks
  
  Arquivos .ts ou .tsx dos Hooks personalizados para uso em diversos lugares da ferramenta.
- libraries
  
  Arquivos (podendo ser separados por pastas) .ts contendo algumas constantes que serão utilizadas na aplicação inteira.
  Ex: permissões de usuários por tipo
- models
  
  Arquivos .ts contendo a tipagem, como DTOs de resposta esperados, objetos (em geral) que serão utilizados na aplicação.
- pages
  - nomePagina
    
    Arquivos .tsx e .scss de cada página da aplicação.
- routes
  
  Arquivo routes.tsx contendo as rotas da aplicação.
- services
  
  Arquivos .ts contendo as funções de chamada para a API. Procuro colocar o nome do método HTTP no inicio de cada função e retornar sempre uma Promise tipada para facilitar o uso futuro (nas páginas).
- utils
  
  Arquivos .ts utilitários para uso como máscaras, conversão de objetos, etc.
public
- assets
  
  Arquvios .json referente às variáveis de ambiente necessárias para a ferramenta chamar as respectivas APIs (Local, TST, HOM, PRE, PROD).
- mock
  
  Arquivos .json contendo os mocks que serão requisitados caso seja optado por utilizar algum mock

Ainda estou procurando as melhores maneiras de me organizar, mas ja considero isso um início. Fico à disposição para dúvidas! Valeu!