5 ms·
Everything in react is done in the template language. This react below is not JavaScript... it's a reverse template language with a mix of not-quite-html and n
by renesd 9y ago
Everything in react is done in the template language.
This react below is not JavaScript... it's a reverse template language with a mix of not-quite-html and not-quite-JavaScript. jQuery style code is nicer than that! I hate the enterprise boilerplate in react projects. No wonder they're all failing!
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => this.setState({value: 'X'})}>
{this.state.value}
</button>
);
}
}
It's like facebook is a php shop or something... Oh wait. Not for me thanks.
- bromuro 9y agoJSX is not a template language, it is just syntax sugar: see it as a different way to write javascript: https://facebook.github.io/react/docs/jsx-in-depth.html https://facebook.github.io/react/docs/jsx-in-depth.html you can't say the same about templates.
- renesd 9y agoIt's not JavaScript, and it mixes in almost-html... but it's not a template language? Wrong. It's a template language, even if Facebook tells you otherwise.
- zodiac 9y agoIt really isn't a template language as the term is commonly used. If you feel so strongly about the weird syntax you can write equivalent code in javascript syntax instead. return React.createElement( button, { className: "square", onClick: () => this.setState({value: 'X'}) }, this.state.value ); If you think your code is written in a template language, then the code I just wrote must also be written in a template language (with different syntax).
- renesd 9y agoThat looks like JavaScript. Yes, of course you can use that - but which react projects do it that way? It seems this is mostly pulled out when people go... ewwwwwwww, stinky... Most use the html+javascript language which is compiled and then spits out JavaScript and html. This is pretty much identical to PHP - which is a preprocessor template language. Anyway, facebook says it reminds me of a template language, so I'll believe them.
- zodiac 9y ago> Most use the html+javascript language which is compiled and then spits out JavaScript and html. This is pretty much identical to PHP - which is a preprocessor template language. No, it spits out javascript (the exact same javascript that I wrote), which returns shadow DOM trees (which are javascript objects), which the renderer looks at to modify the actual DOM. Also not sure what you mean by "looks like" javascript. It's clearly javascript - just a function call with 4 arguments.
- milesrout 9y agoThat's not a good thing. I want to write this, and have it actually be HTML: <div> <div> </div> <div> I like HTML.
- tannhaeuser 9y agoThough I personally can tolerate JSX, maybe you like SGML templating [1] which uses native markup mechanisms such as entity references for fully HTML-aware and injection-free templating. [1]: http://sgmljs.net/docs/templating.html http://sgmljs.net/docs/templating.html Disclaimer: my project, and SGML is most certainly not a "lightweight template engine" by any measure
- elcritch 9y agoSame here! Try VueJS. Especially Vue Components as they wrap up HTML template and JS code. Vue creates the render function from the HTML template, so no mucking around with jsx. Personally I want to think in "HTML" with JS secondary.
- brlewis 9y agoTemplate languages create strings. JSX creates hyperscript. JSX by its nature statically checks for tag balance, etc. The non-JavaScript part of its syntax has actual semantics. In a template language the non-Turing-complete part of the syntax is just strings. JSX is a perfectly good notation for describing how data maps to its presentation in a DOM tree.
- bromuro 9y agoif you want to build your UI with React you have to think about JSX as an easier way to write javascript. you can see it as a template language but it won't help you to code :)
- deleted 9y ago[deleted]
- johnfn 9y agoIf you don't like the "boilerplate" of a single class definition, use a functional component, which is just a function that returns JSX, that is also a component. It could literally not be more straightforward. Or could you not hear me over the sound of that axe you're grinding? :)
- mtzaldo 9y ago*stateless components
- deleted 9y ago[deleted]