Attribute name mappings

The most common attribute renames: class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, colspan → colSpan, rowspan → rowSpan, cellpadding → cellPadding, crossorigin → crossOrigin, autocomplete → autoComplete, autofocus → autoFocus, enctype → encType, datetime → dateTime.

// JSX essentials

// Expressions in curly braces
<h1>{user.name}</h1>
<p>{isLoggedIn ? "Welcome" : "Login"}</p>

// Conditional rendering
{isAdmin && <AdminPanel />}
{error ? <Error msg={error} /> : <Content />}

// List rendering
{items.map(item => <li key={item.id}>{item.name}</li>)}

// Spread props
<Button {...buttonProps} />

// Fragment (no extra DOM node)
<>{children}</>

// Dynamic tag
const Tag = isHeading ? "h1" : "p";
<Tag>{text}</Tag>

SVG attribute names in JSX

SVG attributes with hyphens become camelCase: stroke-width → strokeWidth, fill-opacity → fillOpacity, stroke-linecap → strokeLinecap, clip-path → clipPath, font-size → fontSize, text-anchor → textAnchor, dominant-baseline → dominantBaseline. The viewBox attribute is already camelCase and stays unchanged.

Event handler patterns

HTML event attributes are lowercase (onclick, onchange, onsubmit). In JSX they're camelCase: onClick, onChange, onSubmit. Instead of inline JavaScript strings, pass function references: onClick={handleClick} or arrow functions: onClick={() => doSomething()}. The event object is a React SyntheticEvent.

Conditional rendering patterns

JSX doesn't support if/else in expressions. Use ternary operators: {isLoggedIn ? <Dashboard /> : <Login />}. For show/hide, use logical AND: {showModal && <Modal />}. For multiple conditions, extract the logic into a variable or function before the return statement.