[duncanawoods]

I think this proves lhorie's point. Markup syntax is dominated by code when you are building complex dynamic apps instead of static documents. What do you really gain by putting angle brackets around Avatar instead of calling a function?

FWIW I believe new react devs are slow to realise they can use local variables like this because JSX looks like it is doing string templating instead of object instantiation.

[nkohari]

The example I gave was simplistic, but the value of JSX is the ability to easily nest elements. For instance, let's take my previous example and say we're creating a profile link:

    const Dashboard = (props) => {
      const {user} = props;
      let link;
      if (user) {
        link = (
          <a href="...">
            <Avatar user={user} />
            <span>{user.name}</span>
          </a>
        );
      }
      return (
        <div>
          {link}
          ...some other content...
        </div>
      );
    };

If you want, you could create a `createProfileLink()` function, or you could create a `ProfileLink` component, or you could keep it as a variable in the `render()` function. This flexibility is what makes JSX powerful.

[duncanawoods]

> but the value of JSX is the ability to easily nest elements

There is nothing there that "makes JSX so powerful", its just hiding function calls and varargs. Its only xml-ish syntax. You are welcome to prefer it but its not adding anything functional beyond that.

    const Dashboard = (props) => {
      const {user} = props;
      let link;
      if (user) {
        link = 
            DOM.a({href: "..."},
                Components.Avatar(user),
                DOM.span(user.name));
      }
      return 
        DOM.div(link, ...some other content);
    };

[nkohari]

Yes, I understand how JSX works. My point is that it permits nesting in a syntax that is much simpler and emulates markup, which is familiar to web developers.

It's okay if you prefer to write code using the direct function calls, but I'm not sure most people would agree with you. I've built a product using direct calls (in CoffeeScript) and using JSX, and JSX was far easier to work with and less error-prone. YMMV.

[lhorie]

I disagree in two ways: the first is that the ability to write template composition procedurally isn't specific to JSX. You can do that in plain js/hyperscript just as well.

The second point is precisely that this is procedural code. If the ability of putting together templates procedurally is the pinnacle of templating power/expressiveness, we might as well go back to Backbone.js.