HomeAbout

JSX

What is JSX

JSX is NOT an HTML nor a string.

JSX is a syntax extension to Javascript.

  • JSX produces React elements.

Philosophy

React embraces the fact that rendering logic is inherently coupled with other UI logic.

  • e.g. how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

React doesn’t require using JSX, but it's helpful.

Expression

JSX allows JS to be expressed inside.

JS allows JSX to be expressed inside when using curly bracket:

// JSX inside JS
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

// JS inside JSX
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX Expression

After compilation, JSX expressions become regular JS function call, evaluating to JS objects.

Meaning - you can use JSX inside of if statements and for loops.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Compiled to plain JS object

JSX is intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.

AboutContact