5 ms·
While JSX is very well suited for programmatically defining your UI, it's about all that React is worth these days. You know about string literals right? You do
by gabereiser 3y ago
While JSX is very well suited for programmatically defining your UI, it's about all that React is worth these days. You know about string literals right? You don't need JSX and in-fact can get away with:
render(props) {
return(
`<div>
{props.value}
</div>`
);
}
- text0404 3y agoyou know about injection vulnerabilities, right? if you really want to spaghetti code your app with string representations of html, you can also use `dangerouslySetInnerHTML` in React.
- kwkelly 3y agoYou would do it as a tagged template literal rather than with plain string templating, similar to Postgres.js
- tehbeard 3y agoFor your div demo, sure, heck even the "todoapp" might work well enough with it. But please, build something proper with just that and presumably a .innerHTML = ... Let us know how it goes :)
- gabereiser 3y agoI have many times and you've probably seen it in the wild but I won't give myself away that easily. A Fortune 50 does this with great success.
- matsemann 3y agoThe point is you're susceptible to XSS attacks with that code. But with a "tagged template" it should be easy to treat the variables before actually doing the templating, without making the code ugly.
- gabereiser 3y agoIt’s just an example
- draw_down 3y agoHmmmm. Does that do escaping and such, or are you boned when an angle bracket shows up? Plus if the nodes are already parsed in your code it kinda sucks to stringify them so the browser can re-parse them. Not to mention holding focus and other element state, would that just get blown away and replaced with a whole new element every time? (Where react does tree reconciliation to avoid unnecessarily blowing away and replacing elements) Maybe you’re only addressing the point about programming model, but this approach seems like it has some issues.
- gabereiser 3y agoI am indeed only address the point about the programming model. In react, state and bindings are one and the same (using useState). In mine, your class is the binding to the element, render is only called once and you're free to subscribe to any on* events back to your class functions you wish. onclick="this.click" just works in my world. You need a bit more than the 5 lines I showed but it's trivial. No shadow-dom, no reconciliation, no unnecessary blowing away of elements at all, and no reparsing the tree.
- ufo 3y agoWatch out for html escaping.
- gabereiser 3y agoAssume props is pre-sanitized.
- jameshart 3y agoRon Howard voice: in fact, props was not pre-sanitized.
- intrasight 3y agoMy perspective is that JSX is all that React has to offer. And lots of developers - myself included - were doing "JSX" a decade before React arrived. Because it, like, super obviously a good idea.
- falcolas 3y agoForgive a bit of snark, but… So PHP? Mixing html and code is a pretty old paradigm.
- gabereiser 3y agoThat exists in every react app today so what’s your point? Are you arguing against it? If so, other than what I described (web components) how would you build a view? Web components or react components are supposed to be self-encapsulated so you can just add them to your view. Code and all. We are talking about view model code or presentation code.
- Timon3 3y agoI don't think OP is arguing against "self-contained components" (with template and code), but about "presentation and business code mixed". I really like Vue's solution compared to React - the template is strictly separate from the logic driving the template. Same file, but seperate areas. I've previously updated some components in a design system to Vue 3, where I followed the HTML results set by the React implementation. Reading the Vue 2 components worked almost immediately. The React components were so over-complicated that I sometimes literally had to follow the browser inspector instead of understanding every twist and turn in the code. I have never seen a Vue codebase that is as unreadable as the average React codebase with mixed business and presentation.
- falcolas 3y agoI'm just saying that > were doing "JSX" a decade before React arrived is another instance of "rediscovering old paradigms". What I'm not saying is that this method of building a view is unnecessary, or wrong. > If so, other than what I described (web components) how would you build a view? There are many ways to create a view. Programming history is littered with them anywhere there's a UI to be created. Will they interact nicely with React? Probably not most of them, but it doesn't mean they do not exist.
- coding123 3y agowhat's going to make sure you didn't type <div></dib>
- gabereiser 3y agomy ide... VSCode checks string literals for things like this.
- coding123 3y agoNot exactly universal