Why I Don't Use Margin in React Components

I do love using the gap property with flexbox, but it's not supported by Safari 14.4 which had its last release in 2020. It's surprising how many customers are still using this version.

Why we cant use just these for class names merging? It is literally 2 string. ["your classname", "other default classnames"].join(' ');

I'm interested in the course but didn't receive any reply for 2 days on Crisp. Is the currency based on location or USD by default? Because it is currently taxed according to my country. And are there any promo codes to use on the checkout page? And will the course be updated to Next 15 and its future releases?

Thanks for the cn tip

React will be dead in 3 to 5 years.

exactly why I prefer styled-components

Love your videos but genuinely think this is not the best solution (specifically regarding the h1) and is actually an anti-pattern in itself. You're using Tailwind so simply add a global class and use @apply utility from tailwind allowing you to have a global style for all your headings without the additional engineering to simply add another class. But all that said; for card components etc is spot on - apologies if this comes across overly critical x

Just make a component for a component for a component, now thats a pattern

Your whole video is an antipattern. You don’t want to add className to your reusable components

Better create traditional class “title” and use tailwind @apply.

🚨 Your demonstration is actually the anti-pattern. 🚨 Leverage the core features of the CSS Cascade, and create global styles for core elements (which your browser already does). Custom components for basic styles creates a ton of code cruft, and makes editing the core attributes of those elements impossible without building out an entire interface.

Instead of cn function, it is possible to simply write: <p className={"font-bold " + className}>. It is just important that the string ends with a space.

Hey ! One of the thing I often see regarding typescript is in fact typing each prop like : className?: string, children: React.ReactNode.

But those prop already exists and it can be tedious to add those like that, I highly recommand using this pattern instead:

(if I take your example title component)

const H1: React.FC<React.ComponentPropsWithoutRef<"h1">> = ({className, ...props}) => <h1 className={cn("some-default-classNames", className)} {...props} />

I know it may be strange to see and orphan tag spreading props like that but children is part of {...props} and will be evaluated as a React.ReactNode, It makes it super flexible and it inherits the native h1 props.
Therefore, we could send a data-anyattribute or other basic aria elements etc. to our generic component.

I don't know if you've alreay covered this approach into another video but just in case you don't, it could help others to know this :)

Anyway, your videos are great ByteGrad, I love your content, thank you very much ! 🤗

which vs theme are you using?

Always a good choice to watch a ByteGrad video!

I already knew most of this stuff having taken the React/Next course, but low and behold, I've been using space in conjunction with flexbox! Time to start using gap instead.

Everything is antipattern in react, nothing is scalable on big project.

I ditched all margins from my code base because everything that can be done with margin can be done with padding and flexbox

just create typography.tsx with variants using class-variance-authority

The biggest anti-pattern in React is to add className prop to your components. Looking at title of the video, I was genuinely hoping you were gonna tell about it.

I prefer using pure css for the page template, if style is the only change for my custom component

We want a tanstack start course please!

This is awesome you can also make the className prop optional by adding a ? on its type className?: React.ReactNode if you want it to have default styles in some places.

we need such videos

Great video nobody talks about! Thanks!

Title made me google anti pattern as non native speaker 😂

For cards use subgrid

I think the biggest and anti-pattern the people forget to use forwardref

Amazing video

There is also a similar very small utility called "clsx" to conditionally apply class names

Start with reusable Tailwind classes for simple styles.
Gradually migrate to reusable React components as complexity increases.
.H1 {
@apply text-5xl font-bold;
}

.H2 {
@apply text-3xl font-semibold;
}

.body-text {
@apply text-lg leading-relaxed;
}

Styled Components. My goto solution for global and scoped styling. Tailwind is great but I'm finding more and more that companies hiring want developers who can use CSS design systems, including SASS, modules, and BEM.

I'm in love with your videos, it's just so damn organized and easy to understand. I hope you get to explain other programming frameworks like this too. Be it React Native, .NET, Django, Java Spring. I would watch any video you upload as long as you explain the very fundamentals and the correct pattern to adopt, because it is satisfying.

❤

Great

I always do the same. And it is quite helpful.