JSX en Vuejs 2

Si no conoces JSX o no lo has escuchado nunca lo mejor es leer lo que dice sobre esto la Wikipedia: JSX (JavaScript XML) es una extensión de la sintaxis del lenguaje JavaScript. De apariencia similar a HTML, JSX proporciona una manera de estructurar la representación de componentes utilizando una sintaxis familiar para muchos desarrolladores. Los componentes de React normalmente se escriben utilizando JSX, aunque no tienen que serlo (los componentes también pueden estar escritos en JavaScript puro). JSX es similar a otra sintaxis de extensión creada por Facebook para PHP, XHP.

En Vuejs normalmente para renderizar HTML utilizamos una template de la siguiente forma:

Aunque ese código es 100% funcional y lo utilizaras en la mayoría de los casos, siempre es bueno tener alternativas, sobretodo si vienes del mundo de ReactJS y te gusta la sintaxis JSX.

 

JSX al poder en Vuejs 2

Para utilizar JSX en Vuejs 2 primero debemos instalar 2 dependencias relacionadas con Babel para que nuestro código pueda ser interpretado de forma correcta al momento de hacer la compilación. Para ello basta con añadir las 2 siguientes líneas a las dependencias de tu archivo package.json:

Una vez tengas estas dependencias instaladas, abre el archivo de configuración babel.config.js y modifica los presets por lo siguiente:

En este momento lo recomendable sería que volvieras a reiniciar el servidor de Vuejs para que todo quede ligado, y a continuación, podríamos utilizar la siguiente sintaxis en nuestros componentes para utilizar JSX en Vuejs 2.

Es importante fijarnos en los 2 siguientes puntos ya que es realmente lo que ha cambiado en nuestro componente.


¡Este componente no tiene una template asociada!

Este componente renderiza su contenido a través del método render


De esta forma tan sencilla a partir de ahora podemos utilizar JSX en Vuejs 2 con todas las ventajas que nos ofrece esta sintaxis.

Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register