To read more articles like this, visit my blog
React is very unopinionated about how things should be structured. This is exactly why itβs our res...
For further actions, you may consider blocking this person and/or reporting abuse
Many of these "blanket" rules: i think one should take a balanced approach, depending on when it's necessary. Your goods are not always good.
A number of these, if you use Prettier, eslint (or similar tools), they auto format these and/or warn you about them anyway.
Number 4 - Use Fragments:
I think as a blanket rule, this one is just wrong. There's a very big difference between
<div>and<>, at least for the css layout, which is important. Don't just follow the many hypes, such as automatically replacing your outermost<div>with<>. Example: say, outside of your component you have a flexbox. Thedivwill group its contents together,<>will spit them out separately, they will not stick together. You'll end up with very different layouts.Number 5 - Don't define a function inside render:
-- Why? There are other conflicting software development principles which go against this. Example: don't declare variables unnecessarily, for single use, single use variables can make your codes clearer, or less clear. Depends on the case, balance it. If it is a short and simple js statement, inlining it can make your code clearer.
Same goes for Number 10: js inside jsx.
Use memo: Memo can easily cost you more than it saves.
11. Template literals
Whether template literals are cleaner, easier to read or safer: highly debatable. Depends on the specific case.
12. Import in Order
Counter-rule: don't spend time pedantically on things which the browser tools do (and should be doing) mostly automatically, such as: adding/removing imports automatically. Don't spend time reading, reviewing, discussing things like import's.
16. Quotes
This seems very personal. I think most kind-of de facto automatic code formatting tools convert all single quotes to double, or double to single anyway, in the recent years I've never worked on a project where they used both (except the cases where you have to use single quotes inside double quotes or the other way around, which is a different topic).
Yes... best practices are kindof lights in a runway.... not the runway itself.
And in my experience, yes you can always use the linter and prettier to fix most things.
But does it hurt to know why these rules are there in the first place? :)
Why? Indeed.
Many/most of the points in this article just declare a rule, but don't (really) explain (or prove) why... imho
;oAgreed. But it's hard to prove these things :P
True :o) That's why many developers have been fighting for decades over these often somewhat arbitrary things.
Software development has been evolving, too, things have been changing over time.
And that's why Prettier, for example is such as good idea, i think, at least for one reason:
-- a professional team carefully selects one standard, then the whole community starts using the same format, it makes the code more uniform, easier to read for everyone, and therefore safer, too. It's the tool's task to auto-format, so we spend our time and effort on the actual coding, and not on the formatting of quotes and commas and spaces and discussing.
Using "style" intristic prop is a huge source of misstyling. Imagine you have 35 div's with same styling and you need to change just one or two properties of it. Writing a CSS class is way more better and convenient.
That was my initial thought as well.
Good article dood!
I love this article. Now a days instead of writing code, write a code with best practice is a far one.
I also share my experience and best practices in typescript and javascript to everyone for learning.
Keep it up!
If anyone would be willing to answer my questions about the seventh point in the article "Put CSS in JavaScript". I never understood why is JavaScript styling more sought after as CSS styling in React development. In my experience when I split the application into manageable components and pages CSS becomes much more manageable as pure JavaScript styling or styled components, even without introducing SCSS. And this rabbit hole just becomes even deeper when we introduce a component library such as Material UI. Why do they bother introducing quadrillion ways of styling their components instead of making it simpler with CSS styling, it just doesn't make any sense to me.
In this helpful article, the author shares 21 excellent tips for writing clean, maintainable React code. Some key takeaways: use JSX shorthand, ternary operators, object literals, and fragments for cleaner JSX. Move logic out of render methods and leverage memoization for performance. Employ object destructuring, template literals, and implicit returns in JavaScript. Follow conventions like PascalCase for components, camelCase for instances, and double quotes in JSX. Include useful alt text for accessibility.
Really good tips mate.
Keep the good work ;) !
Great Post Faisal!β€π
I Like how you explained with examples! π
Use memo in the early stage of development is anti-pattern and might cause you trouble. So, use it when you're really needed it.
I agree... this is just nice to know that you have it in your arsenal... when you need it.
Thank you for this nice article!
I have one question about point 7 though:
I always keep my JS separate from my CSS, so I put everything in its own file.
This, to me, feels like a nice separation of concerns and I found that there are quite a few articles that criticize CSS-in-JS:
dev.to/srmagura/why-were-breaking-...
dev.to/xantregodlike/css-in-js-why...
freecodecamp.org/news/you-dont-nee...
dev.to/macsikora/css-in-js-did-we-...
What is your stance regarding this topic? :)
Yes... but at the same time libraries like tailwind css has become much more popular...
I think this can vary from person to person. If separating css works for your project's scale and improves productivity, then why not?
There is no silver bullet! :D