React: JSX vs HTML

At first glance, a React component looks exactly like an HTML document. However, React components are written in JSX (JavaScript XML), a syntax extension that allows developers to write HTML-like structures directly inside JavaScript files.

What are the primary differences between JSX and standard HTML?

Interviewers ask this basic question to ensure you understand that JSX is not parsed by the browser directly; it is syntactic sugar that compiles down to JavaScript function calls (React.createElement or _jsx in modern React).

1. Class vs ClassName

Because JSX is technically JavaScript, it cannot use JavaScript reserved keywords as attribute names.

In HTML, you apply CSS classes using the class attribute. Because class is a reserved keyword in JavaScript (used to declare ES6 classes), JSX uses className instead.

<!-- Standard HTML -->
<div class="card">Hello</div>
 
/* JSX */
<div className="card">Hello</div>

Similarly, the <label> element's for attribute must be written as htmlFor in JSX, as for is reserved for loops.

2. CamelCase Naming Convention

HTML attributes are generally lowercase (e.g., onclick, tabindex). JSX enforces standard JavaScript camelCase naming for all multi-word attributes and event handlers.

<!-- Standard HTML -->
<button onclick="submitForm()" tabindex="1">Submit</button>
 
/* JSX */
<button onClick={submitForm} tabIndex={1}>Submit</button>

3. Inline Styles are Objects

In standard HTML, inline styles are provided as a plain string. In JSX, inline styles must be passed as a JavaScript object, with property names written in camelCase instead of kebab-case.

<!-- Standard HTML -->
<div style="background-color: red; font-size: 16px;">Error</div>
 
/* JSX */
<div style={{ backgroundColor: 'red', fontSize: '16px' }}>Error</div>

Note: The outer curly braces define a JS execution block, and the inner curly braces define the object literal.

4. Self-Closing Tags are Mandatory

In HTML, certain tags like <img>, <input>, and <br> do not require a closing slash. They are called "void elements".

In JSX, every tag must be closed. If an element has no children, it must strictly use a self-closing trailing slash.

<!-- Standard HTML -->
<img src="logo.png">
<input type="text">
 
/* JSX */
<img src="logo.png" />
<input type="text" />

5. Returning a Single Parent Element

An HTML document can have multiple sibling tags at the root level. However, because JSX compiles into a JavaScript function return value, a component can only return a single root element.

/* JSX Error: Adjacent JSX elements must be wrapped in an enclosing tag */
return (
  <h1>Title</h1>
  <p>Subtitle</p>
);
 
// Fix: Wrap in a div or a Fragment
return (
  <>
    <h1>Title</h1>
    <p>Subtitle</p>
  </>
);

Senior-Level Interview Answer

JSX is a syntax extension that allows developers to author UI structures alongside JavaScript logic. Under the hood, compilers like Babel transform JSX into React.createElement calls (or the modern _jsx runtime). Because JSX is fundamentally JavaScript, it must adhere to JS syntax constraints. Consequently, reserved language keywords like class and for are mapped to className and htmlFor. Furthermore, all event handlers and DOM attributes adhere strictly to camelCase conventions (onClick, tabIndex), inline styles are constructed using JS objects rather than strings, and XML parsing rules enforce that all void elements (like img and input) must be explicitly self-closed. Lastly, JSX expressions must return a single top-level node, requiring adjacent elements to be wrapped in a Fragment.

Common Interview Mistakes

❌ Forgetting curly braces for variables

When migrating HTML to JSX, beginners often try to concatenate strings for dynamic attributes like image paths. In JSX, you must drop the quotes and use curly braces to evaluate JavaScript variables.

// Incorrect
<img src="images/ + {imageName}" />
 
// Correct (String interpolation inside JS block)
<img src={`images/${imageName}`} />