JSX is a syntax extension for ReactJS that adds support for writing HTML tags in JavaScript. On top of ReactJS, it creates a very powerful way to express a web application.

It looks like this:

class HelloWorld extends React.Component {
  render() {
    return (
      
Hello World
    );
  }
}

If you’re familiar with ReactJS, you know that it’s a library for implementing web component-based frontend applications. Web components are the latest standard in web application design and implementation.

If you’re not familiar with what this looks like, I can’t recommend reading Thinking in React enough to get a feel for how component-based web architecture works. Basically, web components are a way to fold JavaScript logic and implementation into pieces that act like custom HTML elements—for example, if you could add a comment box complete with backend data synchronization.

Lots of Things Are Easier with JSX

Using Formatting Libraries

React code can be written in JavaScript, but then you’d be missing out on one of the best parts of React: JSX. If you’ve ever used Backbone, Ember,or Angular, you’re familiar with how to do things like number formatting on the web: You might set up a new variable that represents the formatted piece of data, then render the formatted piece of data to the page.

In JSX, because the HTML and JS are tied directly together, it’s as easy as using the JS formatting library right in the markup:

import formatter from ‘formatter’;

class PriceFormat extends React.Component {
  render() {
    return (
      
{formatter.currency(this.props.price)}
    );
  }
}

Isn’t that great? there’s no intermediate step for using the formatter in the mockup.

Rendering Lists of Data

JSX feels natural with React when you’re rendering lists of data. Instead of using a for-each helper in the markup, with JSX, it’s as easy as doing a map to transform an array of data into an array of related markup:

render() {
  const contactListItems = this.props.contacts.map((contact) => {
    return 
  }

  return (
    
{contactListItems}
  );
}

Keeping Markup Organized and DRY

Another great thing about mixing HTML into JavaScript is that it enforces better code standards for your markup. I’ve witnessed many a project that had nice, short, well-organized JavaScript files alongside enormous, heavy HTML files.

Practicing good component-based web application design is about structuring code and markup responsibly so that it can be represented as a consumable piece of code. This means breaking up any repeated large parts of markup into other reusable components. When the files get mixed, the markup content is held to the same standard as the JavaScript content, and the markup is easier to refactor and organize.

I’ve been enjoying using ReactJS, and a lot of what makes me excited about React is embodied in the JSX language. What do you think—would JSX work for you?