JSX — A Formal View (JavaScript + XML Syntax Extension)

JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to describe UI structures using a markup-like syntax embedded directly in JavaScript code. At a conceptual level, JSX is not HTML and it is not executed by browsers directly. Instead, it acts as a declarative representation of a UI tree which is later transformed into standard JavaScript function calls during compilation. Compilation Model A JSX expression such as: const element = <h1>Hello World</h1>; is transformed by a compiler (e.g., Babel) into: const element = React.createElement("h1", null, "Hello World"); or in modern React runtimes: import { jsx } from " react/jsx-runtime " ; const element = jsx ( " h1 " , { children : " Hello World " }); Why it is called JavaScript + XML The name originates from two characteristics: JavaScript Integration JSX exists inside JavaScript. Any JavaScript expression can be embedded using "{}". const name = " Quddus " ; const element = < h1 > Hello { name } </ h1 >; XML