JSX

JSX is a syntax extension for JavaScript. It lets you write markup directly in a .jsx or .tsx file, and a build step converts it into ordinary function calls before the browser sees any of it.

No browser understands JSX. There is no JSX at runtime. That one fact explains almost all of its behaviour: the rules you have to follow are JavaScript's rules, not HTML's, because what you are writing is JavaScript wearing a convenient shape.

interface EmployeeCardProps {
  name: string;
  role: string;
}

export function EmployeeCard({ name, role }: EmployeeCardProps) {
  return (
    <article className="rounded-xl border p-4">
      <h3 className="font-semibold">{name}</h3>
      <p className="text-sm text-slate-600">{role}</p>
    </article>
  );
}

• The markup is the return value. This function returns a description of an interface the same way another function returns a number.
• Braces switch from markup back into JavaScript. {name} inserts the current value of the name variable.
• The CSS classes go on an attribute called className rather than class. The reason is in the table further down, and it is not arbitrary.
• The outer brackets around the returned markup are only there so the markup can start on the next line. JavaScript would otherwise treat the line break after return as the end of the statement.

jsx("article", {
  className: "rounded-xl border p-4",
  children: [
    jsx("h3", { className: "font-semibold", children: name }),
    jsx("p", { className: "text-sm text-slate-600", children: role }),
  ],
});

• Every element becomes one function call. The tag name is the first argument, the attributes become keys on a plain object, and anything nested inside becomes the children key.
• The jsx function comes from React's JSX runtime, which your build tool imports for you. There is a second variant used for elements with several children, but the shape is identical.
• The call returns a plain JavaScript object describing the element. It does not touch the page. React compares those objects between renders and works out the smallest set of changes to make.
• Older React code called React.createElement and needed React imported in every file that contained markup. Current setups do not, which is why you will see .tsx files with no React import.

interface Employee {
  id: string;
  name: string;
  role: string;
  isOnLeave: boolean;
}

export function EmployeeSummary({ employee }: { employee: Employee }) {
  const initials = employee.name
    .split(" ")
    .map((part) => part[0])
    .join("");

  return (
    <article className="flex items-start gap-3">
      <span className="rounded-full bg-slate-200 px-2 py-1" aria-hidden="true">
        {initials}
      </span>
      <div>
        <h3 className="font-semibold">{employee.name}</h3>
        <p className="text-sm text-slate-600">{employee.role}</p>
        {employee.isOnLeave ? (
          <p className="text-sm text-amber-700">On leave</p>
        ) : null}
      </div>
    </article>
  );
}

• The initials are worked out above the return, where the code is readable. Calculation squeezed inside braces in the middle of markup is where components start becoming hard to follow.
• aria-hidden="true" hides the initials from screen readers on purpose. They are a visual shorthand for a name that is already announced by the heading directly below, so without it a screen reader would read the name twice.
• The ternary renders the paragraph when the employee is on leave and nothing otherwise. null means "render nothing here", and so do undefined, false and true.
• You will also see condition && element, which is shorter and reads well. It has one sharp edge: if the left side is a number, 0 is falsy but still renders, so a count of 0 puts a literal 0 on the page. Compare explicitly — count > 0 && ... — or use a ternary.