0:00 Comencemos por abrir nuestro index de la lección 7. Tenemos aquí tres componentes. Estos son los componentes que utilizaremos para probar nuestro modelo de composición. Tenemos navbar, pagebody y footer.
Y este componente layout llamado page, que tiene los slots o los espacios para nav, main y footer. Ahora, ¿cómo pasamos las prop correctas al componente page? Tenemos un ejemplo aquí con la prop nav, así que agreguemos las restantes. Main, que recibirá el componente pagebody. Y footer, que recibirá el componente footer. Con esto ya pasamos nuestros componentes dentro del componente layout llamado page. Ahora abramos nuestra terminal y ejecutemos la lección npm roundup.

0:41 Elegimos elección 7 y vemos que nuestro navegador se recarga, pero nada ha sido renderizado. Si revisamos los elementos, podemos ver que sólo tenemos nav, main, footer, tal como está definido en el componente page. Pero aún no podemos ver nuestros datos. Para eso tenemos que pasar las prop correctas acá, nav, main, footer, usando destructuring. Y luego simplemente utilizamos interpolación para renderizar estos componentes en las ubicaciones deseadas. Al actualizarse el navegador, podemos ver nuestros componentes renderizados exitosamente utilizando composición. Y para este crédito extra, se trata de crear props dentro de pagebody, footer y pasarlos directamente utilizando composición.

1:20 Para eso primero crearemos las prop necesarias en estos componentes, utilizaremos destructuring de nuevo. Pues tenemos dos props, la prop title, la agregaremos dentro de este h1 y la prop content. Ahora retornaremos un div que contendrá los elementos h1 y un elemento p para poder agregar el contenido. Interpolamos la prop content. React necesita que se utilice un elemento padre siempre, por eso utilizamos este div.

1:49 Pero también podríamos escribirlo así, que hará uso de react fragment. React.fragment es lo mismo que escribir simplemente las flechas. Ya veremos cómo funciona aquello. Ahora utilizaremos footer, que recibe una prop llamada content. La renderizamos utilizando interpolación. Y ahora, ¿cómo pasamos estas props directamente a nuestros componentes? Ya que estas props no pasan por medio de page. Las definiremos dentro de nuestro componente app, title, main content y footer. Ahora simplemente debemos pasar nuestras props a los componentes que la reciben.

2:25 En page body recibe la prop title y la prop content, cuyo valor será main content y lo mismo para footer. Al guardar se actualiza el navegador y renderiza nuestros componentes. Ahora veamos lo que realmente se renderizó. Podemos ver que utilizamos un fragmento react fragment. Y en efecto dentro del elemento main solo está renderizado el elemento h1 y pi. Pero si usamos div, tendremos renderizado un div extra. Aquí lo podemos ver. Que no siempre es necesario, por lo tanto react ofrece esta nomenclatura del fragmento react fragment para evitar crear divs innecesarios en la interfaz.