Aprende a diseñar componentes contenedor con `children` para reutilizar estructura y permitir contenido variable sin romper encapsulación.
Uno de los superpoderes de React es la composición: crear piezas pequeñas y combinarlas para construir interfaces complejas.
`children` permite que un componente aporte estructura y estilo base mientras delega el contenido específico a quien lo use.
Esto evita duplicar markup en múltiples pantallas y mejora la coherencia visual entre secciones similares.
A nivel de arquitectura, composición reduce acoplamiento y facilita evolución de diseño sin tocar toda la base de código.
Un contenedor resuelve estructura; el contenido lo define el padre cuando lo consume.
En lugar de crear `CardUsuario`, `CardProducto` y `CardNoticia` con el mismo esqueleto, puedes crear un `Card` base.
Ese `Card` recibe `children` y opcionalmente props de estilo o variantes para cubrir más casos con una sola pieza.
El resultado es menor duplicación y una librería interna de componentes más consistente.
children actúa como hueco de contenido dentro del componente reutilizable.
Composición no significa crear APIs imposibles de entender.
Si un componente contenedor acumula demasiada lógica, divide responsabilidades en capas.
La prioridad es mantener una API de uso clara para el equipo.
Aprende a diseñar componentes contenedor con `children` para reutilizar estructura y permitir contenido variable sin romper encapsulación.
Código del tema: Componentes, estado y render declarativo
Un contenedor resuelve estructura; el contenido lo define el padre cuando lo consume.
En lugar de crear `CardUsuario`, `CardProducto` y `CardNoticia` con el mismo esqueleto, puedes crear un `Card` base.
Ese `Card` recibe `children` y opcionalmente props de estilo o variantes para cubrir más casos con una sola pieza.
El resultado es menor duplicación y una librería interna de componentes más consistente.
children actúa como hueco de contenido dentro del componente reutilizable.
function Card({ title, children }) {
return (
<article className="card">
<h3>{title}</h3>
<div>{children}</div>
</article>
);
}
function App() {
return (
<Card title="Perfil">
<p>Contenido libre dentro de la tarjeta.</p>
</Card>
);
}Composición no significa crear APIs imposibles de entender.
Si un componente contenedor acumula demasiada lógica, divide responsabilidades en capas.
La prioridad es mantener una API de uso clara para el equipo.