which is another one of its flaws.
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.
<DoStuff args={...} />
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.
<DoStuff args={...}><DoMoreStuff args={...} /></DoStuff>
Still more readable than brackets hell like:
DoStuff(DoMoreStuff(DoEvenMoreStuff()))
<DoStuff args={...}><DoMoreStuff args={...}> <DoEvenMoreStuff args={...}/> </DoMoreStuff> </DoStuff>
DoStuff(DoMoreStuff(DoEvenMoreStuff()))
Also with 2 you can do
const todo = DoMoreStuff(DoEvenMoreStuff());
DoStuff(todo);
const todo = <DoMoreStuff args={...}><DoEvenMoreStuff args={...}/></DoMoreStuff>;
<DoStuff args={...}>{todo}</DoStuff>
<DoStuff> args </DoStuff>
vs
DoStuff(args)