JSX

🔍 What Is It?

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write UI structure inline with your logic. It looks like HTML but behaves like JavaScript.

• →JSX compiles to React.createElement() calls (React 17+ uses the new JSX transform — no import needed)
• →Every JSX element is a function call that returns a React element object
• →JSX is not a template language — it has the full power of JavaScript
• →Self-closing tags are required: <img />, <br />, <Input />
• →class becomes className, for becomes htmlFor (reserved JS words)
• →Inline styles are objects: style={{ color: 'red', fontSize: 14 }}

🎯 Why Do We Need It?

Before JSX, writing React looked like this:

React.createElement('div', { className: 'card' },
  React.createElement('h2', null, 'Title'),
  React.createElement('p', null, 'Content')
)

With JSX:

<div className="card">
  <h2>Title</h2>
  <p>Content</p>
</div>

JSX makes component trees readable, maintainable, and reviewable. Without it, deeply nested UIs become unreadable noise. It also enables tooling — linters, formatters, and IDEs understand JSX structure.

🏗️ What Happens in Real Projects?

JSX is used in every React component in every React project. In enterprise apps:

• →Conditional rendering — {isLoggedIn && <Dashboard />} or ternaries
• →List rendering — {items.map(item => <Card key={item.id} data={item} />)}
• →Dynamic class names — className={btn ${variant}} or libraries like clsx
• →Spreading props — <Input {...register('email')} /> (React Hook Form pattern)
• →Fragments — <><Header /><Main /><Footer /></> when no wrapper div is needed

⚙️ How It Works

Compilation pipeline:

1. You write JSX in .tsx / .jsx files
2. Babel (or SWC/esbuild) transforms JSX to React.createElement() calls
3. React 17+ new JSX transform auto-imports from react/jsx-runtime — no manual import React needed
4. At runtime, createElement returns a plain JS object: { type, props, key, ref }
5. React's reconciler compares these objects to the previous render (diffing)
6. Only changed DOM nodes are updated

Key rules:

• →Every JSX expression must have a single root element (or Fragment)
• →JavaScript expressions go inside {} — not statements (no if, for directly)
• →null, undefined, false render nothing — useful for conditional rendering

💻 Example

JSX Patterns You Will Use Every Day — From basic syntax to real-world conditional and list rendering patterns.

// JSX compiles to: React.createElement('div', { className: 'card' }, ...)
const Card = ({ title, count, active }: CardProps) => (
  <div
    className={`card ${active ? 'card--active' : ''}`}
    style={{ borderRadius: 8 }}
  >
    {/* Comments inside JSX use this syntax */}
    <h2 className="card__title">{title}</h2>

    {/* Conditional rendering — ternary */}
    {count > 0
      ? <span className="badge">{count}</span>
      : <span className="badge badge--empty">0</span>
    }

    {/* Short-circuit: only renders when active is true */}
    {active && <span className="status">Active</span>}
  </div>
);

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits