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 */}
    
  );
}

Need a 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 */}
    
  );
}

Need a 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 */}
    
  );
}

Need a 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 */}
    
  );
}

Need a hint?

JSX uses camelCase for event handlers like onChange.