Loading
Fundamentos de React(14 Lecciones)
Solución

El Mundo sin JSX

Crear elementos usando la API de Javascript

El primer ejercicio trata de crear un elemento H1 y una lista al menos dos item utilizando la API de Javascript.

Para esto debes abrir el archivo index.html en donde encontrarás que React está ya agregado y que tienes dos elementos llamados root: root1 y root2

Estos elementos root servirán como base para poder "hostear" o almacenar, dibujar los elementos que crearemos.

Lo primero es crear nuestro H1. Utilizamos document.createElement. Esta es la API que permite crear elementos y manipular sus atributos y propiedades

Ejecutamos ahora la lección número 3 en el terminal y podras ver que todavía no hay nada en la pantalla, ya que aún falta agregar este elemento dentro del div que lo contendrá en este caso llamado root.

Ahora podrás ver en pantalla que tienes el mensaje Hola Mundo.

La segunda parte de esta tarea o ejercicio es crear una lista del menos dos items.

Para eso, crearemos un elemento ul, al que agregaras los elementos li necesarios.

A cada uno de estos elementos li, le agregarás el contenido interno.

No olivdes que cada elemento creado debe "agregarse" a un contenedor padre para que sea dibujado en pantalla.

Utilizar React para create elementos.

En este caso utilizarás React para crear los mismos elementos anteriores.

Para crear elementos con la API de React usarás React.createElement que es similar a la API de javascript, pero a diferencia de la API imperative de JS, la api de React acepta parámetros, llamados props.

props es el nombre dado a un objeto que describe los atributos de este elemento.

Hay una particular una propiedad llamada children, que es la que describe lo que va dentro de la etiqueta.

Recuerda que para que React renderize los elementos creados estos deben ser "agregados" utilizando ReactDOM.

La segunda parte es crear elementos anidados.

children es una prop que puede recibir un arreglo de elementos lo que permite anidar múltiples elementos.

Crédito Extra

Crear un elemento lista con dos elementos li.

Para esto se deben utilizar elementos anidadados utilizando la api de React.

React.createElement acepta 3 o más argumentos:

  • El primero es el nombre del elemento a crear
  • El segundo es el objeto props (puede ser null)
  • El tercero (o subsiguientes) hacen referencia a los elementos children que el nuevo elemento aceptará. (al igual que props.children)

Transcripción

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.

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.

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.

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.

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.

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.

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

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.