Organização de Projeto em React

Diretórios Principais

📂 root
├──📁 **public** 
├──📁 src - Pasta raiz da aplicação.
│   ├──📁 assets 
│   ├──📁 components 
│   ├──📁 config 
│   ├──📁 hooks
│   ├──📁 pages/containers
│   │   └──📁 Login
│   │       ├──📄 index.tsx
│   │       └──📄 styles.js ou .ts
│   ├──📁 services
│   │   └──📄 api.js ou .ts
│   ├──📁 store
│   ├──📁 styles 
│   │   ├──📄 GlobalStyles.js .ts
│   │   └──📁 themes 
│   │       ├──📄 Dark.js ou .ts
│   │       ├──📄 Light.js ou .ts
│   │       └──📄 index.js ou .ts - Centraliza as importações dos temas.
│   ├──📁 utils 
│   ├──📄 main.tsx - Ponto de entrada principal da aplicação.
│   ├──📄 routes.tsx - Configuração das rotas da aplicação.
│   └──📄 vite-env.d.ts
├──📄 .gitignore
├──📄 index.html
├──📄 package.json
├──📄 package-lock.json
├──📄 README.md
└──📄 vite.config.ts

📁 A Essência do Projeto: src

Essa é a parte central do nosso projeto, onde todo o código-fonte fica. Dentro dele, temos diversas pastas importantes que desempenham papéis específicos.

🌟 assets - Destinada ao armazenamento de recursos estáticos que serão incorporados diretamente no código da sua aplicação.

🧩 components - Reúna componentes reutilizáveis que são compartilhados em várias partes da aplicação, promovendo a reutilização e a manutenção simplificada. Se um componente for destinado apenas a uma página específica, você pode organizá-lo dentro do diretório daquela página.

🛠️ config - Contém arquivos de configuração, plugins, extensões e constantes globais. Tudo o que você precisa para configurar sua aplicação.

🎣 hooks - Se você utiliza React Hooks personalizados, esta pasta é onde eles devem ser armazenados. Torna a lógica reutilizável e fácil de manter.

📃 pages - A pasta pages é um ponto crucial. Cada página da sua aplicação deve ter seu próprio diretório aqui, contendo pelo menos um arquivo index.tsx para a lógica da página e, se necessário, um arquivo style.tsx para estilos específicos.

🌐 services - Seu código de serviços e chamadas de API deve ser organizado nesta pasta para manter as interações com serviços externos bem estruturadas.

🧬 store - Se você estiver usando Redux ou outra solução de gerenciamento de estado global, esta pasta é o lugar certo para configurá-la. Mantenha tudo relacionado ao estado global organizado aqui.