JSX

You may have seen React code samples floating around, and something that might’ve struck you is the funny HTML-like syntax in the JavaScript code that is used by most of the community.

It’s called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

JSX is not a requirement for using React. Each JSX element is just syntactic sugar for calling React.createElement(component, props, children). So, anything you can do with JSX can also be done with just plain JavaScript.

However, writing React using React.createElement can feel a bit tedious, and a bit too far removed from what the actual desired output is: HTML.

For this reason, most React developers choose to use JSX which makes it easier to write components.

const element = (
    <ul className="list">
        <li><i>Hello</i> react!</li>
        <li>And hello <b>again</b></li>
    </ul>
);

Since JSX is a non-standard extension of JavaScript no browser will understand it. This means we have to transpile it using a build tool like Babel. In this workshop, it is handled directly by create-react-app.

Embedding Expressions in JSX

You can embed any JavaScript expression in JSX by wrapping it in curly braces. In JavaScript, an expression is any valid unit of code that resolves to a value.

For example, 2 + 2, user.firstName, and formatName(user) are all valid expressions.

In practice, this means we can do things like this:

<h1 className={'header--' + variation}>
  Welcome, {user.firstName}!
</h1>

JSX is an Expression Too

After compilation, JSX expressions get compiled down to plain JavaScript. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

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

Which would compile down to:

function getGreeting(user) {
  if (user) {
    return React.createElement('h1', null, `Welcome, ${formatName(user)}!`);
  }
  return React.createElement('h1', null, 'Hello, Stranger.');
}