By Alex Santos

Estructura de carpetas

Una estructura de carpetas bien diseñada en React resulta fundamental para potenciar la organización y gestión de cualquier proyecto. Esta práctica no solo simplifica la reutilización de componentes, sino que también optimiza el proceso de desarrollo, aumentando su eficiencia. Con una estructura claramente definida, el proyecto se vuelve altamente escalable, permitiendo una adaptación sencilla a medida que se incorporan nuevas funcionalidades.

Estructura Flow

A continuación, se presenta un ejemplo completo de una estructura basada en el comportamiento de los componentes en el flujo principal de React.js, denominado "Flow". Esta estructura ha sido meticulosamente diseñada teniendo en cuenta las mejores prácticas y convenciones de React, brindando así numerosos beneficios para el desarrollo.

│── components
│   ├── SomeComponent (Pascal Case)
│   │   ├── ...
│   │   ├── // ARCHIVO DE ENTRADA  <-- 
│   │   ├── index.tsx
├── context
│   └── index.ts
├── hooks
│   └── index.ts
├── events
│   └── index.ts
├── provider
│   └── index.tsx
├── styles
│   └── index.ts
├── types
│   └── index.ts
├── tools
│   └── index.ts
└── utils
    └── index.ts

// ARCHIVO DE ENTRADA <--
-> index.tsx

Esta estructura incluye varias carpetas esenciales diseñadas para separar la lógica del archivo index.tsx, logrando así un código más limpio y organizado.

Una ventaja destacada de esta estructura es su replicación en cada componente y subcomponente, lo que contribuye a que la aplicación sea altamente modular. A continuación, se presenta un ejemplo de una pantalla "Historial" ubicada en screens/Historial, la cual sigue esta estructura para cada una de sus subpantallas.

│── components
│   └── Listado
│       ├── index.tsx // <- ARCHIVO DE ENTRADA
│       ├── components
│       │   └── Item
│       │       ├── index.tsx
│       │       ├── hooks
│       │       │   └── index.ts
│       │       ├── styles
│       │       │   └── index.ts
│       │       └── utils
│       │           └── index.ts
│       └── styles
│           └── index.ts
├── context
│   └── index.ts
├── hooks
│   └── index.tsx
├── events
│   └── index.tsx
├── provider
│   └── index.tsx
├── screens
│   ├── Voucher
│   │   ├── index.tsx // <- ARCHIVO DE ENTRADA
│   │   ├── events
│   │   │   └── index.ts
│   │   ├── hooks
│   │   │   └── index.ts
│   │   ├── styles
│   │   │   └── index.ts
│   │   ├
├── styles
│   └── index.ts
├── types
│   └── index.ts
└── utils
    └── index.ts

index.tsx // <- ARCHIVO DE ENTRADA

components

Esta carpeta alberga los componentes de React reutilizables para cada contexto. Es decir, la presencia de la carpeta "components" en la ruta principal indica que los componentes contenidos se utilizan en toda la aplicación. Por otro lado, si encontramos esta carpeta dentro de un screen, por ejemplo, significa que esos componentes son específicos de esa pantalla en particular. La regla fundamental es que si un componente se repite tres o más veces, debe ascender en la jerarquía hasta llegar a los componentes de la raíz.

│── components
│   └── Listado
│       ├── index.tsx // <- ARCHIVO DE ENTRADA
│       ├── components
│       │   └── Item
│       │       ├── index.tsx
│       │       ├── hooks
│       │       │   └── index.ts
│       │       ├── styles
│       │       │   └── index.ts
│       │       └── utils
│       │           └── index.ts
│       └── styles
│           └── index.ts