JSX Expressions

JSX allows you to write dynamic markup. By wrapping JavaScript expressions in curly braces {}, you can inject variables directly into your HTML.

function App() {
  const name = "Alice";
  const unreadCount = 4;

  return (
    <div>
      <h1>Welcome back, {name}!</h1>
      <p>You have {unreadCount * 2} notifications.</p>
    </div>
  );
}

You can put any valid JavaScript expression inside the braces:

• Variables: {name}
• Math: {2 + 2}
• Function calls: {formatDate(date)}
• Conditionals: {unreadCount > 0 ? 'New messages' : 'No messages'}