Why JSX?

JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. It's NOT a specification. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

The goal of JSX is to make it easier to write and maintain large JavaScript applications. JSX produces static analysis errors like TypeScript and provides editor support like Visual Studio Code.

In the past, large JavaScript applications were written using a "spaghetti" code style where every line of code is mixed together. This made the code difficult to read and maintain. JSX introduced a new way of writing JavaScript code using a "component" based approach.

In a JSX component, the HTML-like code is converted into JavaScript objects by a JSX preprocessor. These objects are then passed to a function that renders them to the screen. This approach makes it easy to modularize your code and keeps the HTML and JavaScript separate.

JSX is not a replacement for JavaScript. It's a compliment. You can still write regular JavaScript code alongside your JSX code.

One of the benefits of using JSX is that it makes your code more readable. When you write HTML in JavaScript, it's easy to forget which part is the JavaScript and which part is the HTML. With JSX, the HTML is clearly separated from the JavaScript.

Another benefit of JSX is that it performs better than "spaghetti" code. The reason for this is that JSX is converted into regular JavaScript objects. These objects are then passed to a function that renders them to the screen. This approach is more efficient than creating HTML strings and then inserting them into the DOM.

Overall, JSX is a useful tool for writing large JavaScript applications. It makes your code more readable and maintainable. It also provides editor support and static analysis errors. If you're looking for a way to modularize your code, JSX is a good option to consider.