What does JSX stand for?
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: ... });