HTML Input
JSX Output
HTML vs JSX Differences
class → className: In JSX, the HTML class attribute becomes className since class is a reserved word in JavaScript.
for → htmlFor: The for attribute on labels becomes htmlFor in JSX.
Style strings → objects: Inline styles change from strings like "color: red" to objects like {{color: "red"}} with camelCase properties.
Self-closing tags: Tags like <img>, <br>, <hr>, and <input> must be self-closed in JSX: <img />.
SVG attributes: Hyphenated SVG attributes like stroke-width become camelCase: strokeWidth.