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:
And then the JavaScript is added which will perform the functionality:
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:
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.
