What should go into JSX 2.0? • Hacker News Board

Re: What should go into JSX 2.0?

#51

Post by spdustin » Sun, Oct 16, 2016, 6:12 PM UTC

maaaats wrote: post #16

I 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. Problem is that the inner component will still be parsed and fail with cannot read property person of undefined. Yes, you can do this…

JSX shouldn't be used to turn a component into a controller for child components. That's why I wouldn't want that kind of logic in there.

Re: What should go into JSX 2.0?

#52

Post by biscarch » Sun, Oct 16, 2016, 6:21 PM UTC

maaaats wrote: post #44

biscarch wrote: post #41

Earlier quoted context omitted.

Loading (and error, etc) state should be the responsibility of the component doing the content rendering, not the parent. So the ConditionalSpinner component: Could be written better as: Where PersonRenderer would be defined as such: class PersonRenderer extends Component { render() { if(this.props.person) { return personcontent } return } } Given this, I'm still not sure how an If "component" would be achieved (and…

> Loading (and error, etc) state should be the responsibility of the component doing the content rendering It's often divided in two: One container fetching the data, and a pure component rendering it.

I think my intent might have come across wrong here.

The "states" aren't related to container/dumb components or data-fetching/selection logic. They're purely about rendering the state for a given segment of the page. Perhaps this article[0] might help convey my intent. It's more about how to render "we didn't get data from that one endpoint for this section of the page" or "we're waiting for the data to show up", etc.

[0]: https://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d...

Re: What should go into JSX 2.0?

#53

Post by woah » Sun, Oct 16, 2016, 6:39 PM UTC

maaaats wrote: post #16

I 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. Problem is that the inner component will still be parsed and fail with cannot read property person of undefined. Yes, you can do this…

You think it's downvoted because it mentions Angular? Baseless complaining. JSX is a breath of fresh air after all the templating languages that force you to learn a crippled pseudolang. What's next? For loops? Moving every feature that already exists in JavaScript into JSX with some arbitrary additional syntax? What's the point? It's already very easy to do conditionals with && or ternaries.

Re: What should go into JSX 2.0?

#54

Post by Trufa » Sun, Oct 16, 2016, 6:44 PM UTC

Regardless 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.

Re: What should go into JSX 2.0?

#55

Post by hnsummarizer » Sun, Oct 16, 2016, 6:51 PM UTC

tldr: "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."

Re: What should go into JSX 2.0?

#56

Post by _betty_ » Sun, Oct 16, 2016, 6:51 PM UTC

msoad wrote: post #21

maaaats wrote: post #16

I 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. Problem is that the inner component will still be parsed and fail with cannot read property person of undefined. Yes, you can do this…

It's the extreme fanboyism there! Wrapping every component that has ` if` attribute with an `if` statement should not result into that: foo // 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?!!

I'd love for them to adopt something similar to Razor (Microsoft server side html engine)

note: i've changed your example to show code inside html tags, i'm aware it does something different to yours.

conditionals

  
    @if(cond1 && cond2) {
      foo
    }

loops

  
    @for(var i in collection) {
      
    }

variables

  
    @variable

ternary/longer statement

  
    @(variable ? 1 : 2)

Re: What should go into JSX 2.0?

#57

Post by exogen » Sun, Oct 16, 2016, 6:59 PM UTC

msoad wrote: post #29

coderzach wrote: post #27

Earlier quoted context omitted.

It's bad because it's inconsistent with how every other attribute in jsx works. Nothing else in jsx changes the control flow of the code.

It is 2.0 so it can have breaking changes

The parent didn't mention anything about backwards compatibility. They're saying 2.0 with such a change would be inconsistent with itself. And they're right.

Re: What should go into JSX 2.0?

#58

Post by pitaj » Sun, Oct 16, 2016, 7:05 PM UTC

substack wrote: post #26

Also 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/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,…

JSX isn't templating. It's representing a virtual dom tree of function calls with a syntax more representative of the resulting markup.

Re: What should go into JSX 2.0?

#59

Post by jameslk » Sun, Oct 16, 2016, 8:02 PM UTC

Nothing. 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.

Re: What should go into JSX 2.0?

#60

Post by tracker1 » Sun, Oct 16, 2016, 8:14 PM UTC

maaaats wrote: post #16

I 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. Problem is that the inner component will still be parsed and fail with cannot read property person of undefined. Yes, you can do this…

You can already do that...

    function ConditionalSpinner({renderIf, children}) {
      if (!renderIf) return null;
      return children[0];
    }