Why does class become className in JSX?

Because JSX compiles to JavaScript (React.createElement), and class is a reserved word in JavaScript (ES6 classes). React uses className to avoid the conflict. Similarly, for becomes htmlFor because for is a reserved word in JavaScript.

How do I convert inline styles?

HTML style="color: red; font-size: 14px" becomes JSX style={{color: "red", fontSize: "14px"}}. Note: property names are camelCase (fontSize not font-size), values are strings, and the outer braces are JSX expression delimiters while inner braces are the object literal.

TASK

Convert HTML to JSX for React

JSX is HTML with JavaScript expressions. Convert HTML to JSX by closing void tags, converting class to className, and style strings to objects.

1

JSX differs from HTML: all tags must be closed (<img /> instead of <img>), class becomes className, for becomes htmlFor, style is an object not a string, and inline event handlers use camelCase (onClick not onclick). The conversion automates these transformations.
2

HTML Minifier →
Minify the HTML before conversion to clean up whitespace and ensure consistent structure. This makes the JSX output cleaner and more predictable. Remove comments and unnecessary whitespace.
3

JS Formatter →
Format the resulting JSX for readability. The conversion from HTML to JSX produces valid React components — format to ensure proper indentation and syntax. Verify that all attributes were correctly renamed.
4

Manual fixes after conversion: HTML attributes that are reserved words (class → className, for → htmlFor), style="color: red" → style={{color: "red"}}, data-* and aria-* attributes stay as-is, SVG attributes use camelCase (stroke-width → strokeWidth). Self-close void tags (<br> → <br />).

Frequently asked questions

Why does class become className in JSX?: Because JSX compiles to JavaScript (React.createElement), and class is a reserved word in JavaScript (ES6 classes). React uses className to avoid the conflict. Similarly, for becomes htmlFor because for is a reserved word in JavaScript.
How do I convert inline styles?: HTML style="color: red; font-size: 14px" becomes JSX style={{color: "red", fontSize: "14px"}}. Note: property names are camelCase (fontSize not font-size), values are strings, and the outer braces are JSX expression delimiters while inner braces are the object literal.