6 ms·
Why would you insist to write the function name both before AND after the call? <DoStuff> args </DoStuff> vs DoStuff(args)
by 3dGrabber 3y ago
Why would you insist to write the function name both before AND after the call?
<DoStuff> args </DoStuff>
vs
DoStuff(args)
- iamsaitam 3y agoIs 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.
- 3dGrabber 3y ago> Taking into account how much nesting is involved in writing HTML which is another one of its flaws.
- iamsaitam 3y agoWhat would the alternative be? How can you design a UI without nesting things?
- xpl 3y agoToo 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.
- flying-pig 3y agoWell said! You got the point.
- lobsterthief 3y agoNot to me, it isn’t. It aligns with how the box model itself works.
- pastacacioepepe 3y agoMore like: <DoStuff args={...} />
- 3dGrabber 3y agoPlease 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 3y agoThat would be <DoStuff args={...}><DoMoreStuff args={...} /></DoStuff> Still more readable than brackets hell like: DoStuff(DoMoreStuff(DoEvenMoreStuff()))
- 3dGrabber 3y ago^^^ 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 3y agoWith JSX you can do const todo = <DoMoreStuff args={...}><DoEvenMoreStuff args={...}/></DoMoreStuff>; <DoStuff args={...}>{todo}</DoStuff>