A Note on JSX

What is JSX?

JSX is an XML-like syntax extension to ECMAScript that was introduced in 2013 with React and has no stated semantics. It is NOT designed for engines or browsers to implement. It is NOT a proposal to add JSX to the ECMAScript specification. It's designed to be utilized by different preprocessors (transpilers) to convert these tokens to ECMAScript.

JSX Syntax

transpiles to ⇒

As we can see from the above example, JSX is an HTML-like syntax for creating JavaScript that is tied to the virtual DOM.
Under the hood, JSX is converted to a virtual DOM.

Why use JSX?

It has a low barrier to entry. JSX is the closest thing we have to pure HTML and CSS right now. Without learning another templating language or dealing with various layers of abstraction, you can quickly include parts of JavaScript in your templates with JSX. Anyone who is acquainted with HTML, CSS, and JavaScript should be able to read and comprehend JSX templates with ease.

TypeScript support. The compilation of TSX files with type-checking is supported by TypeScript. This implies that if you misspell an element's or attribute type's name, the compilation will fail and an error message will appear, pointing to your error. TSX files are also supported by popular IDEs like VS Code, which provide code completion, refactoring, and other important capabilities.

Security. To avoid attacks like cross-site scripting, JSX takes care of the standard output sanitization difficulties.

Difference between JS and JSX

The JSX syntax is an HTML-like syntax that we can use with React to (theoretically) make creating React components simpler and more natural. The sole goal is to make creating React components simpler. There isn't much more to say. Creating huge, hierarchical HTML pages using JS syntax would be a pain in the neck without JSX; JSX merely simplifies the process.