3 years ago
by Shehroz Azam
JavaScript is an ECMAScript following scripting language which allows developers to make their web pages more interactive. Every time a webpage loads something, or a slideshow plays, or an animated picture is displayed, JavaScript is involved behind it. Basically it adds life and creativity into a website, making it more engaging.
JSX is just a syntax extension of JavaScript which allows users to write React components; React is an open source frontend JavaScript library for building complex UIs; it allows the programmers to create complex UIs from smaller components.
JSX or JavaScript XML combines HTML and JavaScript, making the code easier to read and understandable for the user. JSX combines interactivity with markup rather than separating the two. It makes it easier to visualize DOM. In JSX we can directly write HTML tags inside JavaScript code.
How are JS and JSX different?
Both JS and JSX are interchangeable but the difference lies in how the user interface is created and how functionality is split across the application.
For JS, a simple HTML is written first and the JS is written within the script tag as shown:
<div>
<h1>Fruit List</h1>
<ul id="fruit-list">
<li>Orange</li>
<li>Mango</li>
<li>Pear</li>
</ul>
</div>
And then the JavaScript is added which will perform the functionality:
<script>
function addItemToList() {
// Add item
}
</script>
But the similar code of JSX in React starts with a fixed HTML file:
And then the code is written which looks similar to HTML, but is JSX:
function FruitList(props) {
return (
<div>
<h1>Fruit List</h1>
<ul>
<li>Mango</li>
<li>Pear</li>
<li>Guava</li>
</ul>
</div>
)
};
In this way the functionality is also split up in components and hence making complicated applications easier to understand.
JSX isn’t necessary to use as React can be written with both JS and JSX, but JSX makes it easier for users to make React applications, as it is similar to HTML. It makes it easier to write and update HTML code, thus functionality is easier to handle.
Conclusion
JS is simply a scripting language, adding functionality into your website. JSX is an addition to the JavaScript syntax which is a mixture of both HTML and JavaScript. Both JS and JSX are interchangeable but JSX makes the code easier to understand for users. JSX is popularly used in React, as it makes the job of building an application much easier.
About the author
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
