Organizar carpetas y componentes en React JS marca la diferencia entre un proyecto que cualquiera puede leer y uno que asusta apenas se abre. La meta es que tu carpeta src deje de ser un cajón desordenado y se convierta en una estructura clara, donde cada pieza viva donde corresponde y los imports se sientan naturales.

¿Por qué importa la estructura de carpetas en un proyecto React?

Imagina que entra una persona nueva al equipo, una recruiter o tu próximo manager y abre tu repositorio. Lo primero que verá es package.json y luego tu carpeta src. Si ahí encuentra 20 archivos sueltos entre JavaScript, CSS y SVG, el mensaje que transmites es de descuido, aunque tu lógica funcione perfecto.

La limpieza en archivos y carpetas habla de ti como profesional. No siempre será la prioridad: a veces toca lanzar, corregir un bug urgente o agregar una feature esencial. Pero si tienes 5 o 10 minutos libres, dedicarlos a ordenar la anatomía del proyecto es una inversión que paga rápido.

¿Qué es la estructura de carpetas en React? Es la forma en que organizas componentes, estilos, imágenes y lógica dentro de tu proyecto para que sea fácil de leer, escalar y mantener.

¿Cuáles son las formas de organizar componentes en React JS?

No existe una única filosofía. Hay opiniones fuertes sobre esto y cada equipo defiende la suya. Estas son las dos aproximaciones más comunes que vas a encontrar.

Organización por tipo de archivo

Esta estructura divide src en carpetas según la naturaleza de cada archivo:

• Una carpeta components para todos los componentes de React.
• Una carpeta styles o similar para los archivos CSS.
• Una carpeta images o assets para imágenes y SVGs.
• Una carpeta utils o helpers para JavaScript que no depende de React.

Funciona muy bien en proyectos pequeños. El problema aparece cuando tu carpeta components empieza a tener 100 archivos y el CSS de un componente vive lejos de su lógica. Si abres CreateTodoButton.js y necesita su CSS, su SVG y un par de helpers, vas a saltar entre tres carpetas distintas para tocar una sola pieza.

Organización por funcionalidad o componente

La alternativa es crear una carpeta por cada sección o pieza importante de la aplicación. Cada carpeta encapsula todo lo que ese componente necesita: el código de React, el JavaScript específico, el CSS, las imágenes y los SVGs.

Por ejemplo, para el botón de crear tareas creas una carpeta CreateTodoButton y adentro guardas:

• Un index.js con el código del componente.
• Un CreateTodoButton.css con sus estilos.
• Cualquier asset o helper que ese botón use exclusivamente.

Esta es la estructura preferida en proyectos que crecen, porque cada feature queda autocontenida y el ruido entre carpetas baja muchísimo.

¿Cómo refactorizar un componente a su propia carpeta sin romper los imports?

La parte que más duele al reorganizar es ajustar los imports. Aquí va el flujo limpio aplicado al CreateTodoButton.

Primero creas la carpeta CreateTodoButton dentro de src. Luego mueves el archivo del componente y lo renombras a index.js. Después arrastras el CreateTodoButton.css a esa misma carpeta. Visual Studio Code te preguntará si quieres mover el archivo y aceptas sin miedo.

Como el componente y su CSS ahora viven en la misma carpeta, el import del CSS dentro del componente no cambia. Y aquí viene lo interesante: el componente App que lo consumía tampoco necesita ajustarse. Antes importabas ./CreateTodoButton, y como la nueva carpeta se llama igual y contiene un index.js, el import sigue resolviéndose solo.

¿Por qué nombrar el archivo principal como index.js? Porque cuando importas una carpeta, el bundler busca automáticamente un index.js adentro. Eso te permite escribir import CreateTodoButton from './CreateTodoButton' sin apuntar al archivo exacto.

La configuración de transpilación y empaquetado de Create React App también te permite omitir la extensión .js en los imports, así que el código queda más corto y legible.

¿Cómo verifico que la refactorización no rompió la aplicación?

Después de mover archivos, vuelve al navegador y recarga. Si tu botón sigue ahí, con sus estilos intactos y su comportamiento idéntico, la reorganización fue exitosa. Ese ciclo de mover, recargar y validar lo repites con cada componente que quieras encapsular.

La idea es replicar este patrón con el resto de la aplicación: cada pieza importante en su propia carpeta, con su index.js y todos los recursos que solo le pertenecen a ella.

¿Cuál estructura usas tú en tus proyectos? Cuéntamelo en los comentarios, que las opiniones aquí siempre suman.