Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿Y JSX?

27/28
Recursos

Aportes 17

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

<h3>Hyperscript</h3>

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

<h3>JSX</h3>

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>

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.

Para ser los mejores debemos entender los fundamentales 😁

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

👌

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

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

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

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

¿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!")

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

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