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.

Practice

1. Which attribute should you use in JSX to add CSS classes to an element?

easy

A. cssClass

B. class

C. className

D. styleClass

Solution

1. Step 1: Recall JSX attribute rules

   In JSX, the HTML attribute class is replaced by className because class is a reserved word in JavaScript.

2. Step 2: Identify correct attribute for CSS classes

   Therefore, to add CSS classes in JSX, you must use className.

3. Final Answer:

   className -> Option C

4. Quick Check:

   JSX uses className, not class [OK]

Hint: Remember: JSX uses className, not class for CSS classes [OK]

Common Mistakes:

• Using 'class' instead of 'className' causes errors
• Confusing 'className' with 'cssClass'
• Trying to use 'styleClass' which doesn't exist

2. Which of the following is the correct way to write a label with a 'for' attribute in JSX?

easy

A. Name

B. Name

C. Name

D. Name

Solution

1. Step 1: Understand JSX attribute naming

   In JSX, the HTML attribute for is replaced by htmlFor because for is a reserved word in JavaScript.

2. Step 2: Check correct casing and spelling

   The correct attribute is htmlFor with capital F, so <label htmlFor="inputId">Name</label> is correct.

3. Final Answer:

   <label htmlFor="inputId">Name</label> -> Option A

4. Quick Check:

   Use htmlFor, not for in JSX labels [OK]

Hint: Use htmlFor (camelCase) instead of for in JSX labels [OK]

Common Mistakes:

• Using 'for' attribute directly causes syntax errors
• Writing 'htmlfor' with lowercase f is incorrect
• Using non-existent attributes like 'forId'

3. What will be the rendered output of this JSX code?

const element = <input type="checkbox" checked="true" />;
ReactDOM.render(element, document.getElementById('root'));

medium

A. A checkbox input with checked attribute as string

B. A checked checkbox input

C. Syntax error due to checked attribute value

D. An unchecked checkbox input

Solution

1. Step 1: Analyze checked attribute in JSX

   In JSX, checked="true" without curly braces sets the prop to the string "true".

2. Step 2: Understand rendering of boolean attributes

   React renders <input type="checkbox" checked="true" />. Browsers treat the presence of the checked attribute (any non-empty value) as checked for uncontrolled checkboxes.

3. Final Answer:

   A checked checkbox input -> Option B

4. Quick Check:

   Attribute presence checks uncontrolled checkbox [OK]

Hint: checked="true" renders checked checkbox (attribute presence) [OK]

Common Mistakes:

• Thinking checked="true" leaves checkbox unchecked
• Expecting string value to cause syntax error
• Confusing uncontrolled render with controlled components

4. Identify the error in this JSX snippet:

const element = <div class="container">Hello</div>;

medium

A. Using class instead of className

B. Using double quotes instead of single quotes

C. Missing closing tag for div

D. Using semicolon inside JSX

Solution

1. Step 1: Check attribute names in JSX

   JSX does not use the HTML attribute class. Instead, it uses className because class is a reserved word in JavaScript.

2. Step 2: Verify other parts of the snippet

   The quotes and closing tag are correct. The semicolon is outside JSX and valid in JavaScript.

3. Final Answer:

   Using class instead of className -> Option A

4. Quick Check:

   JSX requires className, not class [OK]

Hint: Replace class with className in JSX attributes [OK]

Common Mistakes:

• Using class attribute causes React warnings or errors
• Thinking quotes style causes errors
• Confusing semicolon placement inside JSX

5. You want to apply inline styles to a JSX element to make text red and bold. Which is the correct way?

hard

A. Text

B. Text

C. Text

D. Text

Solution

1. Step 1: Understand JSX style attribute syntax

   In JSX, the style attribute expects a JavaScript object, so you use double curly braces: the outer for embedding JS, the inner for the object.

2. Step 2: Check property names and values

   CSS properties use camelCase in JSX, so fontWeight is correct. Values are strings like 'red' and 'bold'.

3. Final Answer:

   <div style={{color: 'red', fontWeight: 'bold'}}>Text</div> -> Option D

4. Quick Check:

   Use double braces and camelCase for inline styles [OK]

Hint: Use double braces and camelCase keys for JSX inline styles [OK]

Common Mistakes:

• Using string style attribute instead of object
• Missing curly braces around style object
• Using CSS property names with hyphens instead of camelCase