JSX

Although this is a great thought exercise, templates are superior in most cases. There may be times where you want to use the render function inside of your components and, in these circumstances, it may be simpler to use JSX.

Let's add the babel plugin for JSX into our project by running the following in our Terminal:

$ npm i -D babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx

We can then update our .babelrc to use the new plugin:

{
 "presets": [
 ["env", { "modules": false }],
 "stage-3"
 ],
 "plugins": ["transform-vue-jsx"]
}

This allows us to rewrite our render function to take advantage of a simpler syntax:

render(h) {
 return (
  <div>
   <ul>
    { this.names.map(name => <ListItem name={name} />) }
   </ul>
  </div>
 )
}

This is much more declarative and is also easier to maintain. Under the hood, it's being transpiled down to the previous hyperscript format with Babel.