JSX: HTML inside JavaScript

The first thing that looks strange in React is JSX — HTML-like syntax written inside JavaScript. return <h1>Hello</h1> isn't a string and isn't really HTML; it's JSX, React's way of describing UI. It feels odd at first but quickly becomes natural, and it's how you write everything you see on screen in React.

JSX looks like HTML

JSX lets you write HTML-like markup right in your JavaScript. It's not a string (no quotes) and not HTML in a file — it's a special syntax that React (via a tool called Babel) turns into JavaScript that builds the UI. You write what looks like HTML, and it becomes real elements on the page. For multi-line JSX, wrap it in parentheses ( ... ) (as above) for clarity.

JSX must return one root element

A component must return a single root element — you can't return two sibling elements at the top level. Here everything is wrapped in one <div>. If you don't want an extra <div>, React offers a Fragment (<> ... </>) — an invisible wrapper:

The <>...</> (Fragment) groups elements without adding an extra DOM node — useful when you don't want a wrapper div. Either way: one root per component.

JSX differences from HTML

JSX is almost HTML, but a few things differ because it's really JavaScript:

• className instead of class — class is a reserved word in JavaScript, so JSX uses className for CSS classes.
• Close every tag — even self-closing ones need the slash: <img />, <br />, <input />.
• camelCase attributes — onclick becomes onClick, tabindex becomes tabIndex.

These small differences trip up beginners, but they're quick to learn. The big one is className (not class) — you'll use it constantly for styling.

The mistake beginners make

Using class instead of className (the most common JSX mistake — class silently doesn't apply your CSS class as expected). Also, returning multiple top-level elements without a wrapper (an error — wrap them in a <div> or Fragment <>). And forgetting to close self-closing tags (<img> must be <img /> in JSX). Remember: className, one root element, and close every tag. These become automatic fast.

Your turn

Your turn

1. Write JSX — HTML-like syntax inside JavaScript — and render it.
2. Return a single root element (wrap siblings in a
   or a Fragment <>...</>).
3. Use JSX's differences: className (not class), close every tag, camelCase attributes.

Key points

• JSX is HTML-like syntax inside JavaScript — React's way of describing UI (not a string, not real HTML).
• A component must return ONE root element; wrap siblings in a
  or a Fragment (<>...</>).
• JSX differs from HTML: use className (not class), close every tag (), and camelCase attributes (onClick).
• Multi-line JSX is wrapped in parentheses for clarity; JSX becomes real DOM elements when rendered.