HTML to JSX

JSX attribute names are DOM property names, not markup names. `class` collides with a reserved word so it becomes `className`; `for` becomes `htmlFor`; `tabindex`, `colspan`, `readonly` and several dozen others become their camelCase property names. But `data-*` and `aria-*` keep their hyphens exactly as written, because React passes those straight through to the DOM — a converter that camelCased them would break them. An unknown hyphenated attribute is left alone rather than guessed at, on the same principle.

A `style` string becomes an object with camelCased properties and string values. The values stay strings on purpose: React appends “px” to a bare number for most properties but not all, so a converter that dropped units would quietly change how the page looks. Every void element closes itself, because JSX has no void elements. A comment becomes an expression. A brace in ordinary text has to be escaped, or it becomes JavaScript. And a component may only return one node, so several top-level elements are wrapped in a fragment.

An inline `onclick` is dropped, with a note. It is a string of JavaScript evaluated against the global scope, and the JSX equivalent is a function reference in your component that only you can write — emitting `onClick="doThing()"` would look converted and do nothing, which is worse than leaving it out. A `<script>` or `<style>` block cannot hold raw text in JSX, so its content is emitted through dangerouslySetInnerHTML as a placeholder rather than lost. HTML entities are left as written: JSX understands the named ones in text but not inside attribute values. Nothing here validates the JSX, resolves components or splits a tree into them. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.