Hope this video helps you create better React components! Thanks to Skillshare for sponsoring. The first 500 people to use my link will get a 1 month free trial of Skillshare: skl.sh/bytegrad10241. Disclaimer: this is a sponsored video (paid). Double-check safety, accuracy and other relevant parts of the reviewed product.
8:55 Interesting. ChatGPT told me space-x-[number] actually only works with flexbox containers. And "gap" works for both Flexbox and Grid. space-x-3 is using margin, but gap is using gap. gap is easier because you can set 4 different directions in one go but with space you need to specify both x and y direction so it makes the style strings longer.
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.
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?
Hi, yes it’s USD. Checkout page shows the best price for you. Next.js 15 doesn’t change much, I’ll probably create a video explaining the differences but they’re really small it’s nothing to worry about
Template literal works just as well, pass in the className as a prop then on the element add: className=`your stuff px-6 py-3 flex flex-col ${className}`
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
This is a bad idea, because it conflicts with regular React. What if your component is defined by more than it's styling? Do you add the class to the component internally? Do you not use a custom class in this case? What about if you want to apply small adjustments like margins to individual instances of the component? Do you apply the techniques shown here to only those custom components and custom classes to other ones? The practice shown here leverages the common patterns of React to create uniform custom components. Mixing them with custom classes is almost never the right idea.
@@CookingForAlba-qh8nq You're right, defining custom classes like .H1, .H2, and .body-text does resemble Bootstrap's approach. However, there's a key difference. With Tailwind, these classes are generated using utility-first classes, making them highly customizable and flexible. And it helps beginners avoid repeat writing their tailwind classes. 😅
@@ManishGupta-nv5by One of the biggest selling points of Tailwind is that it provides utility classes for almost every widely used CSS property. This means we don't have to create our own arbitrary class names, nor do other developers. As a result, Tailwind helps create a common language across projects, allowing developers to switch between projects easily thanks to these standardized utility classes. When you start to use @apply and create custom classes, you're introducing personalized class names, which even the Tailwind creator discourages as it can lead to code inconsistency.
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 made some big projects with styled components and I loved it because I could write it like sass and also apply JavaScript logics but after learning tailwind and making projects with it, I realized that I'm never gonna make a project again with styled components. It's pain with styled components for a big projects.
I tried consistently applying SASS with BEM for a medium React website project, and it was a nightmare to maintain/update and I'll never do it again. It probably would be a similar story with Styled Components. After switching to Tailwind, everything fell into place. And I must say I was kinda Taildwind hater before. It feels like React is generally integrates better with Tailwind, but maybe it's just me.
From my experience tailwind is so much quicker to use, but I do understand the working model of styled components. Sometimes I just create components that are a single div with some classes from tw applied and use them as I would styled components. For me tailwind is just a dialect of css, and can be used just as styled components can, but with more flexibility through inline styles (especially useful when prototyping).
I disagree with creating new React components for H1-H6. It's over engineering for something so simple. With Tailwind CSS I create default sizes for them in global.css
Sometimes it feels unnecessary but I like to handle spacing between elements on the parent element. Margin also has collapsing behavior which to me is not how I think about layouts.
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.
@@juliusgrisette It's not, and I'm talking from real project, how poorly react scales and this problem wtih zustand and context and working with gigantic tables.
🚨 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.
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.
@ just google it, there are many articles explaining it in details. Long story short, it makes your component markup very rigid and basically every css property becomes implicit external interface of your component. It would be much better to make your component configurable through explicit properties instead of giving access to all css.
@@songoku12555 Dude just think he is smarter than others. Why yes? UI component overrides and layout positioning without creating extra markup is what I use the most often. And often you cant even wrap the element without breaking flex or grid children. Or maybe he uses huge components that are not reusable. Nonsense.
@@codewithmeer the most nonsense shit is to think you’re a senior dev after working on a couple pet projects once you get real experience maintaining a ui library in a decent company, you will understand, but now you can continue creating your videos about html
Hope this video helps you create better React components! Thanks to Skillshare for sponsoring. The first 500 people to use my link will get a 1 month free trial of Skillshare: skl.sh/bytegrad10241. Disclaimer: this is a sponsored video (paid). Double-check safety, accuracy and other relevant parts of the reviewed product.
8:55 Interesting. ChatGPT told me space-x-[number] actually only works with flexbox containers. And "gap" works for both Flexbox and Grid.
space-x-3 is using margin, but gap is using gap. gap is easier because you can set 4 different directions in one go but with space you need to specify both x and y direction so it makes the style strings longer.
You are addressing really important issues, 100% useful.
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.
Your channel is really good, thank you for making these vids ❤
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?
Hi, yes it’s USD. Checkout page shows the best price for you. Next.js 15 doesn’t change much, I’ll probably create a video explaining the differences but they’re really small it’s nothing to worry about
Template literal works just as well, pass in the className as a prop then on the element add: className=`your stuff px-6 py-3 flex flex-col ${className}`
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
This is a bad idea, because it conflicts with regular React. What if your component is defined by more than it's styling? Do you add the class to the component internally? Do you not use a custom class in this case? What about if you want to apply small adjustments like margins to individual instances of the component? Do you apply the techniques shown here to only those custom components and custom classes to other ones?
The practice shown here leverages the common patterns of React to create uniform custom components. Mixing them with custom classes is almost never the right idea.
I prefer using pure css for the page template, if style is the only change for my custom component
Thanks for the cn tip
There is also a similar very small utility called "clsx" to conditionally apply class names
True
It's similar because cn function uses exactly clsx under the hood.
@@evheniydan Good to know
which vs theme are you using?
we need such videos
I always do the same. And it is quite helpful.
👍
Why we cant use just these for class names merging? It is literally 2 string. ["your classname", "other default classnames"].join(' ');
Amazing video
Thanks!
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;
}
Starts looking like Bootstrap, isnt this the issue we wanted to solve with Tailwind in the first place?
big NO! You must avoid this pattern.
@@CookingForAlba-qh8nq You're right, defining custom classes like .H1, .H2, and .body-text does resemble Bootstrap's approach. However, there's a key difference. With Tailwind, these classes are generated using utility-first classes, making them highly customizable and flexible. And it helps beginners avoid repeat writing their tailwind classes. 😅
@@gümrahsindar can you please further explain?
@@ManishGupta-nv5by One of the biggest selling points of Tailwind is that it provides utility classes for almost every widely used CSS property. This means we don't have to create our own arbitrary class names, nor do other developers. As a result, Tailwind helps create a common language across projects, allowing developers to switch between projects easily thanks to these standardized utility classes. When you start to use @apply and create custom classes, you're introducing personalized class names, which even the Tailwind creator discourages as it can lead to code inconsistency.
Better create traditional class “title” and use tailwind @apply.
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.
Also good options yes
I made some big projects with styled components and I loved it because I could write it like sass and also apply JavaScript logics but after learning tailwind and making projects with it, I realized that I'm never gonna make a project again with styled components. It's pain with styled components for a big projects.
Doesn’t play well with Server Components so its not just about choosing a way of writing CSS, it’s how its compiled and when as well.
I tried consistently applying SASS with BEM for a medium React website project, and it was a nightmare to maintain/update and I'll never do it again. It probably would be a similar story with Styled Components. After switching to Tailwind, everything fell into place. And I must say I was kinda Taildwind hater before. It feels like React is generally integrates better with Tailwind, but maybe it's just me.
CSS in Js like Styled Components, Emotion, etc needs to be eradicated. It's a relic from React past, like classes.
exactly why I prefer styled-components
From my experience tailwind is so much quicker to use, but I do understand the working model of styled components. Sometimes I just create components that are a single div with some classes from tw applied and use them as I would styled components.
For me tailwind is just a dialect of css, and can be used just as styled components can, but with more flexibility through inline styles (especially useful when prototyping).
We want a tanstack start course please!
Great video nobody talks about! Thanks!
I think the biggest and anti-pattern the people forget to use forwardref
You no longer need it with react 19
@ we still wait for react 19
I disagree with creating new React components for H1-H6. It's over engineering for something so simple. With Tailwind CSS I create default sizes for them in global.css
I ditched all margins from my code base because everything that can be done with margin can be done with padding and flexbox
Sometimes it feels unnecessary but I like to handle spacing between elements on the parent element. Margin also has collapsing behavior which to me is not how I think about layouts.
Padding and margin are not the same.
Great
👍
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.
React will be dead in 3 to 5 years.
Everything is antipattern in react, nothing is scalable on big project.
Skill issue
@@juliusgrisette It's not, and I'm talking from real project, how poorly react scales and this problem wtih zustand and context and working with gigantic tables.
Just make a component for a component for a component, now thats a pattern
🚨 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: . It is just important that the string ends with a space.
Then you end up having conflicting styles...
Your whole video is an antipattern. You don’t want to add className to your reusable components
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.
Why?
@ just google it, there are many articles explaining it in details. Long story short, it makes your component markup very rigid and basically every css property becomes implicit external interface of your component. It would be much better to make your component configurable through explicit properties instead of giving access to all css.
@@songoku12555 Dude just think he is smarter than others. Why yes? UI component overrides and layout positioning without creating extra markup is what I use the most often. And often you cant even wrap the element without breaking flex or grid children. Or maybe he uses huge components that are not reusable. Nonsense.
thats the most nonsense shit ive read in a while man.
@@codewithmeer the most nonsense shit is to think you’re a senior dev after working on a couple pet projects
once you get real experience maintaining a ui library in a decent company, you will understand, but now you can continue creating your videos about html
just create typography.tsx with variants using class-variance-authority
❤