JSX en Vue 3

Fecha de publicación: enero 17, 2021

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+
Share on whatsapp
WhatsApp
Share on email
Email

JSX es una forma de escribir código «HTML» utilizada por React. Se parece mucho al HTML tradicional, aunque JSX finalmente se convierte a código JavaScript.

El uso de JSX en Vue 3 puede ser muy útil, sobre todo para desarrolladores que estén más familiarizados con React y deseen desarrollar aplicaciones con Vue, será un camino de rosas.

En esta entrada vamos a ver una serie de ejemplos para aprender a utilizar JSX en Vue 3 utilizando jsx-netx y babel.

Instalar y configurar JSX en Vue 3

Lo primero que necesitamos es un proyecto con Vue 3, recomiendo utilizar VueCLI para generar el proyecto ya que es la configuración que estaré utilizando en esta entrada.

Ahora simplemente debemos añadir el plugin a babel y todo quedará funcionando:

Hola Mundo con JSX en Vue 3

Para no perder las buenas formas, vamos a empezar por realizar el típico hola mundo, pero en esta ocasión utilizando JSX en lugar de código JavaScript y HTML como lo haríamos normalmente en un proyecto Vue 3.

Como decía anteriormente, el código JSX se parece mucho al HTML, podemos decir que realmente es una mezcla de ambos.

La principal diferencia aquí es que el retorno del «HTML» lo hacemos directamente desde el setup, es decir, aquí no hay template.

Crear un contador con JSX en Vue 3

Veamos otro ejemplo, en este caso un par de botones para incrementar y decrementar un contador, el cual será una ref de Vue 3.

Algo a destacar aquí sería que en JSX sí debemos utilizar la propiedad .value de una ref, algo que no sucede con el compilador de Vue.

Fragmentos en Vue 3 con JSX

Cuando trabajamos con JSX en Vue 3 también podemos utilizar fragmentos, es decir, en lugar de tener un único elemento HTML en el primer nivel, podemos tener los que deseemos. El anterior ejemplo pasado a fragments quedaría de la siguiente forma:

Si te fijas en el return del setup verás que ya no hay un div como contenedor general, ahora están todos al mismo nivel.

Iterar datos en Vue 3 con JSX

En este momento no existe una directiva v-for en JSX como sí existe con el compilador de Vue, así que debemos hacer lo mismo que hace React, que es utilizar map para renderizar datos en la template.

Formularios en Vue 3 con JSX

También es posible crear formularios, y por supuesto con la reactividad que nos ofrece Vue. En este caso vamos a ver un pequeño ejemplo utilizando un componente capaz de generar campos de formulario a partir de props.

Puedes ver que lo más destacado aquí es ver cómo podemos utilizar v-model, que, aunque es cierto que existen más formas de hacerlo, ésta es lo suficientemente útil como para que la podamos utilizar en nuestros proyectos.

¿Quieres acceder a más de 100 cursos de PHP y JavaScript?

Vuejs, Laravel, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Quiero hacerme Premium
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register