JSX and Templates are two different things that are used by Javascript frameworks and libraries to show any content via DOM(Document Object Model). Nowadays there is a debate about using frameworks or libraries with JSX like ReactJs vs frameworks or libraries with Templates like VueJS. So there is a need to understand JSX and Templates.
When you will ask any developer working with React which one is better JSX or Template, then they will probably answer “JSX” but on the other side if you will ask this same question from a VueJS developer then they will answer “Template”. Their opinions are biased because ReactJS developers would be using “JSX” during their job and VueJS developer would be using “Template” during their job. So let us see an unbiased difference between JSX and Templates to clearly understand which one is better for you.
There are different libraries/frameworks that use JSX or Templates. But in this article, I will talk about JSX in the context of React and Templates in the context of vue
JSX: JSX stands for Javascript XML. It is used to show content over DOM without using any special functions. It is actually an XML(Extensible Markup Language) but it looks almost like HTML that’s why many developers confuse them and they often say “JSX is a way to write HTML in Javascript”. But this statement is completely wrong because JSX is an XML that can be written in Javascript and can be rendered over DOM. There are many differences between JSX and HTML. For example, in reacting JSX uses “className” for the “class” attribute of HTML tags because JSX can be written inside a Javascript file and in Javascript “class” is reserved for making classes. JSX always needs to be rendered by the render function in React. It is used to generate dynamic content over DOM that is not possible by HTML alone. When we were working with “.html” files then if we have to update any content then we have to use bulky Javascript methods. But in JSX we can use the benefits of both Javascript and HTML without that heavy javascript methods.
There are different ways in which we can use JSX like React or Preact. But here we will see working with JSX in React.
Steps involved in using JSX in React in the code given below:
- We will add 3 CDN(Content Delivery Network) in our HTML file.
- The first two is for writing React in HTML file and the third one i.e babel is for writing JSX
- We made a class component “GFG” and a functional component “Test” and wrote some JSX inside those.
- Here, the Functional component is the child component and the Class component is the parent Component
- After that rendered that class component(parent component) into an empty div to get the desired answer
Example:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>React JSX Example</title> <script src= </script> <script src= </script> <script src= </script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Test() { return <h3 style={{ textAlign: "center" }}> React JSX Example </h3>; } class GFG extends React.Component { render() { return ( <div> <h1 style={{ color: "Green", textAlign: "center" }}> neveropen </h1> <Test /> </div> ); } } ReactDOM.render(<GFG />, document.getElementById("mydiv")); </script> </body> </html> |
Output:
Templates: Templates are also another way to get dynamic content over DOM. It does not need any render function to display data but it can contain variables and expressions like JSX. In the Template approach, we can put an empty div in HTML as well as a div with some code in HTML. Here it is not necessary to put an empty div in HTML. Templates codes are converted into Javascript on the compilation.
There are different ways in which we can use templates but here we will see the working of Templates in Vue.
Steps involved in using Template in Vue in the code given below:
- We will add a CDN(Content Delivery Network) in our HTML file for using Vue
- Then created an <div> in HTML following a template-like approach
- After that in <script> tag, we created a Vue app
- Then passed data using that vue app in HTML’s body
- We also binded CSS with those to get a clear idea
Example:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue Template Example</title> </script> </head> <body> <div id="app"> <h1 :style="{color:'green',textAlign:'center'}"> {{ title }} </h1> <h3 :style="{textAlign:'center'}">{{subTitle}}</h3> </div> <script> const App = new Vue({ el: "#app", data: { title: "neveropen", subTitle: "VueJS Template Example", }, }); </script> </body> </html> |
Output:
Difference between JSX and Templates:
|
JSX |
Template |
|---|---|
| It makes the application more scalable. | It makes the application less scalable. |
| It uses the render function to update DOM. | It does not use the render function to update DOM. |
| There is no <template> tag for JSX. | There can be a <template> tag for Templates. |
| JSX functions can never be used in HTML file. | Templates can be used in HTML file. |
| It does not provide good optimization at Compile Time. | It provides better optimization than JSX at compile Time. |
| It is used by React, Preact, etc. | It is used by Vue, Glimmer, etc. |
