5 ms·
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 reso
by formula1 11y ago
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
<div count={count?true:false} />
<div count=(count?true:false) />
- ricardobeat 11y agoThe "handlebars" are just plain javascript syntax for a block, not template markers. You can try it in your browser console. { console.log(123); }
- deleted 11y ago[deleted]
- couchand 11y agoNot 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).
- ricardobeat 11y agoThat's the point.
- couchand 11y agoNot 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 })