react/JSX

JSX isn't HTML, even though it looks like it. It's syntactic sugar that a compiler (Babel, or the framework's built-in tooling) transforms into plain JavaScript calls that produce React elements — plain objects describing what should appear on screen, not actual DOM nodes. Writing <div>Hello</div> is really just a more readable way of writing a function call that returns { type: 'div', props: { children: 'Hello' } }.

Because JSX compiles to function calls, it inherits JavaScript's rules, not HTML's — attributes are camelCase (onClick, not onclick), class becomes className since class is a reserved word, and anything inside {} is evaluated as a JavaScript expression, not a string. Every JSX block also has to return a single root node, which is why Fragments (<>...</>) exist — a way to group elements without adding an extra wrapper div to the actual DOM.