JSX is no longer my friend

Re:JSX is no longer my friend by formula1 on Tuesday March 15, 2016 @04:55PM (#11292909)

Notably we must first understand that there is a differemce between react as a framework and jsx. Jsx provides a means to generate ui patches which in turn resolve to html through react. What makes jsx so great is that it looks like html so you dont have to think in some special library way. Your using pre-existing technologies which is wonderful.

A more important point is the handlebars. So, handlebars implys block in javascript but what is actually happening is the context is evaluated and passed to the component. Kindof how parenthesis work

(A || b).property(array.sort(compareFactory())

The fact we use handlebars when the text inside is actually evaulated how parenthisis work probably enables this sort of confusion. The reality is handlebars is for the angular/mustache crowd and to ensure they feel at home. But in parenthisis would build on exisisting knowledge of how js works

[ Parent | on HN ]

Re:JSX is no longer my friend by ricardobeat on Tuesday March 15, 2016 @04:59PM (#11292938)

The "handlebars" are just plain javascript syntax for a block, not template markers. You can try it in your browser console.

    { console.log(123); }

[ Parent | on HN ]

Re:JSX is no longer my friend by couchand on Tuesday March 15, 2016 @08:24PM (#11294096)

Not exactly... within JSX the handlebars signify "now I'm going back to plain JS".

compare

    <div>
        console.log(123)
    </div>

with

    <div>
        { console.log(123) }
    </div>

The first outputs a div with the text "console.log(123)" inside. The second logs "123" and outputs an empty div (since console.log returns undefined).

[ Parent | on HN ]

Re:JSX is no longer my friend by ricardobeat on Friday March 18, 2016 @12:56PM (#11313086)

That's the point.

[ Parent | on HN ]

Re:JSX is no longer my friend by couchand on Tuesday March 15, 2016 @08:26PM (#11294101)

Not exactly. The stuff within the handlebars isn't evaluated, it's just passed through as code rather than a string. Your example is equivalent to this:

    React.createElement(div, { count: count?true:false })

not, as your comment implies,

    React.createElement(div, { count: true })

[ Parent | on HN ]