DEV Community

My secret trick for writing great React components

Victor Ocnarescu on November 29, 2021

I have a confession to make. I do not write a single test for my React components. Yes, you read that right, not a single one. You might wonder how...

Read full post

Bert Meeuws • Nov 30 '21

"Always write React components that you can read without scrolling."

Tailwind has entered the chat

mrcbns • Dec 1 '21 • Edited

I usually create old style css name classes and @apply directive to get rid of huge inline classes.

It also let me split styling from behavioural tailwind classes on different @apply directives on the same class so mt-2 is not mixed with hover: and so on

Heroe • Dec 3 '21 • Edited

What's even the point of using tailwind that way and not just use css/sass ?

Confession: The apply feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.
You should almost never use it 😬
Reuse your utility-littered HTML instead

from the creator himself twitter.com/adamwathan/status/1226...

Bert Meeuws • Dec 1 '21

I am in love with tailwind, the way you can just copy paste html and pass it on to a partner and it should look the same (taking position etc. into consideration).

And never having to scroll trough massive css files is worth the hassle of big HTML.

Heroe • Dec 3 '21 • Edited

Well it may be fine but tailwind didn't invent anything nor there is anything innovative into this approcah, that's just old css utility classes, a bit like bootstrap ( although you'd most likely still use custom css with it since it;s opinionated ) and almost verbatim what tachyons basscss etc have been doing for years.

muhsarip • Dec 3 '21

too many class inside single element, make use of tailwind is harder to read.

Victor Ocnarescu • Dec 3 '21

You are perfectly right, Tailwind did not invent anything new and Tachyons did this years ago. In my personal experience I prefer Tailwind over Tachyons because class names have better names for the first one.

Take f5-l which for Tachyons means font-size: 1rem.
Tailwind has font-base which means the same thing.

Victor Ocnarescu • Dec 3 '21 • Edited

I also love the fact that I do not have to come up with names for classes. In the old days I would say container or container-header, now I just add utility classes like flex flex-col gap-2 and everyone in my team understands the CSS behind it.

Comment deleted

Victor Ocnarescu • Nov 30 '21

Interesting article. If i understand correctly, Kent would not split a simple component that just contains many many html elements.

I disagree and would split this component right away. The worst case scenario: I have a few extra components included in my main component that are easier to read and have meaningful names.

If I may ask, how large is your largest file on the project you are working on? I am onboarding in a new project where I saw components with over 1000 lines of code. Horror!

l0st0 • Dec 4 '21

I guess you did not see 14000 lines of code :D believe me 1000 is not so bad at all

Joe Attardi • Nov 30 '21

A 1,000+ line component sounds like a nightmare, I think that is a perfectly valid reason to break it up :)

redicrafty • Dec 1 '21

This is one of the best articles I've seen on this platform. Straight to the problem with easy to understand and simple code examples, good english. Basically everything to keep the reader engaged.
Well done!

Victor Ocnarescu • Dec 2 '21

Thanks a lot for your feedback, it really made my day better. I'll try to do my best in the future as well. This really is the most important problem that I've noticed in React projects so I'm glad you found it useful.

Ed Perkins • Nov 30 '21 • Edited

It's a nice idea, but wading through a million nested components is a debugging nightmare and makes the context of each component difficult to understand for someone who is new to the project.

I always prefer to abstract when I need to rather than adhere to the single responsibility principle. I'm not convinced that universal rules are necessarily always useful.

Victor Ocnarescu • Nov 30 '21

I was not convinced at first as well, but I found out over and over again that if it's easier to read it has less bugs.

I'm curios about the abstraxtion you were referring. Could you give me an example?

MRJUNNU • Dec 4 '21

File Organization. React doesn't recommend a specific pattern to organize folder structure, but there are a couple of suggestions on their website. ...
Don't Repeat Yourself. ...
Name Your Components Well. ...
Use PropTypes (or TypeScript) for Type Checking. ...
Use Linting Tools. ...
Separate Display and Business Logic. ...
Write Test Cases.
By: cinemahd-v2.com/

Sarvesh Dubey • Feb 10 '22

How do you write a component like modal and use for every type of modal.

Victor Ocnarescu • Feb 15 '22

I use a generic modal component like the modal from the react-bootstrap package and I customize it by writing new modals in separate files.

Something like this:

const ConfirmModal = ({ isOpen, hide }) => {
  return (
    <Modal centered backdrop="static" show={isOpen} onHide={hide}>
      <h2>hello world</h2>
    </Modal>
  );
};