JSX — HTML-looking JavaScript

JSX is syntax that looks like HTML inside JavaScript. A build tool (Vite + Babel/SWC) turns it into function calls. This:

const el = <h1 className="title">Hello</h1>;

is the same idea as React.createElement('h1', { className: 'title' }, 'Hello'). Browsers do not run JSX without that compile step.

Rules that trip beginners

• One parent. Return a single root, or a fragment: <>...</>.
• className not class. class is a reserved word in JavaScript. Same idea: htmlFor instead of for on labels.
• camelCase DOM props. onClick, tabIndex, backgroundColor in style objects.
• Braces for JavaScript. <p>{user.name}</p>. You can put expressions, not if statements, directly in braces. Use ternary or && for conditionals.
• Self-close empty tags. <img src={url} alt="" />.

function Hello({ name, loggedIn }) {
  return (
    <section>
      <h1>Hi, {name}</h1>
      {loggedIn ? <p>Welcome back.</p> : <p>Please log in.</p>}
    </section>
  );
}

JSX is not a string. Putting HTML in a string and assigning it to innerHTML is a different (and XSS-prone) path. Stay in JSX.