Cuando un proyecto React empieza a crecer, tener todos los componentes, páginas, estilos y funciones mezclados en las mismas carpetas puede convertirse rápidamente en un problema. Una buena estructura de carpetas facilita encontrar archivos, reutilizar código y trabajar en equipo.
La clave no es crear cientos de carpetas, sino organizar el proyecto según la responsabilidad de cada elemento.
📁 Una estructura recomendada
Una aplicación React de tamaño mediano o grande podría organizarse así:
src/
├── assets/
│ ├── images/
│ └── icons/
│
├── components/
│ ├── Button/
│ │ ├── Button.jsx
│ │ └── Button.css
│ ├── Navbar/
│ └── Modal/
│
├── pages/
│ ├── Home/
│ │ └── Home.jsx
│ ├── Login/
│ │ └── Login.jsx
│ └── Dashboard/
│ └── Dashboard.jsx
│
├── features/
│ ├── auth/
│ ├── products/
│ └── users/
│
├── hooks/
│ ├── useAuth.js
│ └── useFetch.js
│
├── services/
│ ├── api.js
│ └── authService.js
│
├── context/
│ └── AuthContext.jsx
│
├── utils/
│ ├── formatDate.js
│ └── validators.js
│
├── routes/
│ └── AppRoutes.jsx
│
├── App.jsx
└── main.jsx
🧩 ¿Qué contiene cada carpeta?
components
Aquí colocamos componentes reutilizables que pueden aparecer en diferentes partes de la aplicación.
Por ejemplo:
<Button>Guardar</Button>
Un botón, modal, navbar, input o tarjeta son buenos candidatos para esta carpeta.
pages
Contiene las diferentes pantallas de la aplicación.
Por ejemplo, Home, Login, Products o Dashboard.
Una página puede utilizar muchos componentes:
function Dashboard() {
return (
<>
<Navbar />
<Statistics />
<RecentOrders />
</>
);
}
features
Esta carpeta resulta especialmente útil cuando el proyecto crece. Permite agrupar el código relacionado con una funcionalidad concreta.
Por ejemplo:
features/
└── products/
├── components/
├── hooks/
├── services/
└── productSlice.js
De esta forma, todo lo relacionado con productos permanece junto y es más fácil mantenerlo.
services
Aquí podemos colocar la comunicación con APIs externas.
export async function getProducts() {
const response = await fetch("/api/products");
return response.json();
}
Así evitamos llenar nuestros componentes con lógica relacionada con peticiones HTTP.
hooks
Contiene hooks personalizados que permiten reutilizar lógica.
function useAuth() {
// lógica de autenticación
}
utils
Aquí colocamos funciones pequeñas y reutilizables que no pertenecen directamente a un componente.
Por ejemplo, formatear fechas, validar información o convertir valores.
assets
Es recomendable separar imágenes, iconos, fuentes y otros recursos estáticos del código de la aplicación.
🚀 ¿Cómo hacerla realmente escalable?
En proyectos pequeños puedes comenzar con una estructura sencilla:
src/
├── components/
├── pages/
├── hooks/
└── services/
No necesitas crear toda la estructura desde el primer día.
Cuando el proyecto aumenta, puedes introducir features y comenzar a organizar el código por funcionalidades.
Una buena regla es preguntarte:
“¿Dónde buscaría este archivo dentro de seis meses?”
Si la respuesta es clara, probablemente la estructura sea correcta.
También es importante evitar carpetas genéricas gigantes. Por ejemplo, un utils con 100 archivos puede convertirse en otro problema. Cuando un conjunto de funciones pertenece claramente a una funcionalidad, puede ser mejor moverlo dentro de esa feature.
✅ Conclusión
Una estructura escalable en React debe facilitar tres cosas: encontrar código, reutilizar funcionalidades y mantener separadas las responsabilidades.
No existe una estructura universal que funcione para todos los proyectos. Lo importante es comenzar simple y evolucionar la organización conforme crece la aplicación.
Si tu aplicación tiene autenticación, productos, usuarios, pagos y diferentes módulos, organizar el código por funcionalidades puede ayudarte a mantener un proyecto mucho más limpio y preparado para crecer.
