JSX Explained: Why Mixing HTML and JS Isn't as Weird as It Looks

The classic web-dev rule was: separate structure (HTML), style (CSS), and behavior (JS) into different files. JSX looks like it violates that outright — markup sitting directly inside a JavaScript function. The objection is reasonable on its face; it just doesn't survive looking at what JSX actually compiles to.

What JSX actually is

// What you write:
function Greeting({ name }) {
  return <h1 className="title">Hi, {name}</h1>;
}

// What it compiles to (via Babel or the TypeScript compiler):
function Greeting({ name }) {
  return React.createElement('h1', { className: 'title' }, 'Hi, ', name);
}

JSX is syntax sugar over plain function calls — `React.createElement(type, props, ...children)`, which returns a plain JavaScript object describing that virtual DOM node. There's no actual HTML being parsed or interpreted at runtime; JSX is compiled away entirely before the code ever runs, into ordinary function calls building ordinary objects.

Why this reframes the original separation-of-concerns objection

The old rule separated by *file type* (HTML file, CSS file, JS file). JSX separates by *component* instead — a Button component's markup, its event handlers, and (with CSS Modules or Tailwind) frequently its styling too, all live together, because they're the same concern: "how does this one piece of UI work." That's not abandoning separation of concerns — it's separating along a different, arguably more useful axis: by component, not by file extension.

The actual practical benefit

Because it's just JavaScript underneath, JSX gets real language features for free that a template-string-based system doesn't: `{condition && <Banner />}` is genuine JavaScript conditional logic, not a special templating-language `{% if %}` syntax the framework has to separately parse and support. `.map()` over an array to render a list is the same array method you'd use anywhere else. The "weirdness" buys real expressiveness, using a language you already know instead of a second, smaller templating language layered on top.