JSX is a language created to write code that looks more like HTML inside the render function's JavaScript code. It is effectively an XML-like extension to JavaScript. Our first previous example looks like this in JSX:

export default {
  props: ['message'],
  render (h) {
    return <p class="content">
      {this.message}
    </p>
  },
}

This is possible thanks to Babel, the library that is in charge of compiling our ES2015 JavaScript (or more recent) code into old ES5 JavaScript, which runs in older browsers such as Internet Explorer. Babel can also be used to implement new features into the JavaScript language (such as the proposed draft features that may appear in later versions) or entirely new extensions such as JSX.

The babel-plugin-transform-vue-jsx included in babel-preset-vue takes care of transforming the JSX code into real JavaScript code that uses the h function. So the previous JSX example will be transformed back into:

export default {
  props: ['message'],
  render (h) {
    return h('p', { class: 'content' }, this.message)
  },
}

Thankfully, vue-cli already has this enabled, so we can write JSX code in our .vue files!