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.

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

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.

  1. Luego agregamos el plugin al archivo de configuración .babelrc
{
"presets": ["es2015"],
"plugins": ["transform-vue-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>
)
}
});

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

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