Just want to mention that, for CSS Modules, if you want to provide a dynamic property into the stylesheet, this trick is super useful: .container { background-color: var(--color); } Maybe you're not a fan of the syntax. Personally I'm not a fan of the Styled Components syntax. That said, I don't use this _too_ much in the same file, partially because I don't feel the need to, but also because I'd rather segment this functionality into finer components. It's otherwise a really neat trick, no Sass required. Oh, and if you're wondering "why not just write the background-color as an inline style", my answer is that the value you provide can now be used in different CSS functions that relate to the other styles, plus it provides a different level of specificity if you consider inheritance.
Using nanoid() for generating unique map keys is a complete overkill. You don't need yet another library just for that. Just write a function that returns an incremented number, and that's enough.
Why you don't use any UI framework like Material UI? It will help one focus only on development rather than writing css from scratch. Or you just use CSS in small projects, where business logic is hardly a thing. What's your opinion on using Material UI over CSS?
It depends. If unique style is a priority for your project, use styled components instead. Otherwise, you'll be fighting to make things work with material ui's code. Edit: BTW, you can use both at the same time. It all depends on your project
@@devanwoodruff7289 I personally find myself being more productive and efficient building most of my projects with custom CSS (either in modules or CSS in JS) whenever I am building a production grade web application for clients, since often they come along with new ideas to add to the application after already being shipped once, which requires custom engineering. Really depends, but in my honest opinion you shouldn't use something like Material UI to make it look different than Material UI, because then you might as well go for something like tailwind. Edit: btw I would totally recommend to use something like radix UI or MUI Base for unstyled components when making custom CSS, so the interaction logic is already there Edit: just noticed this thread is a year old 😂
Really interesting about the ErrorBoundaries, avoids the usage of having to have a component state like: "[error, setError]" and having to populate that whenever anything happens. But, at some points i guess you may need to have a local state to display error messages. About the styledComponents, i read that they have to be used really carefully as if you have many many styled components being constantly rendered, it may affect performance. So some people may recommend using classNames directly for faster rendering. And you can actually pass dynamic variables to CSS modules, either by using $color (previously forwarded global styles) or using `var(--red-color)` that you can totally specify within global ::root Plus, if you have styledComponents, you usually want to make them re-usable, right? So the idea is to have them in a certain folder location to then be imported anywhere, unless it's a suuuper unique non-shareable styled one. If that's the case, of importing them from any component, you still need to go to the specific styled component code to see what the heck is applying. So you're kinda in a same situation as in modules.
Lol I was bashing styled components for no reason and then you said you are using sass as extension, fuck yeah, I will immediately install styled components tommorow 😘
What's your advice for people who are learning React now the 'modern' way (with functional components and hooks), but knowing there's a good chance they will encounter class components at some point? Imagine someone goes for an interview and the interviewer starts asking them to do stuff with class components but literally everything the interviewee has learned is to do with functional components. There seems to be this disparity between teachers such as yourself emphasizing learning React the modern way (as that's now the standard) but also a fear of being overlooked by employers as newbies won't know the old ways. On the flip side, it seems too much to learn both as there's so much to learn already...
I don't think it's necessarily too much to learn both. You don't need to go in-depth about class components, just know the basics so that you know what it is about. Because at the end of the day, in your situation, you would only be maintaining fully written class components. Those you make yourself would be functional. If you need to refactor a class component, you could convert it to functional as well. Generally the things to keep in mind is how the "this" keyword has to be bound and managed, and figuring out the names for the different life cycle hook functions, like componentDidMount. Other than that, class components are pretty similar to function components, so maintaining them shouldn't be too hard.
@@MrMudbill Thanks for the reply! Since writing that comment I've been using class components more and feel they're not a great leap from functional components, as you suggested. I purposely watched a few 'old' tutorials using class components and it helped a lot. Someone told me (unless you're maintaining an old code base) class components are now only really used for error boundaries.
Hi ! Thanks you for this useful vidéo ! I see a amazing feature you have on your vsCode : You click or double-click on a component tag and the component’s file open ! Genius idea ! What’s the name of the plug-in ?
Hi... React is very slow to install. It took 45 minutes to install react either npm or yarn. I have 4gb ram i5 no gpu laptop. How to speed up react installation.
Maybe you've an HDD instead of an SSD in your notebook? React needs a lot of very small files.. If you don't have an SSD, the hard drive might be too slow.
Just want to mention that, for CSS Modules, if you want to provide a dynamic property into the stylesheet, this trick is super useful:
.container {
background-color: var(--color);
}
Maybe you're not a fan of the syntax. Personally I'm not a fan of the Styled Components syntax. That said, I don't use this _too_ much in the same file, partially because I don't feel the need to, but also because I'd rather segment this functionality into finer components. It's otherwise a really neat trick, no Sass required.
Oh, and if you're wondering "why not just write the background-color as an inline style", my answer is that the value you provide can now be used in different CSS functions that relate to the other styles, plus it provides a different level of specificity if you consider inheritance.
Using nanoid() for generating unique map keys is a complete overkill. You don't need yet another library just for that. Just write a function that returns an incremented number, and that's enough.
Why you don't use any UI framework like Material UI? It will help one focus only on development rather than writing css from scratch. Or you just use CSS in small projects, where business logic is hardly a thing. What's your opinion on using Material UI over CSS?
It depends. If unique style is a priority for your project, use styled components instead. Otherwise, you'll be fighting to make things work with material ui's code.
Edit: BTW, you can use both at the same time. It all depends on your project
@@devanwoodruff7289 I personally find myself being more productive and efficient building most of my projects with custom CSS (either in modules or CSS in JS) whenever I am building a production grade web application for clients, since often they come along with new ideas to add to the application after already being shipped once, which requires custom engineering. Really depends, but in my honest opinion you shouldn't use something like Material UI to make it look different than Material UI, because then you might as well go for something like tailwind.
Edit: btw I would totally recommend to use something like radix UI or MUI Base for unstyled components when making custom CSS, so the interaction logic is already there
Edit: just noticed this thread is a year old 😂
@@bonedfps couldn't agree more!
Really interesting about the ErrorBoundaries, avoids the usage of having to have a component state like: "[error, setError]" and having to populate that whenever anything happens. But, at some points i guess you may need to have a local state to display error messages.
About the styledComponents, i read that they have to be used really carefully as if you have many many styled components being constantly rendered, it may affect performance. So some people may recommend using classNames directly for faster rendering.
And you can actually pass dynamic variables to CSS modules, either by using $color (previously forwarded global styles) or using `var(--red-color)` that you can totally specify within global ::root
Plus, if you have styledComponents, you usually want to make them re-usable, right? So the idea is to have them in a certain folder location to then be imported anywhere, unless it's a suuuper unique non-shareable styled one.
If that's the case, of importing them from any component, you still need to go to the specific styled component code to see what the heck is applying. So you're kinda in a same situation as in modules.
Lol I was bashing styled components for no reason and then you said you are using sass as extension, fuck yeah, I will immediately install styled components tommorow 😘
What's your advice for people who are learning React now the 'modern' way (with functional components and hooks), but knowing there's a good chance they will encounter class components at some point?
Imagine someone goes for an interview and the interviewer starts asking them to do stuff with class components but literally everything the interviewee has learned is to do with functional components. There seems to be this disparity between teachers such as yourself emphasizing learning React the modern way (as that's now the standard) but also a fear of being overlooked by employers as newbies won't know the old ways.
On the flip side, it seems too much to learn both as there's so much to learn already...
I don't think it's necessarily too much to learn both. You don't need to go in-depth about class components, just know the basics so that you know what it is about. Because at the end of the day, in your situation, you would only be maintaining fully written class components. Those you make yourself would be functional. If you need to refactor a class component, you could convert it to functional as well.
Generally the things to keep in mind is how the "this" keyword has to be bound and managed, and figuring out the names for the different life cycle hook functions, like componentDidMount. Other than that, class components are pretty similar to function components, so maintaining them shouldn't be too hard.
@@MrMudbill Thanks for the reply! Since writing that comment I've been using class components more and feel they're not a great leap from functional components, as you suggested. I purposely watched a few 'old' tutorials using class components and it helped a lot. Someone told me (unless you're maintaining an old code base) class components are now only really used for error boundaries.
Hi ! Thanks you for this useful vidéo ! I see a amazing feature you have on your vsCode : You click or double-click on a component tag and the component’s file open ! Genius idea ! What’s the name of the plug-in ?
Great context bro. Thank You!
thank you!!!
really good content. Thank you.
Why not use hooks instead?
Awesome!
I dont think people looking for advanced "pro" tips on react need you to explain WTF react is!
😍❤️❤️❤️❤️
Hello! Thanks for the video! But why do you promote typescript and use the type “any” so much in your examples?
He doesn't want to confuse the people
Hi... React is very slow to install. It took 45 minutes to install react
either npm or yarn. I have 4gb ram i5 no gpu laptop. How to speed up
react installation.
It's mainly because of your network cause it literally takes
@@CoderOne ops.. more than 5mbs speed i hv.
Maybe you've an HDD instead of an SSD in your notebook? React needs a lot of very small files.. If you don't have an SSD, the hard drive might be too slow.
@@sindiahoeller1487 this was the problem for me
use Vite