Creating High-Quality React Components: Best Practices for Reusability

[@Luxcium]

What I love the most about Josh is that he is smart and he assumes that we are smart… At the same time he is learning and he assumes that we are learning too… from that we have his iconic balanced approach where he is never assuming that we know everything and he is never going to treat us like if we know nothing at all… he is outlining the elements that we need to be aware of if we are new to the topic and then he is introducing the core of the topic… I love that approach it’s perfect for me I love that style of teaching we have the felling that we are on the same level and growing up together… This is why I always repeat myself and say that Josh is such a good communicator 😊😊😊😊

[@Hellbending]

You e managed to summarise exactly what I couldn’t quite put my finger on haha. His ability to show he’s still human (make mistakes/learn etc) whilst being aware of the core fundementals on a topic. Thanks for the comment, helped further my own understanding and give some words to this style of teaching for me.

[@undefined5132]

Minimum requirement for programmer: should be able to dig deep.

[@semx8372]

Good! Instead of ButtonHTMLAtrrs you can also use ComponentProps (as well as 'div', 'input' etc) to make code look cleaner :)

[@ejikemekingson6336]

Thanks so much for this

[@technologymad9253]

copied (agreed)👌

[@bogrisss]

Brilliant content! I am watching you for a few weeks now. One on the few channels in dev that actually worth watching! ❤

[@codewithguillaume]

That was something that really fired me up months ago ❤🎉

[@joshtriedcoding]

Really handy to reuse components once you figure out how and take the time to make them reusable

[@AlexSilva-ye2lp]

I did not understood why to use this approach when we can use the globals.css to create default styles and variant styles too.

[@zachomis]

Bro, thank you. Very simple yet detailed at the same time. You covered so many important concepts. This might not work well for a beginner, but as someone who's been on the TS journey, it's perfect.

[@toheebajayi1454]

The name should be changed from "Josh tried coding" to "Josh is coding". Love what you're doing man, thanks.

[@zacharyphilipp4871]

what is the typescript snippet you used to make that btn component so quick?

[@farhaankhan3294]

What's the name of that vscode extension which you're using by typing fc for typescript react functional component?

[@CanRau]

What do you mean?

[@duynd243]

React Snippet extension will help you do that

[@affanthebest]

What is the name of extension using which you initiated React function component "fc"

[@janupasilva]

Really impressed with the content man, really like this kind of content ♥

[@joshtriedcoding]

Cheers man

[@ahmedabdellatif2152]

i dont know why , but i was keep counting how many "Really really" was there xD xD thanks for this fruitful videos!

[@indiancuriousvoice8773]

Why to use that tailwind classes inside cva when you can directly use inside button Or simply you can create some global css classes and use that classname

[@bestvocabulary8362]

Ya same question

[@abhiramsatpute]

Are there any performance improvements that back up this approach? Or is it just for Developer Experience? Since it may reduce Code Redundancy, we are also installing extra libraries in exchange of it

[@botelhoh4535]

I like to use only the lib called classnames. I don't see the necessity of class-variancy-authority.

[@AlexSilva-ye2lp]

@@botelhoh4535 me too, I think its much easier to just create the default styles at the globals.css file and then create the variant classes their.

[@PanosPitsi]

@@AlexSilva-ye2lpthis is a terrible approach you can’t unit test css classes. Only make utility classes in css, for example background-card or header-prominent. If you want to make an actual card turn it into a component.

[@forsh2966]

What a goat! tysm, i really need this for future planning when i work on react again

[@muchis]

Awesome! Just one question: when you create forwardRef you add both but doesn't ButtonProps already contain everything from HTMLButtomElement from the interface you created above it? Why is it necessary to pass HTMLButtonElements again there?

[@resh7064]

The HTMLButtonElement here is the return type of the component.

[@deanolium]

The forwardRef generic type parameter list (ie, the bit between the angle brackets ) takes in two values to replace two generics. The first is the type of the thing you're providing the ref to. The second is the props that the component takes. So in this case, HTMLButtonElement refers to the tag which the ref is referencing. If it was a div element instead, then it would be HTMLDivElement. Then the ButtonProps bit is just saying which props the element could take. There's some repetition, but it because you could not bother with sending props to the tag in case you want to restrict what the consumer of your component can do. Lots of flexibility even though in most cases it'll be bad practice to not just pass the props down.

[@jamesdenmark1396]

Perfect video, perfect speed, i love it! I usally speed up all videos x2 just to get to the point, I like the libs he is using, I didn't know about them before, and I usually have variants and size in many components, im going to use these lib in my project. LIKE AND SUBSCRIBED!

[@dimasadnan4873]

Great tutorial! Just one question. Do the tailwind classes we write in those cva things affected by prettier with tailwind's extension?

[@joshtriedcoding]

Not sure, good question. Haven’t tried that out yet

[@quinnsalas6403]

Insanely valuable - thank you for taking the time!

[@codebymoonlight]

This is great content Bro. I enjoyed every bit of it

[@바리오]

did you define typescript react code snippet like "fc" by yourself? or are you using extension?

