Evaluación: UI, estilos y estado de la aplicación

Evaluación y práctica: Comprueba componentes, formularios accesibles y estado del cliente con un carrito ficticio. Revisa teclado, validación y datos derivados.

Tarea práctica: formulario y carrito

Construye una pantalla con dos productos ficticios y un control de cantidad. Extrae un componente de fila que reciba producto y cantidad mediante props. Coloca la interacción en una frontera de cliente explícita cuando sea necesaria; una página no necesita volverse cliente entera por incluir un botón interactivo.

1. Calcula el subtotal a partir de precio y cantidad. Evita guardar otro estado independiente que pueda quedar desactualizado.
2. Añade un formulario con etiqueta visible, restricciones de cantidad y errores asociados al control.
3. Permite recorrer y activar los controles con teclado. El foco debe ser visible.
4. Comprueba la pantalla en un ancho móvil y en escritorio: textos legibles, controles utilizables y tabla o lista sin desbordamiento del documento.
5. Usa contexto sólo si varios componentes necesitan el mismo estado. Documenta dónde vive el estado y qué lo actualiza.

Criterios de aceptación

• Cambiar una cantidad actualiza el subtotal calculado sin duplicar estado.
• Cada campo tiene una etiqueta asociada y cada error permite saber qué corregir.
• El teclado alcanza los controles y muestra el foco.
• Los hooks respetan el orden de llamadas; no se llaman condicionalmente.
• El componente tiene entradas claras y no conoce datos que no necesita.

Respuesta de referencia y feedback

Comparar tu solución

Una solución sencilla conserva la cantidad como estado y deriva el subtotal durante el renderizado. El formulario comunica el error y conserva la entrada. Un hook personalizado puede encapsular una lógica reutilizable, pero no elimina las reglas de los hooks. El contexto evita pasar props por muchas capas cuando el estado compartido lo justifica; no reemplaza la autenticación ni persiste datos por sí solo.

Si el subtotal cambia sólo después de otro clic, revisa el estado duplicado. Si el teclado pierde el foco, revisa el elemento interactivo y el orden de navegación. Si el error aparece sólo por color, añade una explicación textual asociada.

Fuentes para revisar

Consulta estructura del estado en React, reglas de hooks y etiquetas accesibles de W3C. Referencias consultadas el 2 de octubre de 2026.

Repaso antes de enviar

• Tailwind CSS: configuración y buenas prácticas
• Componentes reutilizables y aislados
• Hooks personalizados y contexto

Resultado y finalización

En tu aula, el cuestionario tiene cinco preguntas y se aprueba con cuatro respuestas correctas (80%). Después de enviar, recibes el resultado y una explicación por pregunta, incluso si no apruebas. Dispones de cinco intentos, sin límite de tiempo. La evaluación guarda cada intento y el estado de aprobación en tu cuenta; no bloquea las lecciones siguientes ni modifica tu progreso anterior.

La tarea práctica usa una lista de revisión propia y no recibe una calificación automática. Comprueba sus criterios antes de marcar la lección como completada con el control del aula. Aprobar el cuestionario no certifica que tu proyecto esté preparado para producción ni equivale a completar todo el curso.

Trabaja con datos ficticios en un proyecto de práctica, sin pagos, correos a clientes ni credenciales reales.