Conociendo JSX
Crear un elemento h1 usando JSX
En el archivo index.html escribirás la solución. Dentro del mismo encontrarás comentarios y código que implementa la solución usando la API createElement de React.
Ejecuta la lección usando la terminal.
El navegador no entiende JSX, para poder ejecutar JSX en el navegador debes "traducirlo" utilizando una herramienta como Babel, por lo que tendrás que agregarla en tus script
Crear elementos anidados usando JSX
Utilizando JSX crea una lista de 3 elementos utilizando ul y li.
Esto es similar al ejercicio anterior de anidación de elementos, simplemente deberás escribir los elementos como
si se tratase de etiquetas HTML
Como ves, la implementación de elementos anidados es sencilla al utilizar JSX y bastante declarativa en comparación con la API cruda.
Usando la lista antes creada ¿Cómo automatizarías la creación de múltiples items li ?
Para esto debes asumir que los elementos que quieres renderizar están agrupados en un arreglo, y dado que JSX es una
extensión de Javascript, usarás métodos nativos de Javascript para iterar sobre el arreglo.
Deberás utilizar un método que te permita iterar sobre el arreglo pero que retorne un nuevo arreglo para ser renderizado: Array.map, Array.filter, Array.some, etc.
Para esta operación debes usar las llaves {} entre el código JSX para poder ejecutar operaciones javascript, esto se llama interpolación y te permite salir del mundo de JSX (que recuerda es una forma declarativa de escribir una llamada a la función React.createElement) y entrar en el mundo de javascript puro.
Transcripción
Para comenzar con el primer ejercicio abrimos nuestro index.html de la lección número 4 y vemos que hay algunos comentarios que nos ayudarán. Lo primero que haremos es iniciar nuestra lección en la terminal npm-roamdev cargar localhost:3000 y veremos un hola mundo que está escrito aquí con la api cruda de react.create-element que fue lo que vimos en la lección anterior.
Ahora el trabajo es primero agregar babel simplemente descomentando este script aquí ya tenemos babel. Ahora tenemos que cambiar este module por text-babel para que babel pueda interpretar. Acá tenemos nuestro script text-babel y acá arriba está lo que babel creó por nosotros. Cabe decir que esta no es la forma de utilizar babel en modo de producción, eso se hace a través de herramientas de compilación o build, pero para el workshop funciona perfectamente.
Ahora crearemos nuestro primer elemento h1, utilizamos las etiquetas como si fuese html, h1 y escribimos el texto interior la prop-children. Además sabemos que tenemos un atributo llamado classname, lo agregamos como un atributo de html. Ahora le decimos a react que queremos renderizar este nuevo elemento, lo cambiamos aquí y podemos ver que en la pantalla dice hola mundo, aquí está nuestro script, aquí está nuestro resultado, aquí está el script tal como lo escribimos y aquí está la compilación hecha por babel, si te fijas es exactamente lo que teníamos antes con la api cruda de react.
Ahora hagamos un poco de nested, crearemos un hola mundo pero utilizando dos etiquetas, así que primero abrimos la etiqueta ht1, escribimos hola y utilizamos strong para escribir mundo y esto es tan simple como lo harías en html, la api es muy similar. Guardamos, cambiamos lo que queremos renderizar aquí y podemos revisar nuestro resultado, tenemos strong tal como lo hemos declarado y podemos ver el código que está idéntico como lo escribimos y el resultado que babel obtiene al transpilar, que son llamadas a react-create-element tal como lo teníamos en un principio.
Ahora para nuestro crédito extra la idea es crear una lista de elementos utilizando ul y edi, para eso simplemente crearemos un nuevo elemento llamado lista, utilizaremos las etiquetas ul, li, elemento1, cerramos la etiqueta, abrimos una nueva llamada elemento 2, cerramos nuestro ul y ahora cambiamos lo que queremos renderizar aquí en react-dom.render escribimos lista y tenemos en nuestra pantalla la lista de elementos tal como lo hemos declarado.
Babel cambia este script por su versión con la api cruda de react y podemos ver que es varias llamadas anidadas, algo poco adecuado de escribir. Ahora la parte 2 de este crédito extra es cómo podemos automatizar la creación de la lista. La pista es que podemos utilizar array map, imaginemos que los elementos están dentro de un arreglo de strings en este caso elemento 1 y elemento 2 y ahora cómo podemos renderizar automáticamente estos elementos.
Básicamente crearemos un nuevo elemento llamado lista y utilizaremos estas llaves que nos permiten interpolar, es decir ejecutar ciertas instrucciones de javascript. Utilizaremos array map que recibe una función para iterar sobre los elementos y para cada uno de estos elementos retornaremos un nuevo elemento jsx que renderiza el valor del elemento del arreglo. Llevamos a esta lista 2 y renderizamos lista 2. Tenemos en la pantalla exactamente lo mismo pero ahora podemos modificar el arreglo de elementos y ver su resultado en pantalla automáticamente.