Vue.js ❤️ JSX

Ignacio Anaya
Jul 29, 2017 · 3 min read

Por qué JSX ?

Hace un tiempo vengo trabajando con Vue.js y de mas esta decir que me parece la mejor alternativa (front end) para desarrollar aplicaciones web. No solo por su rendimiento, sino también por su versatilidad y ecosistema. Básicamente con Vue.js puedo construir de manera sencilla cualquier tipo de proyecto: un prototipo o una aplicación robusta con SSR y manejo de estado.

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?

Si optamos por generar templates utilizando funciones render podríamos hacerlo con vanilla JavaScript. La respuesta de porque no seria la mejor idea es muy clara cuando analizamos los siguientes fragmentos de código:

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?

Si hasta acá les resulto aburrido, pido disculpas. Creo que la introducción era necesaria sobre todo para desarrolladores que vienen de otros frameworks.

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.

{
"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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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