Composición de Componentes
Uno de los conceptos que cambió radicalmente la forma en que desarrollamos aplicaciones en la web es la idea de utilizar componentes.
Los componentes son las bases de construcción, los bloques lego, que nos permiten crear estructuras más complejas que nos permitirán desarrollar una solución.
Una característica de este modelo de componentes es su capacidad de unirse o
La forma en que React facilita la composición de componentes es usando las props.
Las props son la forma en que los componentes se comunican entre si, es su API, una los componentes en React tienen una prop particular: children. Esta prop permite pasar diferentes valores: componentes, elementos, strings, números o incluso null
Los valores pasados por medio de la prop children son después renderizados por el componente que las acepta.
Esto permite que otros componentes puedan utilizar BoxContainer como padre.
Todo lo que este dentro del tag <BoxContainer> es considerado children y es pasado al componente BoxContainer.
Por lo general, estos componentes (como BoxContainer) que actúan como padres contenedores son componentes que definen la interfaz y estilo pero con poca o nada de lógica en si, es decir son componentes de Layout.
children es la prop por defecto para definir estos componentes de Layout y pasar componentes para que sean renderizados, pero ¿Qué ocurre si necesitas mas "espacios" dentro de tu interfaz?
Las prop pueden recibir cualquier tipo de dato, primitiva o función y un componente React es en esencia una función, entonces puedes crear una prop que reciba un componente.
En este ejemplo el componente Dashboard recibe dos nuevas props navbar y footer que aceptan un componente cada una. Si miramos dentro del componente podremos tener algo así.
Como resultado tenemos un componente que se encarga de renderizar las “piezas” de tu interfaz permitiéndote cambiar esas piezas como más adecuado sea.
Este proceso de composición es nativo a React y puede ser realmente poderoso permitiendo por ejemplo:
- Especialización: A veces tienes componentes genéricos y un componente casí idéntico pero que aplica a un caso de uso particular o especial. En este caso simplemente aceptas diferentes props en el componente genérico y creas un componente especial que define esas props.
- Manejo de estado: Si bien aún no hemos hablado de que es el estado dentro de tu aplicación, es bueno saber que este patrón de utilizar las props para pasar datos y componer componentes complejos es la forma “natural” de React de manejar y manipular el estado.
🐾 Primeros Pasos
En esta lección trabajarás en conocer un concepto base de React y el modelo de componentes: Composición.
Para eso crearás algunos componentes base con los que “compondrás” una interfaz más compleja.
🎯 Objetivos
- Conocer como pasar datos y componentes utilizando props y la prop
children. - Conocer y utilizar las props para pasar componentes.
- Utilizar composición como el patrón base para manipular datos y la interfaz.
🏋️♂️ Ejercicios
- Define que props debe utilizar el componente
Pagepara poder renderizar las distintas partes de la página - Utiliza interpolación para renderizar los diferentes componentes hijos
🍬 Crédito Extra
- Declara props en los componentes hijos:
PageBodyyFooter. Define estas props en el componenteApp. ¿Cómo puedes pasar estas props para ser renderizadas?
Transcripción
En esta ocasión, hablaremos de composición. Es un concepto que cambió radicalmente la forma en que desarrollamos aplicaciones, la idea de utilizar componentes. La gracia de los componentes es que funcionan como bloques de Legos, estructuras que te permiten crear otras estructuras más complejas.
Una característica de este modelo de componentes es la idea de la composición de unirse. La forma en que React habilita y facilita la composición es mediante el uso de props.
Los componentes en React tienen una prop en particular llamada children, como una especie de slot, una especie de espacio, un lugar, en donde todo lo que tu pase dentro de children será renderizado dentro de él.
En este caso, BoxContainer recibe todos estos componentes como children, y lo renderizará dentro de sí. Todo lo que está dentro de BoxContainer es considerado children, y lo renderizará en esta posición.
Por lo general este tipo de componentes, como BoxContainer, de ejemplo, son básicamente para manejar layout y estilos. Tienen poca o casi nada de lógica. ¿Qué pasa si tenemos [inaudible] de componente tipo layout pero necesitamos más lugares en donde instalar nuestros bloques de Lego?
Este ejemplo modifica BoxContainer y nos muestra que tenemos un componente llamado Dashboard que tiene un children pero también tiene dos props, navbar e footer, que recibe componentes. Esto es la forma nativa en que React soluciona el modelo de composición, permitiendo de pasar componentes como comillas, argumentos como props dentro de otro componente.
Como resultado, ahora tienes un componente que renderiza las diferentes piezas de la interfaz, permitiendo intercambiarla cuando sea necesario. Esto facilita muchas situaciones de manejo de estado o de especialización.
Los objetivos de esta lección es simplemente entender cómo utilizar las props para realizar este patrón de composición. Tenemos dos ejercicios que revisaremos a continuación utilizando props e interpolación y un crédito extra que nos permitirá pasar datos desde un componente para los componentes hijos.