JSX: The benefits of using it with Vue JS you should explore

Vue.js has an easy API and several options for defining HTML templates in our components. We can use the <template> tag option, define a template property on our root component instance, or use Single-File components. The options above are awesome and work perfectly. However, there comes a time in the lifecycle of your application where they either feel clunky, over-engineered or very inflexible. So, why would we want to JSX instead of any of the other template definitions?

  • JSX is easy to read. <div>...</div> is subjectively better than this.$createElement('div', {}, [...])
  • It’s just JavaScript.
  • Vue has support for Vue JSX.
  • It makes custom Vue components easier to import and manage.

What is JSX?

JSX

If you already know about JSX, feel free to skip to the next section where I’ll show you how to use it in Vue.

JSX is a term coined by Facebook’s engineering team. It is an XML-like syntax extension to JavaScript without any defined semantics.

It is NOT intended to be implemented by engines or browsers. Instead, we’ll use transpilers like Babel to convert it to regular JavaScript.

 // this line below is an example of JSX
 const heading = <h1>Welcome to Scotch</h1>;

Basically, it lets us use an HTML-like syntax in JavaScript.

>>> Read more:

Reactivity in VueJS: Some useful understanding you need to know

Vue 3: Useful information you need to know about the Vue newest version!

Configure Vue to use

If you use Vue-cli greater or equal to version 3.0 you are in luck as it is supported.

If you are using an older version of Vue-cli that doesn’t support Vue JSX, you can add it by installing babel-preset-vue-app and your .babelrc file.

To install:

 # Using npm
 npm install --save-dev babel-preset-vue-app

# Using yarn
 yarn add --dev babel-preset-vue-app

In you .babelrc file, all you have to do is:

 {
     "presets": ["vue-app"]
 }

There, we can now use it in our component’s render function.

Vue JSX syntax gotchas

There are few gotchas to using Vue JSX

Firstly, you can no longer use the : and @ shortcuts for binding and listening to events. They are invalid JSX syntax and your code won’t compile.

To listen for events in JSX, we need the “on” prefix. For example, use onClick for click events.

 render (createElement) {
     return (
         <button onClick={this.handleClick}></button>
     )
 }

Then, modifiying events, use:

 render (createElement) {
     return (
         <button onClick:prevent={this.handleClick}></button>
     )
 }

To bind a variable, instead of : use:

 render (createElement) {
     return (
         <button content={this.generatedText}></button>
     )
 }

To set HTML string as the content of an element, instead of v-html use:

 render (createElement) {
     return (
         <button domPropsInnerHTML={htmlContent}></button>
     )
 }

We can also spread a large object.

 render (createElement) {
     return (
         <button {...this.largeProps}></button>
     )
 }

Using it in render

Going back to our initial “TextField” component. Now that we have Vue JSX enabled in our Vue app, we can now do this.

 render (createElement) {
     const inputAttributes = {
         class: 'input-field has-outline', // class definition
         onClick: this.handleClick // event handler
         backdrop: false // custom prop
     }
     const inputMarkup = this.multiline
         ? <textarea {...inputAttributes}></textarea>
         : <input {...inputAttributes}/>


    return inputMarkup
 }

Importing Vue Components

Another benefit to using Vue JSX is that we no longer have to register every component we need. So we just import and use.

import {Button} from '../components'

export default {
     render (createElement) {
         return <Button primary={true}>Edit</Button>
     }
 }

Also Read:
Vue JS vs React JS: Which is good choice for UI development

How to make it work with TypeScript

TypeScript is used as a mechanism that adds type-checking to JavaScript.

Next, to add JSX support to TypeScript all we need to do is modify our tsconfig.json.

To enable it in TypeScript, first save the file as a .tsx file and modify your tsconfig.json to include:

 {
   "compilerOptions": {
     ....
     "jsx": "preserve",
   }
 }

Setting the jsx option to “preserve” means that TypeScript should not process the JSX. Doing this lets Babel take control of everything and TypeScript stick to types as it does not yet support Vue JSX.

Then, create a jsx.d.ts file in your project and add the TypeScript JSX declarations for Vue.

import Vue, {VNode} from 'vue'

declare global {
   namespace JSX {
     interface Element extends VNode {}
     interface ElementClass extends Vue {}
     interface ElementAttributesProperty {
       $props: {}
     }
     interface IntrinsicElements {
 [elemName: string]: any
     }
   }
 }

Finally, make sure that TypeScript can load the declaration file. Or, you can add autoloading for it in tsconfig.json via:

 {
   "compilerOptions": {
     ...
     "typesRoot": ["./node_modules/@types", "./types"]
   }
 }

Conclusion

That’s it for today. Enjoy having some or all of information about Vue JSX. Let me know your thoughts and suggestions in the comments.

Looking for a web development company?

A development company is the best option if you’re planning a mid-sized or large project but don’t have your own team. To clarify, the biggest advantage of a software development company is that they can take ownership of the whole project.

In case you’re looking for web development services, you should take a look at ArrowHiTech services. ArrowHiTech services will make you be satisfied. We provides lots of cool services that you are seeking for your business. Let’s explore our services right now:

ArrowHiTech always stay here to help you !


Tags

Share