One of the first concepts you will stumble upon when working with React is JSX. It stands for JavaScript XML and is a syntax extension to JavaScript that is used to help us define our UIs.

JSX might seem similar to other templating systems, but keep in mind that whereas in other templating systems we have an HTML-first approach, here we have the full power of JavaScript at our hands!

You can imagine JSX as being a combination of HTML and JavaScript, as that’s what it basically is.

A snippet of JSX would look something like this:

const element = <div>Hello, JSX</div>

Why JSX?

React fully embraces the fact that rendering logic is tightly coupled with other UI logic. That’s reflected in caring about how events are handled, how the state changes over time, and how the data is being prepared for being displayed.

Instead of artificially separating technologies by putting markup and logic in separate files (creating separate .css, .html, .js files), React separates concerns with loosely coupled units called components that contain both.

However, this approach is often disregarded when working with larger-scale applications, as it creates clunky and hard-to-read component files.

We do, however, have access to technologies that help us modularize our codebase by splitting the stylesheets into separate components such as styled-components and node-sass (for SASS/SCSS modules) which helps us combat this approach.

Working with JavaScript Expressions in JSX

In order to work with JavaScript within JSX, we’ll have to put the expressions within curly braces so React knows it’s not part of the markup.

Let’s say we wish to format the name of a user to be the combination of their first name and their last name separated by a space. We would end up with the following code:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

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

JSX is an Expression in itself

After compilation, JSX expressions become regular Javascript function calls and they are evaluated as actual Javascript objects.

This means that you can use JSX inside of if statements and for loops, assign it to variables, accept them as arguments, and return it from functions as in the example below:

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

Since JSX is closer to Javascript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

For example, the class keyword becomes className, and, onclick, for example, becomes onClick.

Specifying Children with JSX:

If a tag is empty (doesn’t have children), we can close it immediately with /> like XML or HTML:

const element = <img src={user.avatarUrl} />;

JSX tags may contain children the same way HTML elements may:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX consists of actual JavaScript objects

Babel compiles JSX down to React.createElement() calls.

Note that React can be used without JSX, although you won’t see much of it in production-grade applications. However, if you’re curious about how you can do that, you can check this article, as it goes a bit more in-depth about how you can do that.

Anyway, you can notice in the example below the same element written using JSX and without using it:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() performs a few checks to help us write bug-free code, but essentially it creates an object like this:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

These objects are called React elements. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.

---

Summary

Hopefully, by the end of this article, you’ve gotten a better understanding of what JSX is, and what it is used for, and got a glimpse of how it’s being used under the hood by React to deliver those nicely constructed UIs.

If you enjoyed this article be sure to stay tuned on Upmostly, as we’re publishing plenty of articles on the subject of React that might help you become the next industry leader!

If you feel I’ve left out anything important, or if you want to leave feedback of any kind, feel free to leave a comment down below!

See you on the next one. Cheers!