¿Y JSX?
Clase 28 de 29 • Curso de Manipulación del DOM
Contenido del curso
Carlos Eduardo Gomez García
teacher•
hace 5 años
Pablo Verduzco
student•
hace 5 años
Carlos Eduardo Gomez García
teacher•
hace 5 años
Clase 28 de 29 • Curso de Manipulación del DOM
Contenido del curso
Carlos Eduardo Gomez García
Pablo Verduzco
Carlos Eduardo Gomez García
Jimmy Buriticá Londoño
Rodrigo Ramos Xochiteotzin
Luis Alejandro Vera Hernandez
fermin martin
Oscar Gomez
David Galeano
Eduardo Rodriguez
Francisco Murillo
Santiago Lopera Naranjo
andrés eduardo betancourt bescanza
David Granados
Sebastian Heredia
Carlos Rodríguez
Eduardo Gonzalez Zavala
Brandon Argel Verdeja Domínguez
Daniel David Mármol Rivero
Naldo Duran
Juan Diego Loaiza Martinez
Sebastian Moreno Olivera
Anfernee Valera
Cristian David Contreras López
Jonathan David Olivos
Luis Fernando Rodriguez Boett
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!
React developer here. 🙋🏻♂️ . Hace unos días empece con la inquietud de empezar con Vue.js, ¿alguna recomendación?
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:
Aprendimos las bases para trabajar con cualquier framework o directamente con JavaScript. Me encanto este curso ... 🚀
🤯🤯🤯🤯🤯🤯🤯🤯🤯
blow my mind
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.
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>
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`, });
¿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...
Hoy en dia diria que es muy comun uso de estos frameworks
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.
Como el dijo "parece una blasfemia todo esto" increíble el poder de todo esto. :o
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 = () => <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!")
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
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?
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:.