# Module Structure

> Frontend – estructura de módulos

- Skill: `jjhenao2025/module-structure` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jjhenao2025/module-structure`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jjhenao2025/module-structure/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jjhenao2025 (https://skillmd.com/u/jjhenao2025)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jjhenao2025/module-structure

---


# Frontend – estructura de módulos

**Cuándo usar:** Al añadir un componente personalizado que deba aparecer en el menú, al configurar routeMapper o al explicar la estructura del proyecto ruiBernate.

---

## 1. routeMapper.js y componentMap

- Cualquier componente referenciado por **nombre** en la respuesta del backend de rutas (campo `component` en el JSON de `/routes`) debe existir en el **componentMap** de `routeMapper.js` (o equivalente).
- **GenericMaster** y **GenericMasterDetail** suelen estar ya mapeados; al añadir una ruta nueva que los use, no hace falta registrar de nuevo el componente, pero **sí** que el backend devuelva la ruta con `path` y `props.endpoint` correctos.
- **Componentes personalizados** del proyecto deben estar **importados y añadidos** al map en routeMapper (ej. `MiComponente: MiComponente`).
- Si una pantalla no aparece en el menú, revisar: (1) que exista la entrada en la respuesta del backend de rutas (`/routes`); (2) que el `component` esté registrado en el componentMap de routeMapper.js si es custom.

---

## 2. Dónde van los componentes

- Componentes de **páginas** del proyecto: típicamente en `src/pages/` (o la convención del proyecto), organizados por pantalla o entidad.
- **Configuración** central: `config.js` (o equivalente) en `src/config/`; desde ahí se importa `config` en los componentes que necesiten baseUrl o axios.
- **Mapeo de rutas:** `routeMapper.js` (o equivalente) en `src/utils/` o similar; ahí vive el componentMap y la lógica que convierte el JSON de `/routes` en rutas de React Router.

---

## 3. Flujo al crear una nueva pantalla (resumen)

1. **Backend:** Controlador y endpoints de la entidad; entrada en `/routes` con path, component, props.endpoint.
2. **Frontend:** Si es GenericMaster o GenericMasterDetail, crear el componente de página (opcional si el backend ya envía el nombre genérico y el frontend lo resuelve). Si es **componente custom**, crearlo en `pages/` y **registrarlo en routeMapper** en el componentMap.
3. Las rutas se crean **automáticamente** en el frontend al recibir el JSON de `/routes`; no hardcodear la lista de rutas de negocio en el frontend.