Vue.js ❤️ JSX

Por qué JSX ?

En el mundo las comparaciones son inevitables y no podemos dejar de hacerlo con los frameworks JavaScript. React es probablemente la alternativa mas popular y mas utilizada del momento. La razón de este post se debe a que el gran problema que ven los desarrolladores que vienen del mundo React se debe a que “odian” o no se acostumbran al sistema de templates de Vue.js.

Esto es claramente opinable y debatible pero a mi particularmente me gustan los templates en HTML: permiten generar un código mas prolijo, entendible y fácil de mantener.

El punto importante es que en Vue.js los templates en HTML son opcionales, o mejor dicho la manera de crear templates es flexible: gracias a la función render puedo generar templates utilizando código JavaScript o (mucho mas simple) incorporando JSX. A mi entender, esta es una de las características mas poderosas del framework y quizás de las menos conocidas. He aquí este post 😉.

Para quienes no sepan o entraron a este post porque el tierno ❤️ les conquisto el alma, JSX es una extension de JavaScript que permite escribir y enlazar sintaxis XML con código.

Por qué JSX y no JavaScript?

Función Render con JavaScript 😕

render (createElement) {
return createElement(
'span',
{
class: { 'my-class': true },
on: { click: this.hello }
},
[ this.msg ]
);
},

Función Render con JSX 👌

render () {
return (
<span class={{ 'my-class': true }} on-click={ this.hello } >
{ this.msg }
</span>
)
}

Es fácil darse cuenta, incluso con un componente tan básico como este, que escribir templates en vanilla JavaScript puede resultar tedioso (por no decir “insano”). Con JSX podemos lograr prácticamente la misma sintaxis que tendríamos con HTML y por lo tanto mantener el código semántico y legible.

Como usar JSX en Vue.js?

Ahora vamos a lo importante: aprender que necesitamos para dejar de usar React y pasarnos definitivamente a Vue.js 😜.

Como ya sabemos (o no), JSX no es algo que sea soportado nativamente por los navegadores. Para poder utilizarlo debemos recurrir a babel.

  1. Lo primero que debemos hacer es instalar el plugin de babel JSX y Vue.js: babel-plugin-transform-vue-jsx (asumiendo que ya tenemos babel instalado y configurado).
  2. Luego agregamos el plugin al archivo de configuración .babelrc
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}

3. Lo ultimo que nos queda es codear el template utilizando JSX:

new Vue({
el: '#app',
data: {
msg: 'Show the message.'
},
methods: {
hello () {
alert('This is the message.')
}
},
render(h) {
return (
<span class={{ 'my-class': true }} on-click={ this.hello } >
{ this.msg }
</span>
)
}
});

Para esta explicación asumimos que tenemos un proyecto de Vue.js ya configurado con babel y/0 webpack funcionando. Si no lo tienen, pueden forkear el proyecto que dejo al final del post donde ya hay una configuración sencilla que les va a servir para experimentar.

De esta manera muy sencilla y con un simple plugin incorporado a nuestro proceso de compilación es como podemos empezar a programar nuestros templates de Vue.js utilizando JSX.

Si tu argumento es que no te gusta la sintaxis de los templates nativos de Vue.js (eventos, directivas, expresiones), ahora no hay excusa 😬.

Mi nombre es Ignacio Anaya, soy desarrollador Full Stack, Mentor y Embajador de AuthO. Si te interesa lo que escribo, no dejes de seguirme en @ianaya89 ✍️.

Podes encontrar la demo funcional en este link y el código de esa demo en este repositorio.

--

--

Full Stack Developer, Speaker and Auth0 Ambassador. Passionate about code, teach and field hockey. Mostly working with JavaScript, Vue.js and Node.js. 🚀

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ignacio Anaya

Full Stack Developer, Speaker and Auth0 Ambassador. Passionate about code, teach and field hockey. Mostly working with JavaScript, Vue.js and Node.js. 🚀