javascript - What does JSX stand for?

Question

What does JSX stand for?

I am referring to the JSX that is defined as a XML-like syntax extension to ECMAScript, which has become quite popular with the increasing popularity of ReactJS.

Answer 1

JSX stands for JavaScript XML. With React, it's an extension for XML-like code for elements and components. Per the React docs and as you mentioned:

JSX is a XML-like syntax extension to ECMAScript without any defined semantics

From the quote above, you can see that JSX doesn't have defined semantics, it's just an extension to JavaScript that allows to write XML-like code for simplicity and elegance, and then you transpile the JSX into pure JavaScript function calls with React.createElement. Per the React tutorial:

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant.

Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.

Any code in JSX is transformed into plain JavaScript/ECMAScript. Consider a component called Login. Now we render it like so with JSX:

<Login foo={...} bar={...} />

As you can see, JSX just allows you to have XML-like syntax for tags, representing components and elements in React. It's transpiled into pure JavaScript:

React.createElement(Login, { foo: ..., bar: ... });

You can read more at the docs.