JSX

Overview

JSX looks like HTML but compiles to React.createElement calls. It keeps UI structure close to logic. Expressions go inside curly braces; attributes use camelCase (className, onClick).

Syntax / Usage

const element = <h1 className="title">Hello, {name}</h1>

// Attributes
<img src={logo} alt="Logo" />
<button onClick={handleClick} disabled={isLoading}>
  Submit
</button>

// Fragments (no extra DOM node)
<>
  <Header />
  <Main />
</>

// Conditional and lists
{isLoggedIn ? <Dashboard /> : <Login />}
<ul>
  {items.map((item) => <li key={item.id}>{item.name}</li>)}
</ul>

// Style object
<div style={{ marginTop: 16, color: 'var(--text)' }} />

Examples

Dynamic class names:

function Alert({ type, message }) {
  return (
    <div className={`alert alert-${type}`}>
      {message}
    </div>
  )
}

Embed JavaScript logic inline:

function PriceTag({ price, currency = 'USD' }) {
  const formatted = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency,
  }).format(price)

  return <span>{formatted}</span>
}

Common Mistakes

• Using class instead of className and for instead of htmlFor
• Returning adjacent elements without a fragment or wrapper
• Putting if statements directly in JSX—use ternary, &&, or extract variables
• Self-closing tags missing / (<img />, <br />)

See Also

components props conditional-rendering use-state