Nesse modelo de organização de arquivos em React, eu escolhi uma estrutura que funciona tanto para aplicações web quanto para aplicações nativas. Claro, existem algumas especificidades entre essas duas plataformas, mas a base é a mesma.
📂 project_root
├──📁 public - Contém recursos estáticos públicos que são servidos pela aplicação.
├──📁 src - Pasta raiz do código-fonte da aplicação.
│ ├──📁 assets - Armazena recursos estáticos como imagens, arquivos de fonte, etc.
│ ├──📁 components - Reúne componentes reutilizáveis do React usados na interface.
│ ├──📁 config - Armazena arquivos de configuração, plugins, extensões, constantes globais (por exemplo, Reactotron).
│ ├──📁 hooks - Local para armazenar hooks personalizados.
│ ├──📁 pages - Contém componentes que representam páginas da aplicação.
│ │ ├──📁 Base - Componente principal que organiza a estrutura da aplicação.
│ │ │ ├──📄 index.tsx
│ │ │ └──📄 styles.ts
│ │ ├──📁 Error
│ │ │ ├──📄 index.tsx
│ │ │ └──📄 styles.ts
│ │ └──📁 Login
│ │ ├──📁 ForgotModal - Componente específico de Login
│ │ │ ├──📄 index.tsx
│ │ │ └──📄 styles.ts
│ │ ├──📄 index.tsx
│ │ └──📄 styles.ts
│ ├──📁 services - Fornece serviços externos (por exemplo, APIs).
│ │ └──📄 Api.ts
│ ├──📁 store - Pode conter configurações relacionadas ao estado global (por exemplo, Redux).
│ ├──📁 styles - Contém estilos globais e temas.
│ │ ├──📄 GlobalStyles.ts - Estilos globais da aplicação.
│ │ └──📁 themes - Temas de estilo, como light e dark.
│ │ ├──📄 Dark.ts
│ │ ├──📄 Light.ts
│ │ └──📄 index.ts - Centraliza as importações dos temas.
│ ├──📁 utils - Funções que serão reaproveitadas e utilizadas em várias partes dos códigos.
│ ├──📄 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
Essa é a parte central do nosso projeto, onde todo o código-fonte vive. 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.
🖌️ styles - Aqui encontramos os estilos globais, como os definidos em GlobalStyles.jsx. Além disso, dentro da pasta themes, podemos separar temas de cores ou estilos para facilitar a manutenção.
🧰 utils - Abreviação de "utilities", é um repositório dedicado a armazenar funções e utilitários que fornecem funcionalidades genéricas e reutilizáveis em várias partes do código.
🚀 main.jsx - O ponto de entrada principal da sua aplicação. É onde tudo começa.
🚦 routes.jsx - A organização de rotas é fundamental para qualquer aplicação. O arquivo routes.tsx pode conter todas as rotas da aplicação, ou em projetos maiores, você pode criar uma pasta routes para uma estrutura mais escalável.
Lembre-se de que essa estrutura é apenas um modelo que escolhi adotar. Você é livre para incluir suas próprias configurações e estruturas, ajustando-as de acordo com as necessidades do seu projeto. A organização eficiente de arquivos torna a manutenção mais fácil e a colaboração mais suave.