JSX

An introduction to JSX

If you’ve ever implemented a web app with the framework “React.js”, you might have noticed that the syntax for writing React.js components looks a little bit different than your other Javascript code. Although mostly the same, React components are described via special brackets, the left and right angle brackets. They look just like syntax for XML, the “Extensible Markup Language”. In React.js, this syntax is similarly called “JSX”, which means “Javascript XML”.

The main goal of this syntax is to simplify writing React code. JSX-code can’t be interpreted by JVMs, therefore it has to be compiled to real Javascript code before usage - a task typically done by bundlers such as Babel or Webpack.

The React code you’ve probably never written

This effectively means that it’s very likely you’ve never written such “true” React.js components that get generated from your JSX code. But don’t worry, this can be easily done without much hassle. In fact, you can even write a complete React web application without ever using JSX. The following code snippet shows how a truly React.js component with only Javascript looks like.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

You can even try this out in your browser, without installing any software! Just scroll down to the end of this page to use the link in the addendum.

Using JSX to simplify your code

As you can see, the main advantage of the JSX-syntax is to make your UI-related code simpler to write and easier to distinguish from other parts of your application, as the XML-like syntax provides a clear indication of the code’s domain.

Another great characteristic of JSX is that it just becomes an expression after the compilation step. You can therefore use it in if-else-statements or even store its result in a variable. And because React.js components can contain expressions as children themselves, you’re able to write highly composable UI code!

A default import for every JSX-file

You may have noticed that every JSX-file in various tutorials, guides and most likely even your own code has the default import from the React-library included, even though you may never call this imported variable directly. The reason behind it is that after the compilation step, every JSX-expression becomes a “React.createElement”-call, as you’ve seen in the code example before. Therefore it’s necessary to have the “React”-variable from the default import included in every file’s scope.

Looks like HTML, but isn’t

One key constraint when coding in JSX-syntax is the notation of your component's name. For the bundler to correctly identify your components, they have to be unique from the standard HTML-tags, as the syntax looks the same.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

It’s therefore a requirement to code JSX elements always in sentence casing, which means the first letter has to be uppercase.

The Typescript variant

You may have noticed that many projects also use TSX as file suffix for their React.js component files. This is just an extension of the original JSX to be compatible with Typescript. TSX-files allow you to write Typescript code together with JSX-notation components.

Just the start

This article provided a simple introduction to JSX for coding React components. The main advantage is a very concise syntax that feels natural in a web environment. You can write highly composable elements with very little code, which no doubt is one key factor of React’s current famous and popular state. If you’re curious there are much more and excellent detailed guides by the React team on their site, the links are in the addendum at the end of this page.