Learning JSX and Gotchas

Now it's time to master JSX and learn some Gotchas. You're going to learn some basic concepts to build ReactJS UI components using JSX. It includes practices when writing expressions, conditions, and creating lists of components. It will also walk you through how JSX differs from HTML (because it's not HTML) in some aspects.

Expressions

Consider the following code:

var Clock = React.createClass({
  render: function () {
    var today = new Date();
    return <h1>The time is { today.toLocaleTimeString() }</h1>;
  }
});

React.render(<Clock />, document.body);

JSX understands the curly braces {} whenever you want to put JavaScript code within your presentation code.

In the next example, let's improve our Clock component by supporting greetings depending on what the time is.

In the highlighted code mentioned later, if the current hour is lesser than 4, it should return day, and if the hour is greater than 4 but less than 18, it should return night:

var GreetingsClock...