12 ms·
What should go into JSX 2.0?
- kevinSuttle 10y agohttp://kevinsuttle.com/posts/jsx-2-adobe-flex http://kevinsuttle.com/posts/jsx-2-adobe-flex
- ythl 10y agoJSX? Typescript? What are you a noob? That was so 2016. Come on, get with it - JSX 2.0, TypeScript 2.0, etc. is what real web devs use. That other crap is obsolete. This is 2017. Edit: I'm parodying this: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.kjnlmatkc https://hackernoon.com/how-it-feels-to-learn-javascript-in-2...
- joeberon 10y agoye that's really funny and insightful, good job
- lucideer 10y agoThe parody would be fair enough with different technologies, but these are mere version-bumps. Backwards-compatibility may not be absolute, but generally speaking if you understand the use-case for v1, there's not going to be a lot of cognitive overload in figuring out v2.
- JBiserkov 10y ago"What should go into JSX 2.0?" would be a much clearer title outside of the context of the GitHub issue.
- blablabla123 10y agoYup, even the issues not marked controversial seem so to me. I think JSX is quite nice but it has its limits/annoyances. One is obviously that it's not real HTML5. I would like to see a successor that is more like HTML5 without the X. No idea how that could be realized though... ;)
- rattray 10y agoSorry, what do you mean by this? (For those unfamiliar with the deviations)
- djur 10y agoI started using React/JSX professionally in the last few months, so some of these are fresh in my head. Differences I'm aware of: 1) JSX creates virtual DOM objects, not HTML tags. In places where the DOM and HTML use different names for the same thing, JSX uses the DOM's name. In particular, the "class" attribute is called "className" and the "style" attribute takes an object like { color: "white" } instead of a string like "color: white" (and the keys are like "backgroundImage" rather than "background-image"). The latter rarely comes up, but the former bites me all the time when incorporating markup from designers. 2) JSX requires all tags to be closed, like XHTML and all XML dialects. HTML 5 declares some tags to be self-closing, like IMG. 3) JSX removes whitespace padding inside elements. This usually results in the same visual result, except for those cases where HTML actually cares about extra whitespace (like in PRE and TEXTAREA). 4) Regarding TEXTAREA, you're encouraged not to use the inner content of the tag to define its default value. Instead, you treat it like an INPUT. (I think this is if anything an improvement.) 5) INPUT tags have some special behavior related to default values, but that's really more about React than JSX per se. Overall I have found JSX pretty easy to get into. I appreciate that it really is just a very thin layer over underlying JS. I'm not totally sold on this approach versus the many, many, many other HTML templating systems out there, but at least it's easy to understand.
- rattray 10y agoAh, I see, thanks for sharing. Yes, I personally view most of those deviations as positive.
- blablabla123 10y agoRegarding 1)... like 5) that's React, so you could write a JSX transpiler that creates actual DOM objects.
- deleted 10y ago
- sctb 10y agoThank you, we've updated the title.
- arnold_palmur 10y agoI definitely think fragments should be an added feature of a 2.0 version of JSX - just take a look at this Github issue that continues to house active discussion now for 2+ years. https://github.com/facebook/react/issues/2127 https://github.com/facebook/react/issues/2127
- spicyj 10y agoYes, this is often-requested. We don't necessarily need to change JSX to add this to React though. With our current implementation it's a pain to support it but we're working on it.
- hex13 10y agoI wish it could be possible to write this: const animal = "cat"; <Component {animal} /> equivalent to: <Component animal={animal} />
- skosch 10y agoHow about <Component {{animal}} /> ? Because that should already work, no?
- alistairjcbrown 10y agoYou'd have to spread in the object, right? <Component {...{animal}} />
- hex13 10y agoI know, but it's too verbose for me. BTW there is a discussion about this: https://github.com/facebook/jsx/issues/23 https://github.com/facebook/jsx/issues/23
- skosch 10y agoYes, absolutely. Ignore what I wrote.
- sorahn 10y agoWe already do this when we have a lot of props to pass down. "A lot" usually means enough to take the line past 100 columns. const componentProps = {}; <Component {...componentProps} />
- blairanderson 10y agoThat is one of the suggestions
- drinchev 10y agoIMHO This is way too insignificant benefit for a breaking change with this magnitude. Using spread ( `{...{animal}}` ) is already working and it will stop working with the new syntax. On top of that killing two brackets and three dots will not give you huge performance / code-productivity benefit.
- mercurial 10y agoSince when does Reason have JSX?
- vcarl 10y agoJSX is actually a generic transformation of XML like structures to function calls. Since it's mostly used with React, that's the default, but you can use any function you like. It's the "pragma" option in the config for the plugin. https://babeljs.io/docs/plugins/transform-react-jsx/ https://babeljs.io/docs/plugins/transform-react-jsx/
- bsimpson 10y agoSince Reason was written by Jordan Walke and Cheng Lou (creators of React and React Motion, respectively), that's unsurprising.
- Marazan 10y agoI'd like a good system for conditional child components. I liked Flex's system.
- maaaats 10y agoI like how the if proposal is down voted, probably because it's mentioning Angular. Conditional rendering in React is not always very clean. Most codebases end up resorting with something similar to this in a container to show a spinner while data is loading and rendering it when done. <ConditionalSpinner renderIf={data}><PersonRenderer person={data.person} /></ConditionalSpinner> Problem is that the inner component will still be parsed and fail with cannot read property person of undefined. Yes, you can do this with a simple condition in your render function, but then it's not declarative any more.
- doque 10y agoHow about { data && <Inner person={ data.person }/> } ?
- ponyous 10y agoIf you render a more complex component this introduces another level of indentation. I can see why some people would prefer cleaner code but in my opinion, indenting ifs is a good thing as it increases the readability and allows you to spot if statements faster.
- zackify 10y agothis is why you should be using immutable js. It will not throw errors accessing an object.
- deleted 10y ago[deleted]
- deleted 10y ago[deleted]
- msoad 10y agoIt's the extreme fanboyism there! Wrapping every component that has `if` attribute with an `if` statement should not result into that: <div *if={cond1 && cond2}> <div>foo</div> </div> // results to if (cond1 && cond2) { return React.createElement('div', null, React.createElement('div', null, 'foo') ); } I'm not sure why this is bad? Because it's looking like Angular?!!
- fbreduc 10y agomake it s-exp?
- ng12 10y agoYou mean Elm?
- Waterluvian 10y agoConditional rendering is all I really hurt for. But I would prefer not having a 2.0 at all if it wasn't fully backwards compatible.
- substack 10y agoAlso keep in mind that javascript engines have a built-in mechanism for including multi-line strings with a powerful substitution engine: tagged template strings (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...). The upside of template strings is that you can run your code directly in node or electron without using extra tooling first. It is possible and not hard to use tagged templates with react, although few people do. It's more common in some other frontend ecosystems.
- pitaj 10y agoJSX isn't templating. It's representing a virtual dom tree of function calls with a syntax more representative of the resulting markup.
- substack 10y agoYou can build virtual dom trees or use real dom nodes using something like https://www.npmjs.com/package/morphdom https://www.npmjs.com/package/morphdom . Tagged template strings let you build these features in without custom language extensions. See also: * https://www.npmjs.com/package/hyperx https://www.npmjs.com/package/hyperx * https://www.npmjs.com/package/yo-yo https://www.npmjs.com/package/yo-yo
- pitaj 10y agoRight, but these just do what JSX does, but in runtime instead of at compile time.
- akhatri_aus 10y agoSome kind of way to parse variables only if they exist. The equivalent of (in Coffeescript) a = {b:'c'} a?.c //undefined a.b //'c' b?.c //undefined
- peddicord 10y agoCorrect me if I'm wrong, but that doesn't seem like the domain of JSX. That's just JavaScript.
- venomsnake 10y agoDecent way to comment ...
- jazoom 10y agoThis is all I want
- cratermoon 10y agoWhat could be safely removed from JSX?
- deleted 10y ago[deleted]
- Trufa 10y agoRegardless of the changes, I really think that this is very well managed community wise, not strictly comparable, but hopefully stuff like this will avoid fragmentation of the community like angular 1/2, python 2/3.
- hnsummarizer 10y agotldr: "I think it is probably only worth doing as a batch when the accumulated amount of changes makes it worth while. We have accumulated a number of these nice-to-haves breaking changes that would be nice to incorporate. However, at this point JSX is a hugely adopted syntax in all kinds of tooling."
- jameslk 10y agoNothing. Seriously, JSX works really well as it is. These proposals seem like small enhancements, some of them for the wrong reasons. > Computed attribute names. If you need this, you're probably being too clever. If there's a legitimate use for this, I've never seen it in the past 2 years I've been using JSX with React. > Object short hand notation. > Drop the need for curlies around attribute values if they're a single literal, or parenthesis. Is it really that much more work? > Implicit do expressions. > Conditionals > Loops If you need control statements in your JSX, you're doing it wrong. When you need these things, this is a sign you need to break your code into smaller chunks. Move this logic into separate functions, lambdas or variables and interpolate them in. Now you've labeled your code and made it more composable. This is called self-documenting code and it's a lot easier for others and your future self to read. All of these wouldn't be so bad if it wasn't a proposal to justify breaking changes. I really don't want to have to deal with two versions of JSX that are incompatible. That just sounds like hell.
- abritinthebay 10y agoAgree wholeheartedly - this smacks of the repeated mistake that most template tools make which is trying to do language logic inside. The whole point of JSX is that it isnt a template language and is just a wrapper around objects with properties.
- matt4077 10y agoMost template tools made the major mistake of existing. They start out as some attempt to limit the functionality available in templates but pretty soon they always add functions and conditionals and formatters etc... ending up with what is essentially a turing-complete language, except needing an extra step to parse, less well tested and usually much uglier than the host language. Oh, and you have to learn it as well, because someone had a fetish of avoiding python/php/perl/... in templates, inventing <loop start=1 end=15 step=1> to replace (1..15).each. Nowadays we're replacing loops with recursion or map but fundamentally, there's no difference. If you have a collection and you want to render it, you need the logic of repetition in a template, and there's nothing wrong wit h putting it there. 10 years ago, you would often see html with interspersed business logic, even SQL. That just doesn't happen anymore. Now, fruitless attempts to further reduce logic in templates just lead to convoluted overengineering who at best try to hide the logic.
- peterkelly 10y agoWhat's wrong with just using the JavaScript/TypeScript syntax you already have? It's trivial to write a few functions to create HTML elements and append children. For example: import { h1, div, span, text } from 'html'; const user = { name: 'Dave', age: '30' }; return div('container', h1(text('User info')), div(span('field',text('Name')),text(user.name)), div(span('field',text('Age')),text(user.age)), ); I don't understand why there's so much activity in creating new languages/language extensions that duplicate functionality that can already be expressed as is, with just a bit of basic library support. CSS preprocessors are another example. Want to add loops, conditionals, and user defined functions to your CSS superset? Why not just use JS/TS instead, which has all the control features and can output CSS text just as well as Less/Sass/SCSS/flavour of the month.
- Zezima 10y agoYou just wrote elm code in javascript
- abritinthebay 10y agoThat style was old before Elm. Elm does it rather well tho
- hyperhopper 10y agoMithril does this, and I find its syntax much cleaner and easier to write in than JSX. view: function(ctrl) { return m("div", [ ctrl.pages().map(function(page) { return m("a", {href: page.url}, page.title); }), m("button", {onclick: ctrl.rotate}, "Rotate links") ]); } http://mithril.js.org/ http://mithril.js.org/
- donpark 10y agoJust one thing: ability to return array of elements as result.
- inimino 10y agoMy only real gripe about JSX is the crazy attribute casing rules. If it looks like HTML then attributes should be case-insensitive just like HTML. The worst of it is (unless this has changed) they are just silently dropped without any error message.
- insin 10y agoThe React ESLint plugin's no-unknown-property rule is handy for catching (and automatically fixing) this: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md https://github.com/yannickcr/eslint-plugin-react/blob/master...
- inimino 10y agoGood to know, thanks. That's a good stop-gap, but the tool itself should either pass through everything to the HTML or throw errors on anything that isn't going to get passed through. The silent failure mode is a UX bug.
- ramchip 10y agoIf I understand your comment correctly, this is checked in more recent versions of React: https://facebook.github.io/react/warnings/unknown-prop.html https://facebook.github.io/react/warnings/unknown-prop.html
- inimino 10y agoIt does seem to be the same issue. That's great, it will certainly avoid some frustration.
- rsrsrs86 10y agoAbsolute inelegant shit, use Elm