Advertisement
Guide
About the HTML to JSX
Pasting HTML straight into a React component does not work. JSX is XML-strict, uses the DOM's property names rather than HTML's attribute names, treats style as an object, and reads a brace as the start of an expression.
This converter handles all of that, and tells you about the parts that need a human.
Why the attribute names change
JSX attributes are DOM properties, not HTML attributes, and the DOM uses camelCase with a few renames to avoid reserved words. class becomes className because class is reserved in JavaScript, and for becomes htmlFor for the same reason. data-* and aria-* are the exceptions and keep their hyphens.
Why style needs two sets of braces
style="font-size: 12px" becomes a JSX expression containing an object literal, so the outer brace opens the expression and the inner one opens the object. Properties are camelCased, except CSS custom properties, which keep their original name and stay quoted because they are not valid identifiers.
What cannot be converted
Inline event handlers are dropped and flagged, because onclick="doThing()" is a string of JavaScript, whereas React needs a function reference. The same applies to <script> blocks. These are listed as warnings so you reconnect them deliberately rather than discovering the gap at runtime.
One root element
A component must return a single node. If your HTML has several top-level elements they are wrapped in a fragment (<>…</>) — an invisible wrapper that groups children without adding an element to the DOM.
How to use it
- 1Paste HTML, or load the sample to see the common conversions.
- 2Set a component name, or turn the wrapper off to get bare JSX.
- 3Read any warnings about handlers that could not be converted.
- 4Copy the JSX into your project.
Frequently asked questions
Why does style use two sets of braces?
The outer braces open a JSX expression and the inner ones are the JavaScript object, so style={{ color: 'red' }} is an expression containing an object.
What happens to onclick?
It is removed and listed as a warning. An inline handler is a string of JavaScript, whereas React needs a function reference, which cannot be generated automatically.
Do data- and aria- attributes change?
No. They are the exception to the camelCase rule and keep their hyphens in JSX.
Does it handle SVG?
Yes. Hyphenated SVG attributes such as stroke-width become strokeWidth, which is what JSX expects.
Why was a fragment added?
JSX must return one root node. If your HTML has several top-level elements they are wrapped in a fragment, which groups them without adding a DOM element.