Props y Composición de Componentes

Props en profundidad

• Props son los datos que un componente recibe del padre.
• Se pueden destructurar y usar valores por defecto para evitar errores.
• Se pueden pasar funciones para callbacks y manejar eventos.
• Inmutables: un componente no debe modificar sus props; si necesita cambiar datos, debe pedirle al padre con un callback.
• Datos derivados: si una prop se puede calcular desde otras, no la dupliques en el hijo (evita inconsistencias).
• Prop drilling: pasar props por muchos niveles puede complicar el codigo; es una senal para reorganizar componentes.

javascript
Copiar
1function Boton({ label = "Enviar", onClick }) {
2  return <button onClick={onClick}>{label}</button>;
3}

javascript
Copiar
1function Lista({ items, onSelect }) {
2  return (
3    <ul>
4      {items.map((item) => (
5        <li key={item.id} onClick={() => onSelect(item)}>
6          {item.nombre}
7        </li>
8      ))}
9    </ul>
10  );
11}

PropTypes

• Validación en desarrollo para asegurar tipos correctos.
• Útil cuando se trabaja en equipo o con componentes reutilizables.
• Ayuda a detectar errores de integracion al pasar props incorrectas.
• En proyectos TypeScript suele reemplazarse por tipos, pero sigue siendo util en JS puro.

Children y composición

• children permite componer componentes reutilizables (Card, Layout, Modal).
• Favorece una UI flexible sin repetir lógica.
• Patrón "slot": agregar secciones opcionales dentro de un componente.
• Patrón "container": separa layout (contenedor) de contenido (children).

javascript
Copiar
1function Card({ title, children, footer }) {
2  return (
3    <section className="card">
4      <h3>{title}</h3>
5      <div className="card-body">{children}</div>
6      {footer && <div className="card-footer">{footer}</div>}
7    </section>
8  );
9}

javascript
Copiar
1function Layout({ children }) {
2  return (
3    <div className="layout">
4      <header>Mi App</header>
5      <main>{children}</main>
6    </div>
7  );
8}

Spread props y componentes controlados

• ...props permite reenviar props a un elemento o componente hijo.
• Usalo con cuidado para no propagar props invalidas al DOM.
• Componentes controlados reciben value y onChange desde el padre.

javascript
Copiar
1function Input({ label, ...inputProps }) {
2  return (
3    <label>
4      {label}
5      <input {...inputProps} />
6    </label>
7  );
8}

javascript
Copiar
1function Formulario() {
2  const [email, setEmail] = useState("");
3  return (
4    <Input
5      label="Email"
6      value={email}
7      onChange={(e) => setEmail(e.target.value)}
8    />
9  );
10}