JSX

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup directly in your JavaScript code. It's not required to use React, but virtually all React code uses it because it makes component structure visual and intuitive.

How JSX Works

JSX is not valid JavaScript — it must be compiled. Before React 17, Babel transformed <div className="hello">Hi</div> into React.createElement('div', { className: 'hello' }, 'Hi'), which is why every file needed import React from 'react'. Since React 17, the automatic JSX transform compiles to _jsx('div', { className: 'hello', children: 'Hi' }) — no React import required. The compiled output creates JavaScript objects (React elements) that describe what should appear on screen.

Key Differences from HTML

• className instead of class (because class is a reserved word in JavaScript)
• htmlFor instead of for on labels (same reason)
• Event handlers use camelCase: onClick, onChange, onSubmit (not onclick)
• Self-closing tags are required: <img />, <input />, <br /> (HTML allows <img> but JSX doesn't)
• style accepts an object with camelCase properties: style={{ backgroundColor: 'red', fontSize: '16px' }}
• All attributes use camelCase: tabIndex, autoFocus, readOnly
• JSX must return a single root element — use <>...</> (Fragment) to wrap multiple elements without adding a DOM node

Expressions in JSX

Curly braces {} embed any valid JavaScript expression: variables, function calls, ternary operators, array methods. Statements (if/else, for loops, switch) cannot be used directly inside JSX — use ternary expressions or extract logic before the return.

Conditional Rendering

Three common patterns:

• Ternary: {isLoggedIn ? <Dashboard /> : <Login />}
• Logical AND: {hasError && <ErrorMessage />} — renders nothing when hasError is falsy (but beware: {0 && <Component />} renders 0, not nothing — use {count > 0 && <Component />} instead)
• Early return: if (!data) return <Loading />; before the main JSX
• Return null to render nothing

XSS Protection

JSX escapes all embedded values by default — if you insert user input via {userInput}, it's treated as text, not HTML. This prevents cross-site scripting (XSS) attacks. To deliberately render HTML, you must use dangerouslySetInnerHTML={{ __html: sanitizedContent }} — the name is intentionally scary to discourage unsafe usage.

JSX is Just JavaScript

Since JSX compiles to function calls, you can assign JSX to variables, pass it as props, return it from functions, and put it in arrays. This is what makes React's composition model powerful — JSX elements are just values.

Key Interview Distinction

JSX is syntax sugar that compiles to React.createElement() (or jsx() with the automatic runtime). It is not a template language — it has the full power of JavaScript. The main differences from HTML are className, htmlFor, camelCase attributes, required self-closing tags, and object-style style props. JSX escapes values by default for XSS protection.