No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
10H
29M
59S

驴Y JSX?

27/28
Recursos

Aportes 21

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渟i 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.

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

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 鈥渄ata-src鈥, si no, simplemente 鈥渟rc鈥:

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

Como el dijo 鈥減arece una blasfemia todo esto鈥 incre铆ble el poder de todo esto. 馃槷

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

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

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

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.