JSX vs HTML differences in React - Hands-On Comparison

JSX vs HTML Differences in React

📖 Scenario: You are building a simple React component to display a user profile card. You want to practice how JSX syntax differs from regular HTML.

🎯 Goal: Create a React functional component called UserProfile that renders a user card using JSX. You will learn how to write JSX attributes and elements that differ from HTML.

📋 What You'll Learn

Create a React functional component named UserProfile

Use JSX syntax to create a div container with a class name

Add an img tag with the correct JSX attribute for the image source

Add a label element with the correct JSX attribute for htmlFor

Use camelCase style for event handler attributes in JSX

💡 Why This Matters

🌍 Real World

React developers write JSX to create user interfaces that look like HTML but have special syntax rules.

💼 Career

Understanding JSX syntax differences is essential for React developers to build accessible and maintainable web apps.

1

Create the React component skeleton

Create a React functional component called UserProfile that returns a div with the class name profile-card. Use JSX syntax for the class name attribute.

React

function UserProfile() {
  return (
    
      {/* Your code here */}
    
  );
}

Hint

Remember in JSX, use className instead of class for CSS classes.

2

Add an image with JSX source attribute

Inside the div, add an img tag with the source set to "https://example.com/avatar.png" using the JSX attribute src. Also add an alt attribute with the text User Avatar.

React

function UserProfile() {
  return (
    
      {/* Add img tag with src and alt attributes here */}
    
  );
}

Hint

In JSX, src and alt attributes work like in HTML.

3

Add a label with JSX htmlFor attribute

Below the image, add a label element with the text Username:. Use the JSX attribute htmlFor set to username to link it to an input.

React

function UserProfile() {
  return (
    
      
      {/* Add label with htmlFor attribute here */}
    
  );
}

Hint

In JSX, use htmlFor instead of for in labels.

4

Add an input with JSX event handler

Add an input element of type text with the id username. Add an onChange attribute with an empty arrow function () => {} to show JSX uses camelCase for event handlers.

React

function UserProfile() {
  return (
    
      
      Username:
      {/* Add input with id and onChange handler here */}
    
  );
}

Hint

JSX uses camelCase for event handlers like onChange.

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