JSX in React

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. It isn't HTML and it isn't a string: the build tool turns each tag into a function call that creates a plain JavaScript object. Once you know its handful of rules, JSX makes components easy to read.

Expressions in curly braces

Anything inside { } is a JavaScript expression: a variable, a calculation, a function call, a ternary.

const user = { firstName: "Asha", lastName: "Verma", points: 1240 };
const formatName = (u) => `${u.firstName} ${u.lastName}`;

export default function App() {
  const level = user.points >= 1000 ? "Gold" : "Silver";
  return (
    <div>
      <h1>Welcome back, {formatName(user)}</h1>
      <p>Points: {user.points.toLocaleString("en-IN")}</p>
      <p>Level: {level}</p>
      <p>Next reward in {2000 - user.points} points</p>
      <p>Today is a {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][new Date(2026, 10, 9).getDay()]}</p>
    </div>
  );
}

Welcome back, Asha Verma
Points: 1,240
Level: Gold
Next reward in 760 points
Today is a Mon

Attributes

const course = { title: "React.js", cover: "/img/react.png", url: "/learning/react" };

export default function App() {
  const isNew = true;
  return (
    <article className={isNew ? "card card--new" : "card"}>
      <img src={course.cover} alt={`${course.title} course cover`} width={320} />
      <a href={course.url}>{course.title}</a>
      <label htmlFor="email">Get updates</label>
      <input id="email" type="email" placeholder="you@example.com" disabled={false} />
      <p style={{ color: "#087ea4", fontWeight: 600, marginTop: 8 }}>Free course</p>
    </article>
  );
}

(image: React.js course cover) React.js Get updates [you@example.com…]
Free course

The double braces in style={{ … }} aren't special syntax: the outer pair means "JavaScript here", the inner pair is an object literal. aria-* and data-* attributes keep their dashes.

One root element, or a fragment

A component returns one value, so JSX must have a single parent. Returning two siblings is a compile error:

export default function Profile() {
  return (
    <h2>Asha Verma</h2>
    <p>Frontend developer</p>
  );
}

main.tsx(3,5): error TS2657: JSX expressions must have one parent element.

Wrap them in a fragment, <>…</>, which groups elements without adding an extra div to the page:

function Profile() {
  return (
    <>
      <h2>Asha Verma</h2>
      <p>Frontend developer</p>
    </>
  );
}

export default function App() {
  return (
    <section>
      {/* a comment inside JSX uses braces */}
      <Profile />
    </section>
  );
}

Asha Verma
Frontend developer

What JSX compiles to

// You write:
const el = <a href="/learning/react" className="link">React</a>;

// The build tool produces (React 17+ "automatic runtime"):
import { jsx as _jsx } from "react/jsx-runtime";
const el = _jsx("a", { href: "/learning/react", className: "link", children: "React" });

// …which returns a plain object, roughly:
// { type: "a", props: { href: "/learning/react", className: "link", children: "React" } }

That object is a React element – a description of what to show, not a DOM node. Lowercase tags (a, div) become HTML elements; capitalised ones (Profile) are your components. That's why component names must start with a capital letter.

JSX escapes text automatically

export default function App() {
  const comment = '<img src=x onerror="alert(1)"> Nice course!';   // e.g. user input
  return <p>{comment}</p>;
}

<img src=x onerror="alert(1)"> Nice course!

Practice

Summary