Estructuras de carpetas en proyectos de React

Organizar archivos y directorios dentro de un proyecto de React es crucial para la mantenibilidad, escalabilidad y facilidad de navegación. Este artículo explora la arquitectura general y las estructuras de carpetas en diferentes escalas de proyectos de React, proporcionando demostraciones claras para cada nivel.

Nivel 1: Agrupación por "Tipos de Archivos"

Esta estructura se caracteriza por su simplicidad, agrupando archivos por su tipo:

└── src/
    ├── assets/
    ├── api/
    ├── configs/
    ├── components/
    │   ├── SignUpForm.tsx
    │   ├── Employees.tsx
    │   ├── PaymentForm.tsx
    │   └── Button.tsx
    ├── hooks/
    │   ├── usePayment.ts
    │   ├── useUpdateEmployee.ts
    │   ├── useEmployees.ts
    │   └── useAuth.tsx
    ├── lib/
    ├── services/
    ├── states/
    └── utils/

• Tamaño del Proyecto: Pequeño a Mediano
• Ventajas: Simple y directo
• Desventajas:
  • Se inflará rápidamente y será difícil de mantener
  • No hay separación de preocupaciones comerciales

Supongamos que tienes mucho código relacionado con pagos. Un día, todo el negocio cambia o ya no es necesario. ¿Qué tan fácil es reemplazarlo o eliminarlo? Con esta estructura de carpetas, tendrás que revisar cada carpeta y los archivos dentro de ella para hacer los cambios necesarios. Y si el proyecto sigue creciendo, pronto se convertirá en un infierno de mantenimiento que solo empeorará con el tiempo.

Nivel 2: Agrupación por "Tipos de Archivos" y Características

A medida que los proyectos crecen, la estructura del "Nivel 2" introduce la agrupación por características dentro de cada tipo:

└── src/
    ├── assets/
    ├── api/
    ├── configs/
    ├── components/
    │   ├── auth/
    │   │   └── SignUpForm.tsx
    │   ├── payment/
    │   │   └── PaymentForm.tsx
    │   ├── common/
    │   │   └── Button.tsx
    │   └── employees/
    │       ├── EmployeeList.tsx
    │       └── EmployeeSummary.tsx
    ├── hooks/
    │   ├── auth/
    │   │   └── useAuth.ts
    │   ├── payment/
    │   │   └── usePayment.ts
    │   └── employees/
    │       ├── useEmployees.ts
    │       └── useUpdateEmployee.ts
    ├── lib/
    ├── services/
    ├── states/
    └── utils/

• Tamaño del Proyecto: Mediano a Grande
• Ventajas:
  • Simple y directo
  • Los elementos están agrupados por características
• Desventajas:
  • La lógica relacionada con una característica todavía está dispersa en múltiples tipos de carpetas

Ahora volvamos al problema planteado donde el módulo de pago necesita ser modificado o eliminado. Con esta estructura, ahora es mucho más fácil hacerlo.

La estructura de carpetas del "Nivel 2" es la que recomendaría si no sabes qué elegir.

Nivel 3: Agrupación por Features/Módulos

Para proyectos más grandes, la estructura del "Nivel 3" ofrece un enfoque altamente modular, definiendo límites claros para diferentes aspectos de la aplicación dentro de cada módulo:

└── src/
    ├── assets/
    ├── modules/
    |   ├── core/
    │   │   ├── components/
    │   │   ├── design-system/
    │   │   │   └── Button.tsx
    │   │   ├── hooks/
    │   │   ├── lib/
    │   │   └── utils/
    │   ├── payment/
    │   │   ├── components/
    │   │   │   └── PaymentForm.tsx
    │   │   ├── hooks/
    │   │   │   └── usePayment.ts
    │   │   ├── lib/
    │   │   ├── services/
    │   │   ├── states/
    │   │   └── utils/
    │   ├── auth/
    │   │   ├── components/
    │   │   │   └── SignUpForm.tsx
    │   │   ├── hooks/
    │   │   │   └── useAuth.ts
    │   │   ├── lib/
    │   │   ├── services/
    │   │   ├── states/
    │   │   └── utils/
    │   └── employees/
    │       ├── components/
    │       │   ├── EmployeeList.tsx
    │       │   └── EmployeeSummary.tsx
    │       ├── hooks/
    │       │   ├── useEmployees.ts
    │       │   └── useUpdateEmployee.ts
    │       ├── services/
    │       ├── states/
    │       └── utils/
    └── ...

