Reserved words: class and for

The biggest gotcha: HTML's class attribute becomes className in JSX because 'class' is a reserved keyword in JavaScript. Similarly, the for attribute on <label> elements becomes htmlFor because 'for' is used for loops in JavaScript. These are the two most common conversion mistakes.

// HTML → JSX key differences

// 1. class → className
<div class="active">      →  <div className="active">

// 2. for → htmlFor
<label for="email">       →  <label htmlFor="email">

// 3. Inline styles: string → object
<div style="color: red">  →  <div style={{ color: "red" }}>

// 4. Self-closing tags required
<img src="a.png">         →  <img src="a.png" />
<br>                      →  <br />
<input type="text">       →  <input type="text" />

// 5. Event handlers: lowercase → camelCase
<button onclick="fn()">   →  <button onClick={fn}>

Inline styles are objects, not strings

In HTML you write style="color: red; font-size: 16px". In JSX, the style attribute takes a JavaScript object: style={{ color: 'red', fontSize: '16px' }}. CSS property names use camelCase (background-color becomes backgroundColor) and values are strings or numbers.

All tags must close

HTML allows void elements like <br>, <img>, <input>, and <hr> without closing. JSX requires every element to either have a closing tag or self-close: <br />, <img />, <input />, <hr />. Forgetting to self-close void elements is the most common JSX syntax error.

Comments use JavaScript syntax

HTML comments <!-- like this --> don't work in JSX. Instead, use JavaScript comments wrapped in curly braces: {/* like this */}. Multi-line comments work the same way. Comments outside of JSX expressions use standard // or /* */ JavaScript syntax.