React JSX

React JSX: Writing HTML-Like Markup Inside JavaScript

React JSX (JavaScript XML) is a syntax extension that lets you write HTML-like tags directly inside JavaScript functions. Browsers cannot run JSX natively, so build tools like Babel, SWC, or Vite compile every JSX tag into standard JavaScript function calls before shipping code.

How JSX Compiles to JavaScript

When Vite builds your component, each JSX element becomes a jsx() runtime call (or React.createElement() in older setups). That call returns a plain JavaScript object describing the element type, props, and children.

// JSX source code
const heading = <h2 className="title">Welcome Back</h2>;

// Compiled JavaScript output
const compiled = React.createElement('h2', { className: 'title' }, 'Welcome Back');

Four Essential JSX Rules

1. Return One Root Element: Wrap sibling tags in a parent container or a Fragment (<>...</>). Returning two adjacent tags without a wrapper throws a syntax error.
2. Close Every Tag: Self-closing tags like <br />, <hr />, and <input type="text" /> must end with a forward slash in JSX.
3. Use camelCase Attributes: HTML attributes become JavaScript property names, so class becomes className, for becomes htmlFor, and tabindex becomes tabIndex.
4. Embed Expressions with Curly Braces: Place variables, function calls, or math inside { ... }. Statements such as for loops or if blocks are not allowed inside {}.

export function UserSummary({ user, unreadCount }) {
  const statusColor = user.isOnline ? '#16a34a' : '#64748b';

  return (
    <article className="user-summary">
      <h2>{user.fullName}</h2>
      <p style={{ color: statusColor }}>
        Unread alerts: {unreadCount}
      </p>
      <label htmlFor="quick-note">Quick note</label>
      <input id="quick-note" type="text" placeholder="Type here..." />
    </article>
  );
}

Common JSX Mistakes

• Passing Single Braces for Inline Styles: style="color: red" crashes in React because style expects a JavaScript object (style={{ color: 'red' }}).
• Rendering Objects Directly: Putting {user} inside JSX throws an "Objects are not valid as a React child" error. Render {user.name} instead.

Frequently Asked Questions

Is JSX mandatory for React?

No, you can call React.createElement manually, but JSX is the industry standard because nested UI trees stay readable.

How does JSX protect against XSS attacks?

React escapes all string values embedded inside {expression} braces before inserting them into the DOM, preventing injected script execution.

Can I write JavaScript comments inside JSX?

Yes. Wrap comments in curly braces using block comment syntax: {/* Comment inside JSX */}.