¿Y JSX?

Clase 28 de 29 • Curso de Manipulación del DOM

Carlos Eduardo Gomez García

teacher•

Jajaja JSX no es propio de React 👀 (o tal vez sí y nos lo robamos 🤔), como sea, en Vue también tenemos JSX y podemos escribir los mismos decoradores, es por eso que siempre decimos que "si vienes de React, aprender Vue te será muy fácil", simplemente porque en Vue puedes escribir HTML mediante templates o mediante Render Functions (JSX), en Vue tienes acceso a HyperScript y a JSX. . Hay un profesor de aquí de Platzi de Vue que un día hizo un stream en Twitch explicando esto más a detalle y la verdad es que es increíble, es más, aquí les dejo el stream por si quieren aprender Render Functions con JSX en Vue 👀 créditos al profe @ianaya89

@youtube

Pero en resumen, JSX es maravilloso para crear HTML más complejo desde JavaScript!

Pablo Verduzco

student•

React developer here. 🙋🏻‍♂️ . Hace unos días empece con la inquietud de empezar con Vue.js, ¿alguna recomendación?

Carlos Eduardo Gomez García

teacher•

No he tocado React, no sé que tanta similitud tenga con Vue, pero puedo decirte que Vue es muy fácil de aprender 👀 Puedes tomarte la ruta de Vue en orden aquí de Platzi, aunque los cursos son viejos, los conceptos aún aplica (para Vue 2, si los vas a tomar hazlo con Vue 2), a no ser que tomes el de Vue 3 jaja . Y lo digo, sé que muchos dicen que si vienes de React, Vue te será muy fácil aprenderlo porque Vue tiene un módulo llamado "Render Functions" que prácticamente usa JSX (al igual que React). . En Platzi te enseñan a usar Vue con templates (porque es la forma nativa y más recomendada de Vue), pero hay un curso que toca muy por encima las render functions con JSX en Vue. . Aunque si quieres aprenderlo con Render Functions después de mirarte unos cuantos cursos de Vue... puedes mirar el stream que puse acá arriba donde explica un poco más a profundidad las Render Functions y JSX en Vue 👀 . Pero lo más importante:

Jimmy Buriticá Londoño

student•

Aprendimos las bases para trabajar con cualquier framework o directamente con JavaScript. Me encanto este curso ... 🚀

Rodrigo Ramos Xochiteotzin

student•

🤯🤯🤯🤯🤯🤯🤯🤯🤯

Luis Alejandro Vera Hernandez

student•

blow my mind

fermin martin

student•

Uoo, con esto se cierra el círculo!! que brutal. 🔥

Oscar Gomez

student•

Luego de ver como funciona react siento que todo este camino que he recorrido tiene al fin un sentido. jejejejejeje. Estoy emocionado. Like si tu también.

David Galeano

student•

Hyperscript

Es una dependencia que nos permite crear elementos, agregar propiedades y agregar elementos en el DOM de una forma más sencilla y amigable.

npm

npm install hyperscript

yarn

yarn add hyperscript

Agregando nodos de la forma tradicional

// Imagen
const imagen = document.createElement("img");
imagen.className = "mx-auto";
imagen.width = "320";
imagen.dataset.src = `https://randomfox.ca/images/${random()}.jpg`;

Con hyperscript

const imagen = h('img.mx-auto', {
    width: '320',
    'data-src': `https://randomfox.ca/images/${random()}.jpg`,
  })

más información sobre hyperscript:

JSX

Gracias a jsx, en React la implementación es mucho más sencilla porque ellos agregaron un decorador que permite la inclusión de clases y propiedades en el DOM dentro de etiquetas parecidas a las etiquetas de html ejemplo:

const container = <div className="p-4 mt-3"><imagen /></div>

Eduardo Rodriguez

student•

Para ser los mejores debemos entender los fundamentales 😁

Francisco Murillo

student•

para quienes lo están haciendo en mayo del 2022 o adelante, para cargar la imagen ya no se usa "data-src", si no, simplemente "src":

 const image = h("img.mx-auto", {
        width: "300",
        src : `https://randomfox.ca/images/${randomer()}.jpg`,
    });

Santiago Lopera Naranjo

student•

¿Qué tan común es crear web en el día de hoy, usando vanilla JS?, es decir sin Frameworks o librerias como React, Vue, Angular...

andrés eduardo betancourt bescanza

student•

Hoy en dia diria que es muy comun uso de estos frameworks

David Granados

student•

Es muy común pero depende del equipo de trabajo o de la empresa y de las necesidades del proyecto (complejidad de los requerimientos para las interacciones del usuario con la web y tiempos de entrega o deadlines de dichos requerimientos), yo he trabajado en dos proyectos grandes (+ de 2 años de desarrollo) donde no hubo falta usar un framework para el javascript.

Sebastian Heredia

student•

Como el dijo "parece una blasfemia todo esto" increíble el poder de todo esto. :o

