React

JSX

JSX is the syntax that lets you write HTML-like markup inside a JavaScript function. It isn't a string, and it isn't real HTML either, it compiles down to regular JavaScript function calls that build up the UI piece by piece.

Example: mixing markup and real JavaScript

function Greeting() {
  const name = "Ada";
  const hour = 14;
  return (
    <div>
      <p>Hello, {name}!</p>
      <p>2 + 2 is {2 + 2}.</p>
      <p>{hour < 18 ? "Good afternoon" : "Good evening"}</p>
    </div>
  );
}

Curly braces { } are the escape hatch back into real JavaScript, anything inside them is evaluated as an expression, not printed as literal text. A variable, a calculation, even a ternary expression like the third line above all work exactly the way they would in ordinary JavaScript, just embedded directly inside markup. This is JSX's whole value: markup and the logic that drives it live in the same place, instead of split across a template file and a separate script.

function Greeting() {
  const name = "Ada";
  return <p>Hello, {name}! 2 + 2 is {2 + 2}.</p>;
}

Renders: Hello, Ada! 2 + 2 is 4.

← Introduction to React Components & Props →