Estrutura para projetos React

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!