This is just awesome! in just one video you covered a lot of topics (twMerge,CVA,clsx). Thanks a lot for this video. I will watch this multiple times so that everything you showed gets ingrained. Thanks again.
I just start learning React and Next Js and I was wondering how I could make a very reusable button component so that I couldn't re-style it if I needed a different button style. And man THIS IS HUGE for me 😁 Thank you for the time you spent to share all of this to us
Yah bruh this is dope and literally super smart and the only way to go… also you’re super easy to listen to and I’m stoked to now officially be a subscriber… also why I’m I sitting in the couch writing this in my phone when I could be on the Mac Studio coding rn 😂!
And I would like to add on that in tailwind overriding don't happen so that red color to the background which you are able to see now after putting the props after the className may or maynot show up the same color when after to re run your project
This is really well explained and extremely practical! I wonder if it's possible to do something similar applied to different jsx tags of the children. Setting aside variants, if I wanted to type both and a as children elements of a Card component in App.tsx, how would I be able to style both of those tags in a component and apply it to the children? It doesn't seem straightforward since I'm actually creating new and in App.tsx. I suppose I could create an h1 and p prop in my component with the styles applied, and destructure that prop in my page, but that doesn't seem like a very elegant solution since I'm writing an entire paragraph for an object property. If anyone has a better idea I'd love to hear it.
Great video thank you very much, just one question. im trying to implement this approach with nextJS (following your course) i did all the layouts and pages in folder structures as you said, but i am running a problem when trying to pass a function through the onClick prop. i think next is limiting it but i am not sure, how do i make things click? thanks :D
hello, are you marking your buttons with "use client" directive? In Next.js components run on server by default, to make a component run on client you have to add "use client" at the start of the component file.
hi @@bloodylupin, actually i did try it out but it didnt work, it felt like it did nothing really, like next.js straight up ignored it. thanks for the reply :)
@@Devistry many TH-camrs makes nextjs course using server actions and route components but they don't show how to use nextjs as the client framework. Server components makes it harder to use nextjs as a client framework. Let's say I have API made in Django and i want to use it with Nextjs, normally we used to store JWT tokens on the local storage and reuse it to authenticate the user on different routes also obtaining some information from local storage for example user position for authorization. But what's confusing i can't access local storage on server components, and many TH-camrs they don't give this soln instead they are focusing on server actions which is ugly . Please solve this brother i will be thankful 🙏
You don't have to use NextJS as a Client Framework in order to consume an API such as your Django API. You can also use async server components and fetch from there. The choice whether to use client or server components should not be determined by the way you want to fetch from an API. Instead you choose client or server component if you want to access browser features (such as LocalStorage) and do client side rendering, or if you want to do server side rendering. Both have pros and cons, and you pick the right one for each component. Both can fetch data from an API. Also: don't use LocalStorage to store JWT authentication tokens. Use HTTP Only Cookies instead. LocalStorage has no protection against XSS attacks.@@alkadoHs
@@Devistry okay get you! But how if i use react vite,react-router-dom, react-qury and other libraries like thustand. Is there any differences compared to nextjs? I mean performance differences
The nextJS does optimize many parts of your app so there might be a performance increase. But the main benefits are with SEO due to server rendering.@@alkadoHs
Hi there, I'm just here to offer some constructive feedback. This video starts in the middle of no where. I would suggest maybe that next time you give some context as to what you are doing and how you will be doing it, that would be much more helpful. Thanks
Huge thanks to you Man. Not all TH-cam channels are teaching what actually are REUSABLE components. Thanks Man
This is just awesome! in just one video you covered a lot of topics (twMerge,CVA,clsx). Thanks a lot for this video. I will watch this multiple times so that everything you showed gets ingrained. Thanks again.
You just reinvented Shadcn :) Great tutorial.
I just start learning React and Next Js and I was wondering how I could make a very reusable button component so that I couldn't re-style it if I needed a different button style.
And man THIS IS HUGE for me 😁
Thank you for the time you spent to share all of this to us
Yah bruh this is dope and literally super smart and the only way to go… also you’re super easy to listen to and I’m stoked to now officially be a subscriber… also why I’m I sitting in the couch writing this in my phone when I could be on the Mac Studio coding rn 😂!
I was looking for something like this too clean up my messy code. Thank you so much for this. Well explained. You are all amazing teacher 😁❤️
enjoyed watching and coding this one out. Really appreciated ♥
best explanation on the entire yt related to this topic
Real tutorial for professionals
Love the simplicity
This is very cool, something i was looking for.
Thanks man
it's like making your shadcn library, thanks 🙏
Super helpful video! thanks a ton man!!
Thank you for the explanation. It was clean and neat.❤
Creating Re-Usable Tailwind Components, so clearly explained. Thank you very much.
{2024-05-27} - Subscribed!
great vid thanks, very easy to follow
Loved the explanation! Thanks ❤
And I would like to add on that in tailwind overriding don't happen so that red color to the background which you are able to see now after putting the props after the className may or maynot show up the same color when after to re run your project
This is unreal thank you so much
How would I go about using an MUI button as the base for the component?
This is really well explained and extremely practical!
I wonder if it's possible to do something similar applied to different jsx tags of the children. Setting aside variants, if I wanted to type both and a as children elements of a Card component in App.tsx, how would I be able to style both of those tags in a component and apply it to the children? It doesn't seem straightforward since I'm actually creating new and in App.tsx.
I suppose I could create an h1 and p prop in my component with the styles applied, and destructure that prop in my page, but that doesn't seem like a very elegant solution since I'm writing an entire paragraph for an object property. If anyone has a better idea I'd love to hear it.
Can you achieve this without using typescript?
Great video thank you very much, just one question. im trying to implement this approach with nextJS (following your course) i did all the layouts and pages in folder structures as you said, but i am running a problem when trying to pass a function through the onClick prop. i think next is limiting it but i am not sure, how do i make things click? thanks :D
hello, are you marking your buttons with "use client" directive? In Next.js components run on server by default, to make a component run on client you have to add
"use client"
at the start of the component file.
hi @@bloodylupin,
actually i did try it out but it didnt work, it felt like it did nothing really, like next.js straight up ignored it.
thanks for the reply :)
@@ronamar20 hi can you send me a git repo where I can see the code? you can paste it here
nice!
thx
KING
Bootun
Can you please make some lectures on NextJS your NextJS video was super helpful.
what specifics about nextjs would you want?
@@Devistry many TH-camrs makes nextjs course using server actions and route components but they don't show how to use nextjs as the client framework.
Server components makes it harder to use nextjs as a client framework.
Let's say I have API made in Django and i want to use it with Nextjs, normally we used to store JWT tokens on the local storage and reuse it to authenticate the user on different routes also obtaining some information from local storage for example user position for authorization. But what's confusing i can't access local storage on server components, and many TH-camrs they don't give this soln instead they are focusing on server actions which is ugly .
Please solve this brother i will be thankful 🙏
You don't have to use NextJS as a Client Framework in order to consume an API such as your Django API. You can also use async server components and fetch from there. The choice whether to use client or server components should not be determined by the way you want to fetch from an API. Instead you choose client or server component if you want to access browser features (such as LocalStorage) and do client side rendering, or if you want to do server side rendering. Both have pros and cons, and you pick the right one for each component. Both can fetch data from an API. Also: don't use LocalStorage to store JWT authentication tokens. Use HTTP Only Cookies instead. LocalStorage has no protection against XSS attacks.@@alkadoHs
@@Devistry okay get you! But how if i use react vite,react-router-dom, react-qury and other libraries like thustand. Is there any differences compared to nextjs?
I mean performance differences
The nextJS does optimize many parts of your app so there might be a performance increase. But the main benefits are with SEO due to server rendering.@@alkadoHs
what a tutorial!
thanks man
@7:46, cat!!!
Good man 👍
Hi there, I'm just here to offer some constructive feedback. This video starts in the middle of no where. I would suggest maybe that next time you give some context as to what you are doing and how you will be doing it, that would be much more helpful. Thanks
Example from shadcn lib