Aplicar Atomic Design en un proyecto de React transforma una carpeta de componentes desordenada en una estructura clara y escalable. Si trabajas con interfaces que crecen rápido, esta metodología te ayuda a organizar tu código por niveles de complejidad y a facilitar futuros refactors.

¿Cómo luce un proyecto de React sin Atomic Design?

El punto de partida es un proyecto real de un estudiante llamado Beautiful Places, una interfaz con varias cards compuestas por imágenes y textos. Dentro de la carpeta src existe una carpeta components que contiene todos los archivos juntos, sin agrupación lógica.

Esa estructura plana funciona al inicio, pero se vuelve difícil de mantener cuando el proyecto escala. Aquí es donde entra el refactor con Atomic Design.

¿Qué problema resuelve Atomic Design en React? Resuelve el desorden de tener todos los componentes mezclados en una sola carpeta. Los agrupa por nivel de complejidad para que encuentres y reutilices cada pieza con mayor facilidad.

¿Cómo organizar las carpetas con Atomic Design?

La propuesta es reemplazar la carpeta components plana por subcarpetas que reflejen los niveles de la metodología. Vas de lo más pequeño a lo más grande.

• atoms: los componentes más básicos, como botones, inputs o etiquetas de texto.
• molecules: combinaciones simples de átomos que ya cumplen una función concreta.
• organisms: bloques más complejos formados por moléculas y átomos, como una card completa.
• templates: estructuras de página que definen la disposición sin contenido real.
• pages: las vistas finales con datos y componentes reales.

Esta jerarquía hace que cualquier persona que entre al proyecto entienda dónde vive cada componente sin tener que abrir archivo por archivo.

¿Qué cambia en las importaciones después del refactor?

Al mover los componentes a carpetas distintas, las rutas de importación dejan de ser válidas. Los organismos que dependen de moléculas o átomos ahora tienen que apuntar a las nuevas ubicaciones.

Es un ajuste mecánico pero importante: actualizas las rutas en cada archivo que consume un componente más pequeño. Y listo, el árbol vuelve a funcionar con una estructura mucho más legible.

¿Atomic Design obliga a cambiar el código de los componentes? No. Solo cambia dónde viven los archivos y cómo los importas. La lógica interna de cada componente se mantiene igual.

¿Por qué este refactor te facilita el trabajo a futuro?

Una vez que tu proyecto sigue Atomic Design, abrir la puerta a otras mejoras se vuelve trivial. Puedes sumar convenciones de nombres de clases, aplicar metodologías de estilos como BEM, o reorganizar la lógica de estado sin tocar la estructura base.

La organización principal queda resuelta, y los siguientes refactors parten de un terreno ordenado. Eso ahorra horas cuando el equipo crece o cuando regresas al proyecto meses después.

Si quieres seguir el ejercicio con el mismo código que se muestra, busca el repositorio Curso Arquitecturas CSS Proyecto cuatro en la caja de recursos y abre el pull request del refactor.

¿Cómo identificar átomos, moléculas y organismos en tu propio proyecto?

Mira cada componente y pregúntate si puede dividirse en piezas más pequeñas que tengan sentido por sí solas. Si no, probablemente sea un átomo. Si combina dos o tres átomos con un propósito claro, es una molécula. Y si agrupa varias moléculas en una unidad funcional, ya estás frente a un organismo.

Cuéntame en los comentarios cómo te quedó tu nueva estructura, qué átomos y moléculas identificaste, y si tienes otra propuesta de organización, mándanos un pull request.