Children: Componentes contenedores

La prop children

children es una prop especial que contiene lo que pones entre las etiquetas de un componente.

Sintaxis basica

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

// Uso
<Card>
  <h2>Titulo</h2>
  <p>Este contenido es children</p>
</Card>

Componentes contenedores

function Container({ children }) {
  return (
    <div className="container mx-auto px-4">
      {children}
    </div>
  );
}

function Page() {
  return (
    <Container>
      <Header />
      <Main />
      <Footer />
    </Container>
  );
}

Ejemplo: Modal

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal">
        <button
        {children}
      </div>
    </div>
  );
}

// Uso
<Modal isOpen={showModal} => setShowModal(false)}>
  <h2>Confirmar accion</h2>
  <p>Estas seguro?</p>
  <button>Si</button>
  <button>No</button>
</Modal>

Slots con props nombradas

function Layout({ header, sidebar, children, footer }) {
  return (
    <div className="layout">
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

// Uso
<Layout
  header={<Nav />}
  sidebar={<Menu />}
  footer={<Copyright />}
>
  <Article />
</Layout>

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.
• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.
• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.