Using JSX

In previous examples, we defined the visual output returned by the render() method of a component by using an HTML-like markup expression. Let's see, for example, the definition of the Catalog component:

import React from 'react';
import './Catalog.css';

class Catalog extends React.Component {
  render() {
    return <div><h2>Catalog</h2></div>;
  }
}

export default Catalog;

The markup expression is not using JavaScript syntax, but it is included inside of a JavaScript code snippet. Why do we mix HTML and JavaScript syntaxes? How is that possible?

Let's start by saying that the HTML-like language describing the React component's visual output is called JSX. This language extends JavaScript with XML expressions in order to simplify the creation of HTML elements within JavaScript code. You may think of it as a sort of document.write("..."), but much more powerful. In fact, when building a React application, the JSX markup is pre-processed by a specific parser...