[pastacacioepepe]

More like:

<DoStuff args={...} />

[3dGrabber]

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.

[pastacacioepepe]

That would be

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

Still more readable than brackets hell like:

DoStuff(DoMoreStuff(DoEvenMoreStuff()))

[3dGrabber]

^^^ 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.

[mitt_romney_12]

With JSX you can do

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