JSX

If you have any experience writing frontend JavaScript applications, you might be familiar with a few template languages. At this moment, you might be wondering where can you use your favorite template language (such as Handlebars) with React. And the answer is that you can't.

React doesn't make any distinction between markup and logic; in a React component, they are effectively the same.

However, what happens when we start crafting more complicated components? How would the form we built in Chapter 3, Testing Frontend Code, translate into a React component?

To just render it without any other logic, it would take a bunch of React.createElement calls, as follows:

var NewInvestment = React.createClass({
  render: function () {
    return React.createElement("form", {className: "new-investment"},
      React.createElement("h1", null, "New investment"),
      React.createElement("label", null,
        "Symbol:",
        React.createElement("input", {type: "text", className: "new-investment...