Executando verificação de segurança...
2

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!

Carregando publicação patrocinada...
1

Eu particularmente gosto desta estrutura, e utilizo algo semelhante. Exceto pela estrutura da pasta public e models. Mas no geral, esse pattern é bem completo.

1

Muito interessante tudo isso que você passou, de verdade!

Algo que sempre me incomoda quando estou em algum projeto é a estrutura das pastas e arquivos do projeto e, sempre que posso estou me reinventando para achar a estrutura que mais se encaixa na minha visão.

Vou tentar seguir seu estilo no próximo projéto e ver como eu me adapto nele, muito obrigado por compartilhar isso!