GOPHERSPACE.DE - P H O X Y
gophering on hngopher.com
HN Gopher Feed (2017-11-03) - page 1 of 10
 
___________________________________________________________________
Show HN: React patterns, techniques, tips and tricks
34 points by rhakmi
https://github.com/vasanthk/react-bits
___________________________________________________________________
 
amelius - 51 minutes ago
I just read the section "Conditional in JSX", and frankly I think
this is crazy. If one needs such inelegant code to deal with basic
boolean logic then I'm saying thanks, but no thanks, and I'll use
some other tool than React. The section actually speaks of an
"alternate hacky approach", which says enough.
 
  Lazare - 18 minutes ago
  I think you misunderstand; the article is recommending you don't
  write the inelegant code or use the "hacky" approach.> If one
  needs such inelegant code to deal with basic boolean logicYou
  don't.  Idiomatic React doesn't try and put complex logic in the
  JSX; the recommended approach (including in the linked article)
  is to do you logic in plain JS with small focused components or
  render functions.
 
  rpedela - 16 minutes ago
  I have written a lot of React and JSX. I have never used that
  pattern and don't plan to start. I use JS for my conditionals and
  never put them in JSX. Unless it is a extremely trivial
  component, I find putting logic inside JSX hard to read and
  debug.
 
  ht85 - 39 minutes ago
  It would look a lot better using proper identation...    

  {flag && flag2 && !flag3         ? flag4         ? 

Blah


  : flag5         ? 

Meh

         : 

Herp

         :
  

Derp

       }     
  Should be:    
       { flag
  && flag2 && !flag3         ? flag4             ? 

Blah


  : flag5                 ? 

Meh

                 :
  

Herp

         : 

Derp

       }     

 
  foota - 38 minutes ago
  The right approach here is really to just do the logic outside of
  jsx, perhaps as a method on the component or something.
 
  exogen - 31 minutes ago
  Conditional-markup solutions always look inelegant.I'd bet this
  looks absolutely crazy to many developers:      then bar else baz">
  An essentially eval'd code string
  inside a markup attribute? That uses some made-up language that's
  neither HTML nor JS?! I used to write plenty of code like this in
  various template languages, and it always felt bad.
 
    rajangdavis - 23 minutes ago
    This is best and worst part about Angular. You have this
    declarative way of rendering parts of a page, but once this
    gets abused, it becomes a pain in the ass to understand the
    control flow.
 
  harlanlewis - 29 minutes ago
  The article?s format is a bit confusing here. I think what you?re
  reacting to _is_ the ?alternate hacky approach?.Just one line up
  in the bulleted list is: ?Best approach: Move logic to sub-
  components?. There isn?t an example or a link because the
  recommendation is that simple.Of course there are no absolutes
  and there are many other approaches that split difference between
  inline logic and additional components, but the general idea is
  to avoid writing a bunch of conditionals in your JSX unless you
  have to - and in that case, this mess of nested ternaries is one
  way to do it.
 
  rajangdavis - 25 minutes ago
  I haven't used React all that much, but this pattern does not
  seem like it would be common. This seems to be more of a "get
  something shipped and cut some corners if you need to" scenario.
 
  ng12 - 23 minutes ago
  It has nothing to do with React, it's just JavaScript. It's no
  easier or harder to do conditional rendering than any other
  library I've ever used.
 
  spraak - 23 minutes ago
  You're ditching ALL of React just because one pattern used by
  some in an optional (JSX) part of the framework? OK then...