Components & JSX

The plain-language idea

A component is just a JavaScript function. What makes it a React component is one convention: it returns a description of some UI instead of a number or a string.

JSX is the <div>...</div>-looking syntax you write that description in. It looks like HTML, but it isn't — it's sugar that compiles to plain function calls, before your code ever reaches the browser.

See it in a real thing: what JSX actually becomes

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

That JSX compiles to this — no magic, just a function call that returns a plain object describing "an h1 with this text":

function Greeting({ name }) {
  return React.createElement("h1", null, "Hello, ", name);
}

Nothing here touches the DOM. Greeting({ name: "Ada" }) just returns a description — a React element, a plain object — the same way Math.max(1, 2) returns a number. React's renderer is the separate piece that later takes that description and turns it into real DOM nodes.

function Card() { return <div>Hi</div>; } — a component is just a function that returns a description of UI.

BackNext

What people usually miss

Watch out

• A component is not a template — it's a function that runs. "Rendering" means React calling your function and reading what it returns, not React "filling in" some HTML file.
• Same props in, same JSX out. A component should be a pure function of its props (and state) — calling it twice with the same inputs should describe the same UI both times. Side effects (fetches, subscriptions, timers) don't belong directly in the function body; they belong in useEffect.
• JSX with no elements is still valid. return null; is a completely normal component — it renders nothing.
• Lowercase vs capitalized tags mean different things. <div> compiles to a string (a real HTML tag); <Greeting> compiles to a reference to your function. That's also why component names must start with a capital letter — lowercase would be read as an HTML tag.

Why this matters in interviews

"What does JSX compile to?" checks whether you actually understand a component as a function, not a template — and everything else in React (props, state, hooks, re-rendering) is a direct consequence of that one fact.