sábado 10 agosto 2024

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 React, proporcionando demostraciones claras para cada nivel.

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

Esta estructura se caracteriza por su simplicidad: agrupar los 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: Sencillo y directo
Desventajas:
Crece rápidamente y se vuelve difícil de mantener.
No hay separación de preocupaciones de negocio.

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.

2️⃣ Nivel 2: Agrupación por "Tipos de Archivos" y Funcionalidades

A medida que los proyectos crecen, la estructura de "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:
Sencillo y directo.
Los elementos están agrupados por funcionalidades.
Desventajas:
La lógica relacionada con una funcionalidad aún está dispersa en múltiples tipos de carpetas.

Volviendo al problema de modificar o eliminar el módulo de pagos, con esta estructura es mucho más fácil hacerlo.

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

3️⃣ Nivel 3: Agrupación por Funcionalidades/Módulos

Para proyectos más grandes, la estructura de "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 funcionalidades/módulos.
Las funcionalidades/módulos son representaciones claras de objetos en el mundo real.
Desventajas:
Debes estar muy consciente de la lógica del negocio para tomar las decisiones correctas de agrupación.

Con esta estructura, si necesitas eliminar o modificar la lógica de pagos, sabrás inmediatamente por dónde empezar.

Dar Significados Consistentes a los Nombres de Carpetas

Independientemente del nivel de estructura, ciertos nombres de carpetas deben tener significados específicos. Lo que un nombre de carpeta significa puede variar según tus preferencias o las convenciones del proyecto.

Esto es lo que suelo pensar sobre los nombres de las carpetas:

Componentes de UI

components: Componentes de React - los bloques de construcción principales de la UI.
design-system: Elementos fundamentales de UI y patrones basados en el sistema de diseño.
icons: Íconos SVG que se usarán en línea.

Específico de React

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

Utilidades e Integraciones Externas

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

Lógica de Negocio

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

Estilos

styles: Contiene estilos CSS globales o CSS-in-JS.

TypeScript y Configuraciones

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

Comunicación con el Servidor

api: Para la lógica que se comunica con el(los) servidor(es).
graphql: Código específico de GraphQL.

Gestión de 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.

Enrutamiento

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

Pruebas

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

🏁 Conclusión

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

Etiquetas:

react javascript desarrollo web

Creado por:

Jorge García

Fullstack developer