Carlos Rodríguez

student•

Wao este curso me ha hecho la persona más feliz de platzi!

Eduardo Gonzalez Zavala

student•

Después de tomar un proyecto que excedía mis capacidades como dev y aprender react sobre la marcha me doy cuenta de mucho que ayuda comprender la bases de manera solida, muy buena informacion

Brandon Argel Verdeja Domínguez

student•

¿Qué es JSX?

JSX es una extensión de JavaScript creada por Facebook para el uso con su librería React. Sirve de preprocesador y transforma el código a JavaScript. De primeras te puede parecer que estás mezclando código HTML dentro de tus ficheros JavaScript, pero nada más lejos de la realidad.

React tiene sus propias funciones para crear elementos y componentes:

// Se pueden hacer de 3 principales formas
const Title = () => <h2>¡Hola!</h2> // Arrow functions
function Title () {
	return <h2>¡Hola!</h2>;
}
class Title extends React.Component {
  render() {
    return <h2>¡Hola!</h2> ;
  }
}

// También se pueden pasar props
const Title = ({name}) => <h2>¡Hola {name}!</h2>
<Title name="Brandon" /> // ¡Hola Brandon!

Estas formas anteriores de JSX son sólo azúcar sintáctica de las funciones con las que trabaja por debajo React, que son Muy parecidas a las de JavaScript:

// En JavaScript
nodo.createElement("button")
nodo.className = "container"
node.textContent = "Click me!"

// En React
// React.createElement(component, props, ...children)
// Nota: ¡Los children pueden ser más nodos!
React.createElement("button", {className: "container"}, "Click me!")

Daniel David Mármol Rivero

student•

const createImageNote = () => {
    // const imagen = document.createElement('img');
    // imagen.class = "mx-auto";
    // imagen.width =  "320";
    // imagen.dataset.src = `https://randomfox.ca/images/${random()}.jpg`;
    const imagen = jsx("img.mx-auto", {
      width: '320',
      "data-src": `https://randomfox.ca/images/${random()}.jpg`,
      },
    });
    container.appendChild(imagen);
    // const container = document.createElement('div');
    // container.className = "p-4";
    const container = jsx('div.p-4.mt-3', imagen)

    // jsx -> html (React)
    // const container = <div classname="p-4 mt-3"><imagen></imagen></div> Decorador para que por dentro se transforme en h hipertscript y por debajo se usa JSX.
    return container;
}

Naldo Duran

student•

👌

Juan Diego Loaiza Martinez

student•

Wow que cool esto de jsx

Sebastian Moreno Olivera

student•

Wow que grande este curso

Anfernee Valera

student•

Este curso me ha hecho muy feliz 🥰 ha estado muy bueno

Cristian David Contreras López

student•

Aún me pierdo un poco en el uso de funciones a veces se colocan con () y en el caso que no se colocan los paréntesis no me queda claro, tengo entendido de que se referencia y en el otro se ejecuta pero cuando debo usar uno y el otro?

Jonathan David Olivos

student•

What is JSX?
Hyperscript

Luis Fernando Rodriguez Boett

student•

He tenido la oportunidad de usar React y Vue.

Vue tiene una ruta de aprendizaje corta mientras que react tiene una ruta de aprendizaje intermedia

Vue funciona de manera Reactiva y React de forma Funcional

Recomiendo probar ambos :star2:.

// Se pueden hacer de 3 principales formas
const Title = () => <h2>¡Hola!</h2> // Arrow functions
function Title () {
	return <h2>¡Hola!</h2>;
}
class Title extends React.Component {
  render() {
    return <h2>¡Hola!</h2> ;
  }
}

// También se pueden pasar props
const Title = ({name}) => <h2>¡Hola {name}!</h2>
<Title name="Brandon" /> // ¡Hola Brandon!

// En JavaScript
nodo.createElement("button")
nodo.className = "container"
node.textContent = "Click me!"

// En React
// React.createElement(component, props, ...children)
// Nota: ¡Los children pueden ser más nodos!
React.createElement("button", {className: "container"}, "Click me!")

const createImageNote = () => {
    // const imagen = document.createElement('img');
    // imagen.class = "mx-auto";
    // imagen.width =  "320";
    // imagen.dataset.src = `https://randomfox.ca/images/${random()}.jpg`;
    const imagen = jsx("img.mx-auto", {
      width: '320',
      "data-src": `https://randomfox.ca/images/${random()}.jpg`,
      },
    });
    container.appendChild(imagen);
    // const container = document.createElement('div');
    // container.className = "p-4";
    const container = jsx('div.p-4.mt-3', imagen)

    // jsx -> html (React)
    // const container = <div classname="p-4 mt-3"><imagen></imagen></div> Decorador para que por dentro se transforme en h hipertscript y por debajo se usa JSX.
    return container;
}

¿Y JSX?

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones