Props y composición

Objetivo: Pasar datos mediante props, establecer valores predeterminados y crear interfaces de usuario componiendo componentes pequeños.

• Las props introducen datos en los componentes.
• Valores predeterminados mediante una desestructuración sencilla.
• Composición y slots de children.

Las props son entradas de solo lectura. Un componente padre renderiza un hijo y le proporciona valores; el hijo los lee de sus parámetros.

• No modifique las props.
• El renderizado se repite cuando el padre cambia su estado o sus props.

Proporcione valores predeterminados a las props mediante desestructuración en la lista de parámetros: function Card({ title = "Untitled" }).

• Mantiene los componentes robustos.
• Evita comprobaciones de undefined en el marcado.

La composición consiste en crear interfaces de usuario más grandes a partir de piezas pequeñas (children/slots). Prefiérala a la herencia para obtener flexibilidad y un flujo de datos claro.

Ejemplo: pase props, establezca valores predeterminados y componga children dentro de un diseño de tarjeta sencillo.

Los componentes de presentación se centran en la distribución y los aspectos visuales; manténgalos controlados por props y sin estado cuando sea posible para facilitar su reutilización.

• Superficie de API pequeña (solo props).
• Aplique estilos mediante clases; evite efectos secundarios ocultos.

Resumen: Pase datos mediante props, establezca valores predeterminados seguros y componga children para crear interfaces de usuario flexibles y reutilizables; evite las jerarquías basadas en la herencia.