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, in order to produce pure JavaScript code. So, we can exploit the simplicity of using a declarative markup language that will automatically be converted into optimized JavaScript code.

As previously mentioned, a JSX expression creates a React element, which is the counterpart of an HTML element. From a syntactical point of view, a JSX expression is a single markup item with any nested elements. So, the following is a valid JSX expression:

<div><h2>Catalog</h2></div>

The following is not a valid JSX expression, since it contains two markup items:

<div><h2>Catalog</h2></div>
<div><img src="image.png" /></div>

We can assign a JSX expression to a variable, as in the following example:

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

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

export default Catalog;

We can also embed any JavaScript expression inside of a JSX expression by wrapping it in curly braces, as shown in the following example:

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

class Catalog extends React.Component {
  render() {
    let title = "Catalog";
    return <div><h2>{title}</h2></div>;
  }
}
export default Catalog;

Of course, the JavaScript expression can be as complex as we need it to be, like in the following component definition:

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

class Catalog extends React.Component {
  render() {
    let title = "The Catalog of today " + new Date().toDateString();
    return <div><h2>{title}</h2></div>;
  }
}

export default Catalog;

A common use of a combination of JavaScript and JSX expressions is called conditional rendering; that is, a technique that allows you to generate a JSX expression based on some Boolean conditions. Consider the following example:

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

class Message extends React.Component {
  render() {
    let message;
    let today = new Date().getDay();

    if (today == 0) {
      message = <div className="sorry">We are closed on Sunday...</div>;
    } else {
      message = <div className="happy">How can we help you?</div>
    }
    
    return message;
  }
}

export default Message;

In the preceding example, the render() method returns one message or another, according to the current day of the week. This causes the generation of a React element with a different message and CSS class, but we could even return a completely different markup.

You can put a JSX expression in multiple lines, as in the following:

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

class Catalog extends React.Component {
  render() {
    let title = "Catalog";

    return <div>
      <h2>{title}</h2>
    </div>;
  }
}

export default Catalog;

You can put comments inside of a JSX expression by using the JavaScript syntax wrapped in curly brackets. The following is an example of a JSX expression with comments:

<div>
  <h2>Catalog</h2>
  {//This is a comment}
  {/* This is a comment, too */}
</div>;

JSX tags match HTML tags, which is why we can use the whole HTML syntax to define JSX elements. However, there are a few restrictions:

• All HTML tags are in lowercase
• You need to use className instead of the class attribute
• You need to use htmlFor instead of the for attribute

The following example shows the use of the className attribute instead of class:

<div className="catalog-style">
  <h2>Catalog</h2>
</div>;