HTML to JSX: Everything You Need for React Migration

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:

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:

<!-- 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

// 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.

Try the HTML to JSX converter now →