React JSX

JSX lets you write HTML-like code inside JavaScript, and it is how React components describe the screen.

What is JSX?

JSX stands for JavaScript XML. It looks like HTML, but it lives inside a JavaScript file.

const heading = <h1>Welcome to Workownix</h1>;

The browser cannot read JSX directly. Vite turns it into normal JavaScript before the page loads. You do not need to do anything for this.

JavaScript Inside Curly Braces

Put any JavaScript expression inside { } and React shows its value.

function Receipt() {
  const item = "School bag";
  const price = 1800;
  const quantity = 2;

  return (
    <div>
      <h2>{item}</h2>
      <p>Quantity: {quantity}</p>
      <p>Total: Rs {price * quantity}</p>
      <p>Date: {new Date(2026, 9, 15).toDateString()}</p>
    </div>
  );
}

School bag
Quantity: 2
Total: Rs 3600
Date: Thu Oct 15 2026

An expression is anything that produces a value: a variable, a sum, a function call, a ternary a ? b : c. You cannot put statements like if or for directly inside { }.

Rule 1: Return One Parent Element

A component must return a single root element. This is wrong:

// Error: two elements side by side
return (
  <h1>Title</h1>
  <p>Text</p>
);

Wrap them in a <div>, or in an empty fragment <> </> that adds nothing to the page:

return (
  <>
    <h1>Title</h1>
    <p>Text</p>
  </>
);

Rule 2: Close Every Tag

In HTML some tags, like <img> and <br>, have no closing tag. In JSX every tag must be closed. Empty tags end with />.

<img src="/logo.png" alt="Shop logo" />
<br />
<input type="text" />

Rule 3: Use camelCase Attributes

Some HTML attribute names are reserved words in JavaScript, so JSX uses different names.

Inline Styles

In JSX the style attribute takes a JavaScript object. Property names use camelCase, so background-color becomes backgroundColor.

function Banner() {
  const boxStyle = {
    backgroundColor: "#0b5ed7",
    color: "white",
    padding: "12px",
  };

  return <div style={boxStyle}>Admissions open for the new batch!</div>;
}

The outer braces mean "JavaScript here", and the inner braces are the object itself. That is why you see {{ }} when the object is written directly.

Attributes With Values From Variables

You can use curly braces for attribute values too:

const photo = "/images/ayesha.jpg";
const name = "Ayesha";

const card = <img src={photo} alt={"Photo of " + name} width={120} />;

Do not put quotes around the braces. src="{photo}" would show the text {photo} instead of the value.

Comments in JSX

Inside JSX, write comments inside braces:

return (
  <div>
    {/* This is a comment and is not shown */}
    <p>Visible text</p>
  </div>
);

Exercise