0:00 Bueno, el primer ejercicio se trataba de crear un elemento h1 y una lista de al menos dos ítems utilizando la IPA de JavaScript, abrimos nuestro archivo index.html y encontrarás que ya está react agregado como en la lección anterior y que tenemos dos elementos llamados root, root1 y root2, que básicamente servirán como base para poder hostear o almacenar o dibujar los elementos que crearemos.

0:23 Lo primero es crear nuestro h1, utilizamos document.createElement h1, que es la forma de crear un elemento h1 con JavaScript y agregaremos la propiedad innerHTML para crear el contenido que estará dentro de la etiqueta h1. Ejecutamos ahora la lección número 3 en el terminal, abrimos localhost:3000 y podemos ver que todavía no hay nada en la pantalla, porque nos falta ahora agregar este elemento dentro del div que lo contendrá, en este caso llamado root.

0:58 Usamos appendChild y agregamos h1, podemos ver en pantalla que tenemos hola mundo. Primera tarea realizada, la segunda parte de esta tarea o ejercicio es crear una lista del menos dos ítems, para eso crearemos un elemento ul document.createElement ul y agregaremos los elementos li document.createElement li y a cada uno de estos elementos li le agregaremos el contenido interno, en este caso para el l1 elemento 1, copiamos, creamos el elemento 2.

1:34 Ahora tenemos que agregar este ul dentro del root para que pueda estar dibujado, pero podemos ver acá que solamente tenemos el elemento ul, nos falta también agregar los li dentro de ul, utilizamos ul.appendChild l1, copiamos y l2. Y ahora sí tenemos nuestros elementos, como puedes ver la api es bastante imperativa. Tenemos la segunda parte hecha, vamos al siguiente ejercicio, utilizar react para crear lo mismo, primero partiremos con un elemento h1, crearemos nuestro nuevo elemento que llamaremos title, react.createElement, muy similares las apis, agregamos h1 que es la etiqueta que queremos crear y aquí viene la primera gran diferencia, en vez de utilizar el atributo innerHTML nosotros utilizamos aquí el concepto de props, que es un objeto que describe los atributos de este elemento.

2:27 Hay una prop particular que se llama children, que es la que describirá lo que va dentro de la etiqueta, entonces creamos el objeto atributo children o la mundo. Elemento title creado, pero todavía no está en la interfaz, porque necesitamos ahora decirle a react que se renderice dentro de alguna parte, para eso utilizamos react-dom.render y le decimos renderiza o dibuja el elemento title dentro del elemento root2, correcto, ahora tenemos nuestro hola mundo dentro de root2, tal como lo teníamos antes con solo javascript.

3:05 Ahora crearemos elementos anidados utilizando también la api de react, lo que queremos es escribir este holamundo con un etiqueta strong, para eso hacemos un nuevo title2, creamos básicamente lo mismo, así que lo copiamos y necesitamos crear este nuevo elemento strong, para eso creamos una nueva constante, strong igual a react.createElement, el nombre
del etiqueta strong y utilizaremos el nuevo children de esta etiqueta que será mundo.

3:35 Y ahora viene la parte de anidar, children es una prop que recibe un elemento o un arreglo de elementos, por lo que podemos pasar hola, que es un string que es renderizable y el elemento que acabamos de crear llamado strong, reemplazamos acá por title2 y podemos ver que se ha renderizado exactamente lo que esperamos, la gran diferencia entre la api de react y la api de javascript es que api utiliza props de manera declarativa y es la hora de resolver nuestro crédito extra, para eso volvemos a nuestro archivo index.html, en este caso vamos a crear un elemento lista con dos elementos li, al igual que lo hicimos con la api de javascript, pero lo haremos con react.createElement, primero crearemos un elemento li, react.createElement.li y le pasaremos como prop children el contenido que tendrá dentro, luego crearemos un segundo li, pero haremos algo diferente, no le pasaremos ninguna props null y utilizaremos el tercer argumento de react.createElement que básicamente reemplaza children

4:46 Es lo mismo, idéntico a esta forma de escribirlo, ahora crearemos nuestro elemento ul2, por tanto pasamos el tipo como ul, no le pasamos ninguna prop y ahora utilizaremos otro atributo del tercer argumento de react.createElement que permite recibir un arreglo o una lista de varios elementos simplemente separados por coma, así que le pasamos li1 y li2, ahora renderizamos dentro de root2 y tenemos ya nuestros elementos en pantalla, de la misma manera que lo teníamos con la versión de javascript, ahora lo hicimos simplemente utilizando la api de react.