[@techworld3255]

The extension is called ES7+ React/Redux/React-Native snippets

[@TouseefKhan-iy9px]

Amazing! Please create more similar typescript videos.

[@CoryTheSimmons]

Amazing pattern. Thank you for sharing it with us!

[@kdev_007]

can you please share the extension you made the basic component only typing 'fc'?

[@paramsstudio2902]

Clean and Straight Forward and Thanks for also mentioning the keyboard shortcut i always have defficulty to find the vs code keyboard shortcut because I thinks its a time waste to learn keyboard shortcut i learn in process not explecitely

[@RutvikrajChampavat]

Does anyone know which react snippet extension Josh is using. He created a typescript react component only using "rc" snippet. I am already using ES7+ React/Redux/React-Native snippets but I don't it provides this snippet.

[@sebastian-nunez]

Nice! Now the shadcn ui components make sense!

[@joewulf7378]

Display -> Spaces: 4 Editor -> Spaces: 2

[@luongtuananh3661]

could you explain how to build the styled function of MUI? I see it has some features like inheritance style's-component and namespace classes

[@nickwoodward819]

Hey Josh, great video, thanks! Just wondering how we can make a disabled variant?

[@felipek.deboni8157]

Disabled is not a variant, it's an attribute. Just style it using the attribute pretty much like .myClass[disabled] in CSS. You can either define it for all of them, individually or both. Tailwind uses "disabled:" prefix for it :)

[@jo.repossi]

Bravo! Can you make the same Idea but with an input and react hook form?

[@iftyislam6761]

for example if I have a component that has a wrapper and button then how can I utilize cva to use conditional classes in both?

[@billyfigueroa1617]

Interesting tooling. Is there a reason you did not use ComponentProps instead of the interface route? I have found through research that we should default to using types as opposed to interfaces. Also I believe using FC is also no longer best practice but I could be tripping Great video though. Don't think I am criticizing just because I asked some questions

[@DioArsya]

nice! Anyway, CVA re-exported `clsx` package they called it cx, so it's unnecessary to install `classnames`

[@shadensnow]

CVA does not surface the types such as 'ClassValue[]' though

[@mp6086]

Great video! What about dark mode? Is there a way to create dark mode modifiers for each variant and add darkMode prop to the component, or is it necessary to create independent dark mode variants?

[@dontignore5567]

Question about component FILE NAMES. Which compoennt file name should be PascalCase and which should be just regular lowercase ?

[@sergey_gabrielyan1001]

Hello👋. In my project I have primary and secondary buttons with global .btn class which I use on a and button tags, but I want to use Button component, because lots of project examples use that option. If not difficult, can you give examples why to use Button component, what are the benefits?

[@shujin9027]

Just curious, do u use VSC in real work projects with all these manual lib imports, or u doing it for us?

[@MisouSup]

Why is there no intellisense when you're typing tailwind class names? Is there any easy way to fix this?

[@valentinbenitobousquet6166]

Incredible work and clarity. Keep going! 🫡

[@oddfeeling7956]

All thats left now is auto complete for the ButtonVariant object and this would be perfect.

[@SMILESHOW1337]

how can i pass not only input but also label to Reac.ComponentProps??

[@michaelmannucci8585]

What I don’t understand is… this button wouldn’t only be a … but what if you wanted to have the button component as a or

[@kc-bytes743]

no , he giving us option to create reusable button

[@AdsonCicilioti]

Nice man... Make an video about ui components library and how build and re-use on an application. Thanks!

[@joshtriedcoding]

Cheers dude. I think a key part of a UI lib is to be very reusable by default. Personally I think shadcn has done a great job at this with his library

[@tanvirhossain9781]

Hey Josh, Its amezing to have your videos, i just want to know how do you create tsx file with just fc snipes? Please let me know

[@rifkysatyana2415]

Awesome stuff, I really wanna make a project with React + TypeScript. Have only made with Javascript.

[@ejikemekingson6336]

Thanks so much Josh

[@kc-bytes743]

Material UI doing for us this thing in advance , why we struggle too much ,MUI give us option of Theme in which we can do custom theme , Create reusable design

[@Dadaadad268]

Same thoughts

[@occo5877]

Would be great to make a video about your navigation in vscode, looks interesting

[@JohnDoe-gf1kh]

Great Content Josh! as always. I have a question about the video. Please could you tell me the reason that you put 'clsx' in the cn function. I think it doesn't matter if we don't have that. 🙄

[@joshtriedcoding]

True, I think it's not needed anymore. As far as I know, tailwind-merge uses clsx under the hood anyways

[@ThanHtutZaw3]

How do you add children without passing props in button ?

[@DanteMishima]

How is styling not the point sir? How?

[@greendsnow]

Svelte Skeleton UI has already solved this issue...

[@xdriftxmyusik]

great video man \m/

[@ananas32069]

Amazing content

[@donalnoye4946]

emmm, it's a button from shadcn/ui

[@bestvocabulary8362]

Exactly 😂 I just searched from shadcn component that what is cva and got this vdo

