Vue.js ❤️ JSX

3 min readJul 29, 2017

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.

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