What is JSX, really? What does `<Foo bar={1} />` compile to, and why must components be capitalized?
Whether you understand JSX is syntax sugar over function calls that return plain objects, not HTML.
JSX is syntactic sugar — a compiler (Babel/tsc/swc) transforms each tag into a function call. Historically that call was React.createElement(type, props, ...children); since React 17's automatic runtime it's a _jsx(type, props) imported from react/jsx-runtime, which is why you no longer need React in scope to use JSX. The call returns a plain, immutable object — a React element — describing WHAT to render (type, props, key), not any actual DOM; React reconciles that object into the DOM later. Capitalization is the crux: a lowercase tag like 'div' compiles to a STRING type ('div'), meaning a host/DOM element, while a Capitalized tag like Foo compiles to a reference to the variable Foo (your component). So a lowercase component name is read as an unknown HTML tag and renders nothing useful — the compiler literally emits the string instead of your function. Attributes become the props object (bar={1} becomes {bar: 1}); nested content becomes props.children (a string, an element, or an array). Because JSX tags are just expressions, the curly braces embed any JS expression (not statements), and you can store elements in variables, return them from functions, and map arrays into them. className and htmlFor exist because 'class' and 'for' are reserved words. A Fragment (the empty-tag form) compiles to React.Fragment so you can return siblings without adding a wrapper DOM node. Finally key and ref are special-cased: React plucks them off and they are NOT passed to your component as props.
Explaining why components must be capitalized, why elements can live in variables, and what a React element actually is.
// This JSX...
const el = <Welcome name="Ada" className="greeting" />;
// ...compiles to a function call that returns a plain object:
const el2 = React.createElement(Welcome, { name: 'Ada', className: 'greeting' });
// -> { type: Welcome, props: { name: 'Ada', className: 'greeting' }, key: null }
// Capitalized -> component reference (Welcome, a variable)
// lowercase -> host element string ('div')
const dom = <div />; // React.createElement('div', null)