JSX vs HTML differences in React - Visual Side-by-Side Comparison

Concept Flow - JSX vs HTML differences

Write HTML-like code in JSX

↓

JSX syntax checks

↓

Convert HTML

↓

Fix class -> className

↓

JSX compiles to React.createElement calls

↓

React renders elements in DOM

JSX looks like HTML but has key differences in attribute names and syntax that React converts before rendering.

Execution Sample

React

const element = <label htmlFor="name" className="input-label">Name</label>;

This JSX code creates a label element with React-specific attribute names.

Execution Table

Step	JSX Code Part	Action	Result
1	<label htmlFor="name" className="input-label">	Read JSX tag and attributes	Recognize label tag with htmlFor and className
2	htmlFor="name"	Convert htmlFor to for attribute in DOM	Maps to for attribute in HTML DOM
3	className="input-label"	Convert className to class attribute	Maps to class attribute in HTML DOM
4	Text content: Name	Keep text as child node	Text node inside label
5	JSX compiles	Create React.createElement call	React element with props {htmlFor:'name', className:'input-label'}
6	React renders	Render element in browser DOM	<label for="name" class="input-label">Name</label> appears
7	End	No more JSX to process	Rendering complete

💡 All JSX parts processed and converted to valid DOM elements

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	Final
element	JSX code	{htmlFor:'name'}	{htmlFor:'name', className:'input-label'}	React element object	Rendered DOM element

Key Moments - 3 Insights

Why do we use className instead of class in JSX?

JSX uses className because class is a reserved word in JavaScript. The execution_table row 3 shows how className is converted to class in the final DOM.

What is the difference between htmlFor and for in JSX?

JSX uses htmlFor to avoid conflict with JavaScript's for keyword. Row 2 in execution_table shows htmlFor is converted to for in the DOM.

Does JSX output exactly the same HTML code we write?

No, JSX compiles to React.createElement calls and React renders the actual DOM elements. Execution_table rows 5 and 6 show this transformation.

Visual Quiz - 3 Questions

Look at the execution_table, what attribute does className in JSX become in the DOM?

A style

B className

C class

D id

💡 Hint

See execution_table row 3 where className is converted to class attribute

At which step does JSX convert htmlFor to for attribute?

A Step 2

B Step 1

C Step 4

D Step 6

💡 Hint

Check execution_table row 2 for htmlFor conversion

If we wrote class instead of className in JSX, what would happen?

A It would work exactly the same

B JSX would throw an error or warning

C The class attribute would be ignored

D React would convert it automatically

💡 Hint

Refer to key_moments about className usage and JSX syntax rules

Concept Snapshot

JSX looks like HTML but uses JavaScript-friendly attribute names.
Use className instead of class.
Use htmlFor instead of for.
JSX compiles to React.createElement calls.
React renders these as real DOM elements.
This keeps JSX and JavaScript syntax compatible.

Full Transcript

JSX is a syntax that looks like HTML but is used inside JavaScript for React. It has differences like using className instead of class and htmlFor instead of for because class and for are reserved words in JavaScript. When React processes JSX, it converts these special attributes to normal HTML attributes in the DOM. For example, className becomes class in the browser. JSX code compiles into React.createElement calls, which React uses to build the actual DOM elements you see on the page. This process ensures JSX works smoothly with JavaScript while producing valid HTML in the browser.