← React Beginner Questions - Set 1 Q4

What is JSX?

React Beginner Questions - Set 1

JSX is sugar. The compiler turns every tag into a function call, which is why this example is exact rather than approximate.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13

// What you write
const greeting = <h1 className="title">Hello</h1>;

// What the compiler produces (classic runtime)
const compiled = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

// Expressions go inside braces; attributes use camelCase
const user = { name: 'Ana' };
const card = <p>Welcome, {user.name.toUpperCase()}</p>;

What to notice

• `className` instead of `class`, `htmlFor` instead of `for` — JSX attributes follow DOM property names.
• JSX is not HTML string concatenation: `{...}` embeds any JavaScript expression, including function calls.
• It needs a build step — Babel, SWC or esbuild — because browsers cannot parse it.