• Tamaño del Proyecto: Grande y Complejo
• Ventajas:
  • Los elementos están claramente agrupados por características/módulos
  • Las características/módulos son representaciones claras de objetos en el mundo real
• Desventajas:
  • Deberás tener un conocimiento profundo de la lógica empresarial para tomar las decisiones de agrupación correctas

Con esto, si tienes que eliminar o modificar la lógica de pagos, sabrás de inmediato por dónde empezar.

Dales significados consistentes a los nombres de las carpetas.

Sin importar el nivel de la estructura, ciertos nombres de carpetas deberían tener significados específicos. Lo que significa un nombre de carpeta puede variar según tus preferencias o las convenciones del proyecto.

Aquí tienes lo que suelo pensar sobre los nombres de carpetas:

Componentes de UI

• components: Componentes de React, los principales bloques de construcción de la interfaz de usuario.
• design-system: Elementos y patrones fundamentales de la interfaz de usuario basados en el sistema de diseño.
• icons: Iconos SVG destinados a ser utilizados en línea.

React Specific

• hooks: Hooks personalizados de React para lógica compartida.
• hocs: Componentes de orden superior de React.
• contexts/providers: Contiene Contextos y Proveedores de React.

Utilities & External Integrations

• utils: Utilidades para lógica universal que no está relacionada con la lógica empresarial o ninguna tecnología, por ejemplo, manipulaciones de cadenas, cálculos matemáticos, etc.
• lib: Utilidades relacionadas con ciertas tecnologías, por ejemplo, manipulaciones del DOM, lógica relacionada con HTML, localStorage, IndexedDB, etc.
• plugins: Plugins de terceros (por ejemplo, i18n, Sentry, etc.).

Business Logic

• services: Encapsula la lógica principal del negocio y de la aplicación.
• helpers: Proporciona utilidades específicas del negocio.

Styles

• styles: Contiene estilos CSS (globales) o estilos CSS-in-JS.

TypeScript y Configuraciones

• types: Para tipos generales de TypeScript, enumeraciones e interfaces.
• configs: Configuraciones para la aplicación (por ejemplo, variables de entorno).
• constants: Valores constantes e inalterables (por ejemplo, export const MINUTES_PER_HOUR = 60).

Comunicación con el Servidor

• api: Lógica que se comunica con el servidor(es).
• graphql: Código específico de GraphQL.

Gestión del Estado

• states/store: Lógica de gestión de estado global (Zustand, Valtio, Jotai, etc.).
• reducers, store, actions, selectors: Lógica específica de Redux.

Routing

• routes/router: Definición de rutas (si estás utilizando React Router u otro similar).
• pages: Definición de componentes de entrada para las páginas.

Testing

• tests: Pruebas unitarias y otros tipos de pruebas para tu código.

Elegir la estructura de carpetas adecuada en proyectos de React es esencial y debería basarse en el tamaño y la complejidad del proyecto. Mientras que el "Nivel 1" puede ser suficiente para proyectos pequeños, el "Nivel 2" y el "Nivel 3" ofrecen estructuras más organizadas y modulares para proyectos medianos y grandes. Personalmente, a menudo recomendaría la estructura de carpetas del "Nivel 2". Además, comprender los nombres comunes de las carpetas ayuda a mantener una arquitectura consistente e intuitiva en todas las aplicaciones de React.