Dev Basics · 4 min read
HTML vs JSX: The Differences That Trip You Up
JSX looks like HTML, which is exactly why pasted HTML so often breaks a React component. JSX is really JavaScript, so a few attribute names and rules change.
Try it yourself with the related tool.
Convert HTML to JSX →Advertisement
Renamed attributes
class becomes className and for becomes htmlFor, because class and for are reserved words in JavaScript. Most other attributes switch to camelCase: tabindex becomes tabIndex, onclick becomes onClick, and SVG attributes such as stroke-width become strokeWidth. The exceptions are data-* and aria-* attributes, which stay hyphenated.
Style is an object
Inline styles are written as an object with camelCased property names: style={{ marginTop: 8, backgroundColor: 'red' }}. Numbers are treated as pixels for most properties. A style string like style="margin-top: 8px" will throw an error.
Every tag must close
Void elements must be self-closed: <img />, <br />, <input />. A component must return a single root element — wrap siblings in a fragment <>...</>. HTML comments are not valid; use {/* comment */} instead.
Forms and events
Use defaultValue and defaultChecked for uncontrolled inputs, or value with an onChange handler for controlled ones — a value without onChange makes a read-only field. Event handlers receive functions, not strings: onClick={handleClick}, not onclick="handleClick()".