Organiza carpetas y utils en React

Organizar carpetas y archivos utils en React es lo que separa un proyecto que solo funciona de uno que un equipo entero puede mantener sin volverse loco. Esta guía es para desarrolladores que ya tienen una app funcionando y quieren que otros puedan entenderla, leerla y modificarla sin explorar archivo por archivo.

Hasta ahora la conversación giraba en torno a la experiencia del usuario, pero hay otra experiencia que también cuenta: la del desarrollador. Y aquí viene lo interesante, porque cuando una aplicación crece, no basta con que funcione. Necesita ser fácil de entender y mantener [00:00].

Por qué reorganizar la estructura de carpetas en un proyecto React

La idea central es simple: mantener los componentes con la menor lógica posible dentro de ellos. Esa lógica se mueve a archivos utils y se importa donde haga falta, así el componente queda mucho más limpio [00:37].

Antes, dentro de la carpeta source teníamos todo lo que le da vida a la aplicación: una carpeta de componentes, una de data, el archivo App.jsx donde veníamos trabajando, los estilos en index.css y el main, que es el archivo encargado de mandar la información de nuestro app al HTML [00:54].

¿Qué hace el archivo main en un proyecto React? Es el archivo que le envía la información de tu aplicación al HTML. Funciona como el puente entre el código de tu app y la página que ve el usuario.

En components estaban los cinco componentes que veníamos usando: el header, el hero, el property card, el property list y el search bar [01:15]. Cinco componentes son fáciles de manejar. ¿Pero qué pasa cuando la aplicación crece y tienes muchos?

Qué problema resuelve agrupar componentes por categoría

Con decenas de componentes sueltos en una sola carpeta, la estructura deja de ser escalable. Un desarrollador nuevo o un equipo nuevo tendría que explorar archivo por archivo solo para saber qué lógica vive en qué componente [01:36].

La solución fue una migración: mantener los mismos componentes y cambiar solo la distribución y el orden de las carpetas [01:52]. Dentro de components se agregaron tres carpetas nuevas:

• 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 interfaz del usuario.

Siguen siendo los mismos cinco componentes con la misma estructura y la misma funcionalidad, pero ahora cualquiera entiende de un vistazo dónde buscar cada cosa [02:36]. Lo que tiene que ver con propiedades vive en properties, la interfaz en UI y el layout reutilizable en su propia carpeta.

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

El cambio adicional, y quizá el más importante para la limpieza del código, es la aparición de la carpeta utils con un archivo llamado filter properties [03:07].

Este archivo contiene exactamente la misma lógica que antes vivía dentro de App.jsx. Al exportarla hacia utils, el App.jsx se queda solo con los componentes y prácticamente con lo que se renderiza en la interfaz [03:57].

¿Qué es un archivo utils en React? Es un archivo donde guardas funciones reutilizables que sacas de tus componentes. Luego lo importas donde lo necesites, manteniendo los componentes enfocados solo en lo que muestran en pantalla.

Para que nada cambie en la funcionalidad, importamos ese archivo de utils directamente en App.jsx y lo usamos ahí [04:17]. La lógica de la aplicación se mantiene intacta, pero el orden mejora muchísimo.

Qué gano al mover la lógica fuera de los componentes

Dentro de utils podrías agrupar cualquier otra función que saques de un componente y simplemente importar el archivo donde la tienes guardada [03:39]. La ventaja es que en tu componente solo identificas lo que se va a renderizar, mientras la lógica pesada vive en un lugar separado.

¿Por qué mover lógica de un componente a utils? Porque deja el componente limpio y enfocado en la interfaz. La lógica reutilizable queda en un solo sitio, así es más fácil leerla, probarla y compartirla entre varios componentes.

Todo este reordenamiento se hizo pensando en un escenario concreto: que la aplicación reciba el apoyo de nuevos desarrolladores. Con esta estructura les facilitamos leer, entender, modificar y mantener cualquier parte del proyecto [05:01].

Es importante entender que este paso es opcional, pero construir tus aplicaciones de forma profesional facilita la participación de otros a medida que el proyecto crece en funcionalidades y arquitectura [00:26]. La comparación entre la estructura anterior y la nueva la puedes encontrar en la rama de la clase 14 del repositorio.

En la siguiente clase el curso da un giro importante: actualizaremos el proyecto llevándolo de JavaScript a TypeScript. ¿Cómo organizas tú tus carpetas en React? Cuéntame en los comentarios qué convención usas.