Why would you insist to write the function name both before AND after the call?

<DoStuff> args </DoStuff>

vs

DoStuff(args)

Is this the main argument? I think the simplest answer is boundaries. Taking into account how much nesting is involved in writing HTML, it's a clear benefit having a named boundary vs a closing parenthesis.

> Taking into account how much nesting is involved in writing HTML

which is another one of its flaws.

What would the alternative be? How can you design a UI without nesting things?

Too much nesting usually signals that you should decompose it to smaller components.

Same as with regular code and functions — overly deep nesting screams bad code.

Honestly, JSX is just a verbose way of calling functions / constructing objects, which is probably OK if it was a language of its own (XML/HTML) — and even then, JSON/YAML won over XML — but makes little sense being embedded in a language which had functions & object literals from the get-go (JS)!

The only reason JSX exists is because it was a cool marketing feature to convert existing PHP/HTML developers to React. And React succeeded mostly because of that. Not because JSX is cool technology-wise (it isn't). But because it hit the right spot in the right time.

Well said! You got the point.

Not to me, it isn’t. It aligns with how the box model itself works.

More like:

<DoStuff args={...} />

Please no

The {...} syntax is a non-standard extension to XML/HTML I think MS came first up with back in the day for XAML (WPF).

It's a hack to "fix" a shortcoming of the base language.

It does not compose, i.e. :

<DoStuff args={<DoMoreStuff args={...} />} />

does not work.

That would be

<DoStuff args={...}><DoMoreStuff args={...} /></DoStuff>

Still more readable than brackets hell like:

DoStuff(DoMoreStuff(DoEvenMoreStuff()))

^^^ Apples to oranges:

    <DoStuff args={...}><DoMoreStuff args={...}> <DoEvenMoreStuff args={...}/> </DoMoreStuff> </DoStuff>

vs

    DoStuff(DoMoreStuff(DoEvenMoreStuff()))

Both of them you would split into indented lines when they become too long. And 1 becomes too long much faster.

Also with 2 you can do

    const todo = DoMoreStuff(DoEvenMoreStuff());  
    DoStuff(todo);

where as with 1 you cannot.

With JSX you can do

  const todo = <DoMoreStuff args={...}><DoEvenMoreStuff args={...}/></DoMoreStuff>;
  <DoStuff args={...}>{todo}</DoStuff>