Re:JSX is no longer my friend
by chrshawkes on Tuesday March 15, 2016 @04:23PM
(#11292678)
"If you're ever writing code like this, please reevaluate your career in software development."
That's a pretty nasty comment to make about anyone in this industry over a simple for loop.
Re:JSX is no longer my friend
by supernintendo on Tuesday March 15, 2016 @04:37PM
(#11292788)
I apologize and you are correct in stating this. Less experienced developers may come across these sorts of mistakes when conflating JSX with templating languages that contain logic constructs (Handlebars et al). It is important to clarify.
To be more constructive, I believe an understanding of when to use the right tool for the right job is paramount to a good software developer. JSX nodes are suitable for representing UI components but certainly not control statements such as a for loop.
Well, it is just plain wrong. Even if you wanted to do a for loop in JSX you'd do
<div>
{for (var x=0;x<10;x++) {
<div/>
}}
<div>
EDIT: turns out that doesn't actually work, ha. I've never written JSX that way.
<div>
{[0,1,2,3].map((i) => {
<div/>
}}
<div>
You just proved the author's point. The JSX you provided is invalid, since you can't pass `for` as a function argument (see his equivalent bit about `if`).
Huh. Well, my only defense is that I would never even try to write JSX like that anyway - the actual JS in my JSX templates is basically just Array.map calls.
Re:JSX is no longer my friend
by supernintendo on Tuesday March 15, 2016 @04:42PM
(#11292815)
Generally speaking, I do not recommend this pattern. My preference is to handle enumeration within a function, for example:
<ul>
{this.listItems(items)}
</ul>
listItems: function(items) {
items.map((item) => {
return <li>{item.name}</li>
});
}Is it just me, or is the return missing in the `function` (or am _I_ missing something :)?
Not important of course, just pointing it out...
Re:JSX is no longer my friend
by supernintendo on Tuesday March 15, 2016 @06:51PM
(#11293668)
Good catch! I wrote that example in a hurry on my lunch break so I take accountability for the mistake.
If you omit the {} you can then also omit the return.
https://developer.mozilla.org/en/docs/Web/JavaScript/Referen...
True but irrelevant, the GP is talking about the top level function, not the fat arrow one.
Guess I was also in a hurry!
That shouldn't work since syntactically you are in a middle of a function call where you can only have expressions. This is funny because one of the author's point was that JSX makes that confusing because you would never think to write `callFunction(for (var i = 0; ...))` normally.
Re:JSX is no longer my friend
by ricardobeat on Tuesday March 15, 2016 @04:56PM
(#11292920)
Are you referring to .map()? Its a standard array method in every language with first-class functions. Why would you prefer a for loop?
As an aside, we recently moved from Nunjucks templates to React / JSX at work and the frontend team couldn't be more pleased. Components reflect improvements made to them across the board and provide a happy medium between designer and JS dev. I have also found a lot of power in refs by implementing superclass functions that provide reusable logic for elements based on the key of the ref when certain functions are implemented on the corresponding component. This can be used for state persistence in forms, analytics or anything else the developer imagines.
Context switching has not been an issue but all of our frontend devs also do work on the backend. This may be an issue to consider for teams that don't embrace cross disciplinary roles.