Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

What should go into JSX 2.0?

github.com

Post reply on HN
Print view View original

21–30 of 102 posts

Re: What should go into JSX 2.0?

#21

Post by msoad »

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?!!

Re: What should go into JSX 2.0?

#22

Post by cel1ne »

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 think ternary expression are rather ok here, though not perfect:

    {cond1 && cond2
     ? foo
     : null
    }

Re: What should go into JSX 2.0?

#24

Post by ponyous »

doque wrote: post #17
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…

How about { data && } ?

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

Re: What should go into JSX 2.0?

#25

Post by coderzach »

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…

Now that sweet.js supports babel, the best option may be to write an if expression macro.

Re: What should go into JSX 2.0?

#26

Post by substack »

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, although few people do. It's more common in some other frontend ecosystems.

Re: What should go into JSX 2.0?

#27

Post by coderzach »

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?!!

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.

Re: What should go into JSX 2.0?

#28

Post by joeberon »

ythl wrote: post #2

JSX? 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-2...

ye that's really funny and insightful, good job

Re: What should go into JSX 2.0?

#29

Post by msoad »

coderzach wrote: post #27
msoad wrote: post #21

Earlier quoted context omitted.

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?!!

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

Re: What should go into JSX 2.0?

#30

Post by danneu »

cel1ne wrote: post #22
msoad wrote: post #21

Earlier quoted context omitted.

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 think ternary expression are rather ok here, though not perfect: {cond1 && cond2 ? foo : null }

And you can inline if-statements with an IIFE when you need a little more space:

    {(() => {
      if (cond1 && cond2)
        return foo
      else 
        ...
    })()}
Though it makes GitHub think it's a Clojure file.
Post reply on HN