rckrdmrd
a7575d6096
Propagated via automated script (scripts/propagate-governance.sh): - orchestration/_definitions/: canonical definitions - orchestration/directivas/checklists/: CAPVED phase checklists - docs/_SSOT/: Single Source of Truth - orchestration/tareas/_templates/TASK-TEMPLATE-UNIFIED/ Configured as STANDALONE project Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
82 lines
1.8 KiB
Markdown
82 lines
1.8 KiB
Markdown
# Validación Frontend - React/TypeScript
|
|
## Definición Canónica
|
|
|
|
**Alias:** @DEF_VAL_FE
|
|
**Dominio:** Frontend React/TypeScript
|
|
|
|
---
|
|
|
|
## COMANDOS OBLIGATORIOS
|
|
|
|
```bash
|
|
# ANTES de marcar tarea como completada:
|
|
npm run build # DEBE pasar sin errores
|
|
npm run lint # DEBE pasar sin errores
|
|
npm run typecheck # DEBE pasar sin errores (tsc --noEmit)
|
|
```
|
|
|
|
## CRITERIOS DE ACEPTACIÓN
|
|
|
|
```yaml
|
|
build:
|
|
resultado: "Build de producción exitoso"
|
|
sin_warnings_criticos: true
|
|
bundle_size: "Monitorear incrementos grandes"
|
|
|
|
lint:
|
|
resultado: "0 errores de ESLint"
|
|
reglas_react:
|
|
- "react-hooks/rules-of-hooks"
|
|
- "react-hooks/exhaustive-deps"
|
|
|
|
typecheck:
|
|
resultado: "0 errores de TypeScript"
|
|
strict_mode: true
|
|
no_any_implicito: true
|
|
```
|
|
|
|
## VALIDACIONES ADICIONALES
|
|
|
|
```yaml
|
|
componentes:
|
|
- "Props tipadas correctamente"
|
|
- "Keys únicas en listas"
|
|
- "Manejo de loading/error states"
|
|
- "Accesibilidad básica (aria labels)"
|
|
|
|
hooks:
|
|
- "Dependencias completas en useEffect"
|
|
- "Cleanup en useEffect si necesario"
|
|
- "useMemo/useCallback donde aplique"
|
|
|
|
estado:
|
|
- "Estado mínimo necesario"
|
|
- "Derivar datos cuando posible"
|
|
- "Zustand/Context correctamente usado"
|
|
|
|
api:
|
|
- "Manejo de errores de red"
|
|
- "Estados de carga"
|
|
- "Cancelación de requests"
|
|
```
|
|
|
|
## ERRORES COMUNES
|
|
|
|
```yaml
|
|
- error: "React Hook useEffect has missing dependency"
|
|
causa: "Dependencia no incluida en array"
|
|
solucion: "Agregar dependencia o usar useCallback"
|
|
|
|
- error: "Cannot read property of undefined"
|
|
causa: "Datos async no disponibles"
|
|
solucion: "Optional chaining o loading state"
|
|
|
|
- error: "Each child should have unique key"
|
|
causa: "Key faltante o duplicada en map()"
|
|
solucion: "Usar ID único como key"
|
|
```
|
|
|
|
---
|
|
|
|
**Referencia:** @PERFIL_FRONTEND, @SIMCO_FRONTEND
|