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 onClick={onClose}>X</button>

        {children}

      </div>

    </div>

  );

}



// Uso

<Modal isOpen={showModal} onClose={() => 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.