[@WirelessGus]

You offer Contractor work 💼?

[@ksidharth1994]

Why not write plain old CSS?

[@motivation2code]

please, create video about NextJS roadmap. Thank you.

[@cod-the-creator]

The concept of defining styles inside of your Button component then using those in other random non-Button components is pretty absurd to me.

[@georgenonis5967]

instead of forwarding ref why don't you give it just another name and pass it normally? instead of ref - btnRef

[@myrachoantonio8832]

this amazing thank you

[@michaelpacheco7421]

You could have used namespaced components too

[@bestvocabulary8362]

Didn't understand use of forward ref

[@danielgend7856]

josh bester mann 🎉

[@belkocik]

I would love to see a series where you a have project to build and showing how to write an app that would be easy to scale and have a lot of reusable components :D

[@joshtriedcoding]

Any certain project you’d like to see?

[@belkocik]

@@joshtriedcodingany type of e-commerce website 😌

[@homiecoder]

@@joshtriedcoding Thx for another banger! I agree with @bubuq3, my 2 cents maybe a chat app or ecommerce app?

[@syamsarosa5916]

@@joshtriedcoding maybe create a CMS like Wordpress, but using NextJS? with plugin, theme, WP hooks system, etc.

[@kc-bytes743]

@@joshtriedcoding E commence project that merge multiple store into one UI

[@OscarD3v]

Muy bueno, gracias

[@Spkntei]

Nice !

[@simonkling5623]

ctrl + spacebar !!

[@thip1754]

shadcn is built upon this haha

[@SanderCokart]

Clsx is kinda useless now tailwind merge and tailwind join exists. Import {twMerge, twJoin} from 'tailwind-merge';

[@fernandovillalba3346]

nice!

[@i-am-the-slime]

Wieso nicht deutsch?

[@umitdemirci7394]

shadcn

[@yaxahir4674]

wha

[@lasindunuwanga5292]

too much abstraction will eventually kill you

[@JEsterCW]

xD

[@tangle5069]

common man why are you afraid of the truth , copying open source code doesn't mean you have done it yourself, marking my comments as spam won't work

[@joshtriedcoding]

Im not marking any comments as anything. It's not a secret that I learn from open-source code too. I share what I learn on this channel, and always credit the creator if I do so. If you had read the readme, you'd know that, even though shadcn specifically states no attribution is required whatsoever

[@tangle5069]

@@joshtriedcoding sorry josh for my hard talk, but it would have been nice , if you have mentioned about it , it not about atrribution , but mentioning shadn to that people, so that they could benefit more from his complete work. Thanks.

[@joshtriedcoding]

@@tangle5069 I made a whole video about his work because I was so impressed with it: kzbin.info/www/bejne/epaveXqibphpfNE

[@tangle5069]

@@joshtriedcoding Aplogies from my side, i hadn't watched that video, anyways keep doing the good stuff.

[@deepaksingh-qd7xm]

nextjs is bloddy shit its too much complicated for a simple button

[@enversecilmis7627]

Just write an object literal and use it as a map smh.

[@DesiMuscles]

bro plz go slow

[@ashron4472]

This is really not that useful. No offense, but thx for the info

[@joshtriedcoding]

No offence taken, what would make this more useful in your opinion?

[@homiecoder]

@@joshtriedcoding Boss response!

[@eminvesting]

@@joshtriedcoding you jump too much and too fast, it's a good pace for intermediate developers but not good for beginners. What you explain is aimed at beginners, an intermediate dev knows this stuff. So since you're viewers are most likely going to be beginners, you need to adapt your pace to them. Can't just jump around setting types they never even heard of, importing packages without thoroughly explaining them, using typescript code in a "create Reusable React components" titled video etc. Your average viewer doesn't even know what a ref is, you just threw it in their face. This kind of videos are better suited for a series rather than a one time explainer. In a series you go step by step and get them to your pace (+ more content, more watchtime etc which benefits you as well. You can make people binge a series, that does wonders for the algo) Just be smarter :) if you really spend a couple minutes thinking about it or if you just rewatched the video before uploading it you would probably have came to the same conclusions. Good luck buddy, looking forward to see your future content as you get used to YT

[@joshtriedcoding]

@@eminvesting Thanks very much for the detailed critique! That was possibly the most valuable feedback I've gotten.

[@PedroFernandez-iv2uv]

@@eminvesting agree with your comment.

[@VictorMartins239]

inline css 🤮

[@thelayoutguy]

[@VladimirMiroshnichenko64]

you can't reuse this "reusable" component on the projects which are not using tailwind

[@albatros-av]

why wouldn't you just use tailwind in everything? i mean if it's part of your stack, you'd use it wherever you can

[@Misica11000]

You need to talk slowly,and some more explanation about every thing you code would be nice...

[@joshtriedcoding]

appreciate your feedback

[@hashira_d]

u can slow down the vid, mate

[@Misica11000]

@@hashira_d Its about explanation to...

[@MJ-vx5cz]

Man i just love u🫶🏼