5 ms·
This article includes a tweet which demonstrates a very contrived example of a for loop using JSX. If you're ever writing code like this, please reevaluate your
by supernintendo 11y ago
This article includes a tweet which demonstrates a very contrived example of a for loop using JSX. If you're ever writing code like this, please reevaluate your career in software development.
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.
- chrshawkes 11y ago"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.
- untog 11y agoWell, 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> Not a templated component like that. That said, I have created repeater components and the like before, largely because JSX is so friendly that more design-minded people can use it very easily. 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> on the other hand...
- gberger 11y agoYou 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`).
- untog 11y agoHuh. 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.
- esailija 11y agoThat 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.
- supernintendo 11y agoGenerally speaking, I do not recommend this pattern. My preference is to handle enumeration within a function, for example: <ul> {this.listItems(items)} </ul> Then, within a function implemented on the same component: listItems: function(items) { items.map((item) => { return <li>{item.name}</li> }); }
- freekh 11y agoIs it just me, or is the return missing in the `function` (or am _I_ missing something :)? Not important of course, just pointing it out...
- supernintendo 11y agoGood catch! I wrote that example in a hurry on my lunch break so I take accountability for the mistake.
- gberger 11y agoIf you omit the {} you can then also omit the return. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions https://developer.mozilla.org/en/docs/Web/JavaScript/Referen...
- supernintendo 11y agoI 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.
- ricardobeat 11y agoAre you referring to .map()? Its a standard array method in every language with first-class functions. Why would you prefer a for loop?
- draw_down 11y agoWell, it's a negative example. So you and the tweet are saying the same thing