Vue.js Getting started with Vue.js Hello World in Vue 2 (The JSX way)
Example
JSX is not meant to be interpreted by the browser. It must be first transpiled into standard Javascript. To use JSX you need to install the plugin for babel babel-plugin-transform-vue-JSX
Run the Command below:
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
and add it to your .babelrc like this:
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
Sample code with VUE JSX:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
methods: {
handleClick () {
alert('Hello!')
}
},
render (h) {
return (
<div>
<h1 on-click={this.handleClick}>Hello from JSX</h1>
<p> Hello World </p>
</div>
)
}
})
By using JSX you can write concise HTML/XML-like structures in the same file as you write JavaScript code.
Congratulations, You're Done :)
