Migrating HTML templates to React means rewriting your markup as JSX. While JSX looks similar to HTML, there are critical differences that will cause compilation errors if overlooked. This guide covers every change you need to make.
Convert HTML to JSX automatically with our free tool →
Why JSX Is Different from HTML
JSX is not HTML. It's a syntax extension for JavaScript that compiles to React.createElement() calls. Because JSX lives inside JavaScript, it follows JavaScript rules — and several HTML attribute names clash with JavaScript reserved words.
The compiler will throw errors if you use standard HTML attributes like class or for in JSX. Understanding these differences is essential for any React migration.
Key Attribute Differences
These are the most common attributes that must change when converting HTML to JSX:
| HTML | JSX | Reason |
|---|---|---|
class | className | class is a reserved JS keyword |
for | htmlFor | for is a reserved JS keyword |
tabindex | tabIndex | JSX uses camelCase |
readonly | readOnly | JSX uses camelCase |
maxlength | maxLength | JSX uses camelCase |
onclick | onClick | JSX uses camelCase |
style="color: red" | style={{ color: "red" }} | JSX style is an object |
The Style Attribute
In HTML, style is a string. In JSX, it's a JavaScript object with camelCase property names:
<!-- HTML -->
<div style="background-color: #f0f0f0; font-size: 14px; margin-top: 20px;">
Hello
</div>
// JSX
<div style={{ backgroundColor: "#f0f0f0", fontSize: "14px", marginTop: "20px" }}>
Hello
</div>All CSS property names must be camelCased: background-color becomes backgroundColor, font-size becomes fontSize, z-index becomes zIndex.
Self-Closing Tags
HTML allows some tags to be unclosed (void elements). In JSX, every tag must be explicitly closed:
<br>→<br /><hr>→<hr /><img src="...">→<img src="..." /><input type="text">→<input type="text" /><meta charset="utf-8">→<meta charSet="utf-8" />
<!-- HTML -->
<img src="photo.jpg" alt="Photo">
<input type="email" placeholder="Email">
<br>
// JSX
<img src="photo.jpg" alt="Photo" />
<input type="email" placeholder="Email" />
<br />Event Handlers
HTML uses lowercase event attributes as strings. JSX uses camelCase with function references:
<!-- HTML -->
<button onclick="handleClick()">Click me</button>
<input onchange="handleChange()" onfocus="handleFocus()">
// JSX
<button onClick={handleClick}>Click me</button>
<input onChange={handleChange} onFocus={handleFocus} />In JSX, event handlers receive a SyntheticEvent, not a native DOM event. React normalizes events across browsers for consistent behavior.
Comments in JSX
HTML comments (<!-- ... -->) are not valid in JSX. Use JavaScript block comments wrapped in curly braces:
<!-- HTML comment -->
<div>Hello</div>
// JSX comment
<div>
{/* This is a JSX comment */}
Hello
</div>Common Pitfalls
- Forgotten
className— the most common migration error. Search and replace allclass=withclassName= - Inline styles as strings —
style="margin: 10px"will throw an error; use an object instead - Unclosed tags —
<img>or<br>without self-closing slash will fail - Adjacent elements — JSX must return a single root element; wrap siblings in
<>...</>(Fragment) - Boolean attributes — HTML
disabledbecomes JSXdisabled(same) or explicitlydisabled={true} - Curly braces in text — literal
{and}must be expressed as{'{'}and{'}'}
// Fragment wrapper for multiple elements
function App() {
return (
<>
<Header />
<Main />
<Footer />
</>
);
}Automate Your Migration
Manually converting large HTML files to JSX is error-prone. Our HTML to JSX converter handles all the transformations automatically — class to className, style strings to objects, self-closing tags, and more.