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