JSX is a syntax extension that looks like HTML inside JavaScript. It is NOT valid JS — it gets compiled by Babel into React.createElement() calls.

// What you write
const el = 
Hello {name}
;

// What Babel compiles it to
const el = React.createElement('h1', { className: 'title' }, 'Hello ', name);

// React 17+ — new JSX transform (no need to import React)
import { jsx as _jsx } from 'react/jsx-runtime';
const el = _jsx('h1', { className: 'title', children: ['Hello ', name] });

Key rules:

• Single root element required (use <></> Fragment if needed)
• Use className not class, htmlFor not for
• Expressions in {} — not statements (if, for)
• Self-close empty tags: <img />, <br />
• camelCase for attributes: onClick, onChange