Organização de projetos

Práticas

1. Componentes de Apresentação
2. Componentes Container
3. Hooks Personalizados
4. Serviços
5. Estado Global: Ferramentas como Redux, MobX, ou a própria Context API do React, são usadas para gerenciar estados que precisam ser compartilhados entre muitos componentes, não cabendo em um único componente ou em uma simples propagação de props. Essas ferramentas ajudam a centralizar a gestão de estado e podem oferecer mais recursos como middleware para lidar com efeitos colaterais.
6. Diretórios e Estrutura de Arquivos: Organizar os arquivos em diretórios bem pensados pode ajudar na manutenção. Uma estrutura comum pode incluir diretórios para componentes, hooks, serviços, e estado (como stores, se usando Redux). Além disso, a separação de páginas e componentes reutilizáveis pode ajudar a encontrar rapidamente as partes necessárias do código.

Exemplo de estrutura de diretório:

/src
  /components
    /Button
    /Card
  /containers
    /UserList
  /hooks
    useUserData.js
  /services
    apiService.js
  /state
    /user
      actions.js
      reducer.js
  /pages
    HomePage.js
    AboutPage.js

Essa abordagem mantém cada parte do sistema clara e responsável por uma função específica, ajudando tanto na manutenção quanto na escalabilidade da aplicação.