JSX Syntax

What is JSX

• JSX is a syntax extension for JavaScript, turned into regular JS by a compiler (e.g., Babel).
• Stricter than HTML: you must close tags like <br />.
• A component can’t return multiple siblings without wrapping them in a parent (e.g., <div>...</div> or <>...</>).
• Comments inside JSX: {/* This is a comment */}

function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <>
      <h1>Welcome to my app</h1>
      <MyButton />
    </>
  );
}

Fragments (<>...</>)

Wrap multiple elements without adding extra DOM.

<>
  <h1>Title</h1>
  <p>Content</p>
</>

Embedding Data

Use curly braces to insert variables or expressions:

return (
  <h1>{user.name}</h1>
);

You can also “escape into JS” from JSX attributes:

<img
  className="avatar"
  src={user.imageUrl}
/>

Conditional Rendering

Use regular JavaScript control flow or expressions:

// If/else outside JSX
let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return <div>{content}</div>;

Inside JSX, you can use the conditional ? operator:

<div>
  {isLoggedIn ? <AdminPanel /> : <LoginForm />}
</div>