Lesson 3 +10 XP

JSX vs Traditional HTML

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like markup directly inside JavaScript files.

How JSX Works Under the Hood

Browsers do not natively understand JSX. Build tools like Babel or SWC compile JSX syntax into standard React.createElement() calls before execution.

// Written in JSX
const element = <h1 className="heading">Hello React</h1>;

// Compiled standard JS equivalent
const element = React.createElement(
  'h1',
  { className: 'heading' },
  'Hello React'
);

Major Differences Between JSX and HTML

Because JSX compiles into JavaScript objects, attributes follow JavaScript camelCase naming conventions.

Feature	Standard HTML	JSX Syntax
Class attribute	`class="btn"`	`className="btn"`
Label target	`for="email"`	`htmlFor="email"`
Inline Styles	`style="color: red; margin-top: 10px;"`	`style={{ color: 'red', marginTop: '10px' }}`
Self-Closing Tags	Optional (`<img src="...">`)	Mandatory (`<img src="..." />`)
JavaScript Expressions	Not supported directly	Embedded inside `{ ... }`

// JSX with camelCase attributes and inline style objects
function UserCard() {
  const user = { name: "Alice", role: "Developer" };
  const cardStyle = { backgroundColor: "#f4f4f4", padding: "16px" };

  return (
    <div className="card" style={cardStyle}>
      <label htmlFor="user-name">User:</label>
      <input id="user-name" type="text" value={user.name} readOnly />
      <p>Role: {user.role}</p>
    </div>
  );
}

Summary & TL;DR

JSX is a syntax extension that looks like HTML but compiles to JavaScript object calls (React.createElement()).
Use className instead of class, and htmlFor instead of for.
All self-closing tags (e.g. <img />, <input />) MUST be explicitly closed in JSX.
Styles are passed as JavaScript objects with camelCase property names.