Organiza carpetas y lógica en React escalable

Cuando una aplicación en React crece, no basta con que funcione: también necesitas que sea fácil de entender y mantener. Organizar los componentes por carpetas y separar la lógica en archivos utils mejora la experiencia del desarrollador y prepara tu proyecto para escalar con nuevos equipos. Si estás construyendo apps profesionales, esta práctica te ahorra dolores de cabeza más adelante.

Por qué mantener los componentes con la menor lógica posible

Una buena práctica que puedes aplicar en todos tus proyectos es dejar tus componentes lo más limpios posible. La idea es mover la lógica a archivos utils e importarla solo donde la necesites. Así tu componente se enfoca en lo que realmente le importa: renderizar la interfaz.

¿Por qué importa esto? Porque cuando un desarrollador nuevo llega al proyecto, no quieres que tenga que revisar archivo por archivo para entender dónde vive cada pieza de lógica. Un componente sobrecargado de lógica es difícil de leer, modificar y mantener [00:14].

¿Qué es un archivo utils en React? Es un archivo separado donde guardas funciones reutilizables, como filtros o cálculos, para importarlas en tus componentes. Así el componente queda limpio y la lógica vive aparte.

Cómo estaba estructurada la carpeta source al inicio

Antes de reorganizar, todo vivía de forma plana dentro de la carpeta source, que es donde están los archivos que hacen que tu aplicación cobre vida [00:52]. La estructura incluía:

• Una carpeta de components con los cinco componentes del proyecto.
• Una carpeta de data.
• El archivo App.jsx, donde se venía trabajando toda la lógica.
• Los estilos en index.css.
• El archivo main, que envía la información de tu app al HTML.

Dentro de components estaban juntos el header, el hero, el property card, el property list y el search bar. Con solo cinco componentes parece manejable, pero aquí viene el problema real [01:29].

Qué pasa cuando la aplicación crece y no es escalable

Con muchos componentes en una sola carpeta, un desarrollador nuevo tendría que explorar archivo por archivo para saber qué lógica está en qué parte. Eso no es escalable. La solución es una migración de estructura: se mantienen los mismos componentes y solo cambia la distribución y el orden de las carpetas [01:47].

Después del cambio, dentro de components aparecen tres carpetas nuevas que agrupan los componentes por su función:

• Layout: contiene el header, es decir, lo que puede repetirse en otras páginas.
• Properties: agrupa el property card y el property list, todo lo relacionado con mostrar propiedades.
• UI: reúne el hero y el search bar, los elementos de la interfaz del usuario.

Siguen siendo los mismos cinco componentes de siempre, pero ahora cualquiera entiende de un vistazo dónde buscar cada cosa [02:38].

¿Cómo organizo carpetas de componentes en React? Agrúpalos por responsabilidad: layout para elementos repetibles como el header, properties para la lógica de tu dominio, y UI para elementos de interfaz. Así el código es autoexplicativo.

Cómo separar la lógica de filtrado en un archivo utils

El cambio adicional está en el archivo filter properties dentro de utils. Ese archivo contiene exactamente la misma lógica que antes vivía directamente en el App.jsx [03:52].

Antes tenías el filter properties escrito dentro del App.jsx. Ahora esa lógica se exporta a su propio archivo y se importa donde la necesitas. El resultado: en tu App.jsx solo quedan los componentes y prácticamente lo que se renderiza en la interfaz.

El proceso es directo:

1. Sacas la lógica de filtrado del App.jsx.
2. La colocas en el archivo utils filter properties.
3. La importas de nuevo en el App.jsx para usarla.

La funcionalidad no cambia en absoluto. La lógica de tu aplicación se mantiene intacta, pero ahora todo está mucho más ordenado [05:04]. Y lo mejor: dentro de utils puedes agrupar cualquier otra función que saques de un componente y simplemente importarla donde la necesites.

¿Cambia la funcionalidad al mover la lógica a utils? No. Al importar la función desde el archivo utils en tu App.jsx, la app funciona igual. Solo cambia el orden del código, no su comportamiento.

Por qué esto mejora la experiencia del desarrollador

Todo este trabajo se hace pensando en que tu aplicación recibirá el apoyo de nuevos desarrolladores. Al reorganizar carpetas y separar la lógica, les facilitas cuatro tareas clave: leer, entender, modificar y mantener cualquier parte del proyecto [05:36].

Todos los cambios de esta reorganización los encuentras en la rama de la clase 14 del repositorio, donde puedes comparar la estructura anterior con la nueva. La aplicación sigue funcionando igual, pero el código quedó mucho más limpio.

El siguiente paso será un giro importante: actualizar el proyecto llevándolo de JavaScript a TypeScript [06:07]. ¿Ya aplicas esta separación de lógica en tus proyectos? Cuéntanos cómo organizas tus carpetas.