JSX para novatos

JSX es una extensión de JavaScript creada por Facebook para el uso con su librería React. Sirve de preprocesador (como Sass o Stylus a CSS) y transforma el código a JavaScript.

De primeras te puede parecer que estás mezclando código HTML dentro de tus ficheros JavaScript, pero nada más lejos de la realidad. A continuación te lo explico.

React al basar el desarrollo de apps en componentes, necesitamos crear elementos HTML que definan nuestro componente, por ejemplo <div>, <p>, <img>, etc...

También necesitaremos indicar cuando se trata de componentes creados por nosotros con React, como puede ser un <Image ></Image>, <List ></List>, etc...

Todo esto podemos hacerlo con JavaScript con los métodos que nos ofrece React como React.createElement. Veamos un ejemplo:

Imagina que quieres crear un componente <Icon ></Icon> que está definido por un div, un img y algunas clases de CSS. Con JavaScript sería algo así:

var image = React.createElement("img", {
  src: "react-icon.png",
  className: "icon-image",
});

var container = React.createElement(
  "div",
  {
    className: "icon-container",
  },
  image
);

var icon = React.createElement(
  "Icon",
  {
    className: "avatarContainer",
  },
  container
);

ReactDOM.render(icon, document.getElementById("app"));

Con esto tendríamos un componente <Icon ></Icon> que se traduciría al siguiente código HTML:

<div class="icon-container">
  <img src="icon-react.png" class="icon-image" />
</div>

Si tuviésemos el siguiente CSS:

.icon-image {
  width: 100px;
}
.icon-container {
  background-color: #222;
  width: 100px;
}

El resultado en el navegador sería así:

Ahora veamos como se haría lo mismo pero empleando sintaxis JSX:

var Icon = (
  <div className="icon-container">
    <img src="icon-react.png" className="icon-image" />
  </div>
);

ReactDOM.render(Icon, document.getElementById("app"));

Como puedes ver es mucho más práctico y legible esta sintaxis. Es prácticamente como escribir HTML pero no estás escribiendo HTML, es JavaScript.

Lo único que has de tener en cuenta es que hay algunas palabras reservadas en JavaScript y JSX te obliga a nombrar algunos atributos de otra manera, como es el caso de las class que para definir clases de CSS que con JSX debemos escribir className.

A medida que nuestra aplicación va creciendo y tenemos componentes más grandes, que manejan distintos eventos, esta forma de usar JSX nos va a ayudar mucho a agilizar nuestros desarrollos.

Recuerda, no es escribir HTML dentro de JS, es una forma de crear JS de una manera más práctica ;)

Para poder utilizar JSX, necesitarías añadir una librería extra a tu HTML, pero es más aconsejable utilizar un bundler integrado en tu entorno de desarrollo, como puede ser WebPack o Browserify, y que éste le aplique la transformación antes de publicar tu código en producción. De esto hablaré en próximas entradas.

Si quieres profundizar más sobre JSX, tienes este tutorial interactivo y también la documentación oficial de Facebook.