19
A Note on 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.
<Page index="1">
<h1>About me</h1>
<AboutMe content={aboutMeContent} />
</Page>
transpiles to ⇒
React.createElement(
Page,
{ "index": "1" },
React.createElement("h1", null, "About me"),
React.createElement(AboutMe, { content: aboutMeContent })
);
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.
Under the hood, JSX is converted to a virtual DOM.
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.
19