¿Y JSX?

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

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

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

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

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.

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: https://github.com/hyperhype/hyperscript

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>

Para ser los mejores debemos entender los fundamentales 😁

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`,
    });

Como el dijo “parece una blasfemia todo esto” increíble el poder de todo esto. 😮

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

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

¿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 = () => <h1>¡Hola!</h1> // Arrow functions
function Title () {
	return <h1>¡Hola!</h1>;
}
class Title extends React.Component {
  render() {
    return <h1>¡Hola!</h1> ;
  }
}

// También se pueden pasar props
const Title = ({name}) => <h1>¡Hola {name}!</h1>
<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!")

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;
}

👌

Wow que cool esto de jsx

Wow que grande este curso

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

• What is JSX?
• Hyperscript

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 🌟.

WTFFFFFFFFFFFFFFFFFFFFFF , quiero aprender mas de JSX y empezar ya con React aaaaaaaaaaaaaaaaaa

no conocia hyperScript, es muy intuitivo de usar

Este curso estuvo genial!!! Gracias profe por sentar las bases para entrarle con toda a React.