I think what he means is that control statements don't exist in JSX. You have to write Javascript to do if-statements, looping, etc.

In React, there is no 'direction' of binding---its all one way, just like in vanilla Javascript, and in fact no binding on anything except low level elements' like divs. Components only receive props, which do not do anything at all until you write code that reads them and runs operations based on their values.

Thus components are simply function calls (it's what they compile to anyways), and JSX is just a syntax to write functional code.

i don't see how sprinkling if-statements in your html is cleaner than "magical attributes" but thats just me :)

It's not just you...this has been a pretty big toss-up with MVC style frameworks and view libs. Does business logic belong in the template? Or does it belong in some sort of view controller? Mustache.js insists that all decisions should be made before data is sent to the template. Most other libs allow the template to make decisions. I don't think there's a definitive answer. I kinda lean on making easy decisions in Handlebars templates... or, since our new app is in React, JSX.

if statement is one of the most basic concepts of programming and is opposite to magic

True, but some would argue that its use is a mark of lacking taste - https://medium.com/@bartobri/applying-the-linus-tarvolds-goo...

Wait, square brackets/parens indicates data binding direction in vanilla js? Huh?