JSX Syntax

JSX looks like HTML but it is not. It is a syntax extension for JavaScript that Vite transforms into React.createElement calls before your code runs. Understanding where JSX differs from HTML prevents the most common beginner mistakes.

Expressions in JSX

Wrap any JavaScript expression in curly braces to embed it in JSX:

const name = 'ZeroBudget';
const version = 2;

function App() {
  return (
    <h1>{name} v{version}</h1>
  );
}

An expression is anything that produces a value: variables, function calls, ternary operators, arithmetic. Statements (like if, for, while) do not work directly inside JSX — use expressions instead.

Attribute differences

JSX attributes look like HTML attributes but follow JavaScript naming conventions:

HTML	JSX
class	className
for	htmlFor
onclick	onClick
tabindex	tabIndex

class and for are reserved words in JavaScript, so JSX uses className and htmlFor. Event handlers follow camelCase.

<div className="card">
  <label htmlFor="amount">Amount</label>
  <input id="amount" type="number" onChange={handleChange} />
</div>

Self-closing tags

In HTML, some elements do not need a closing tag: <input>, <img>, <br>. In JSX, every element must be closed — either with a closing tag or as a self-closing tag:

<input type="text" />   ✓ self-closing
<img src={url} alt="" /> ✓ self-closing
<input type="text">     ✗ error — not closed

Inline styles

Inline styles in JSX use an object, not a string. Property names are camelCase:

<div style={{ backgroundColor: '#1a1d27', padding: '1rem' }}>
  content
</div>

The outer {} embeds a JavaScript expression. The inner {} is the style object itself.

JSX is an expression

JSX is a JavaScript expression. You can store it in a variable, return it from a function, pass it as a prop, or use it in a ternary:

const message = <p>Welcome to ZeroBudget</p>;

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
}

What JSX compiles to

Vite transforms this:

<h1 className="title">Hello</h1>

Into this:

React.createElement('h1', { className: 'title' }, 'Hello')

You never write this manually, but knowing it exists explains why JSX feels like JavaScript — because it is.

Exercise

1. In App.jsx, declare a variable appName set to 'ZeroBudget' and render it inside an <h1> using a JSX expression.
2. Add a <div> with className="app" wrapping your content.
3. Add an <input> element. Make sure it is self-closing.
4. Use a ternary inside JSX to show one message if a variable ready is true and a different message if it is false. Toggle the variable and confirm both messages appear.

Recap

• JSX is JavaScript syntax sugar — Vite compiles it to React.createElement calls.
• Embed JavaScript expressions in JSX using {}.
• Use className instead of class, htmlFor instead of for, and camelCase event names.
• Every element must be closed — use self-closing tags for void elements.
• Inline styles take an object with camelCase property names.