5 Pro-Level React Do's & Don'ts
VloĆŸit
- Äas pĆidĂĄn 1. 06. 2024
- In this video, Jack will talk about some do's and don'ts when it comes to writing code with the React JavaScript framework.
đœïž Jack's CZcams Channel:
/ jackherrington
đ Follow Traversy Media On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
00:00 Introduction
00:30 Do use functional components
02:22 Donât think of function components as templates
07:08 Do use TypeScript
12:02 Donât worry about re-renders (too much)
14:35 Do learn to love dependency arrays
18:36 Donât ignore useCallback or useMemo
22:25 Do learn to make custom hooks
23:23 Donât use Redux just because you think you have to
26:00 Do use a query library
27:50 Donât make your own UI library
29:29 Outroduction - VÄda a technologie
I want to thank Jack for letting me post this amazing in-depth video to my channel.
I want to thank YOU for having me on!.
I want to thank BOTH of you for sharing your knowledge
@@jherr currently I am watching No BS TS.đ đ đ đ đ đ . Thank you both of you.
I Love jack!
@@jherr thanks jack I subscribed in your channel you are very good teacher thanks brad also for hosting
Thanks so much Jack and Brad for your amazing videos and the meaningful work you do. Very grateful for how much I've learned with you!
You are first person to have any real arguments against using class components. I have been seeking then for a long time.
Zustand is an amazing library, I worked on a react project which used React Query in combination with Zustand and let me tell you they worked together amazing, I am very happy that Zustand is gaining the popularity it deserves.
Love both of you guys, helped me a TON, maybe even changed my future. Don't stop doing the awesome work!
Probably the most talented tutor on youtube for FE devs! Fantastic video Jack!
Love love LOVE Jack's content. Definitely great for stuff "beyond the basic" - Thanks Brad for letting him guest!
Thank you both for being part of my growth in web development.
Extremely excellent summary of the primary things to pay attention to when working with React! Really well presented and easy to follow. Thanks Jack! Subscribed! đ
Golden words! Honest and to the point content by you Jack đŻ. Thank you so much for everything you do for us Brad â€đŻ
Currently building a small project to learn react (and apollo) so I'm very thankful for such guidelines, thank you both
(and I swear I will learn typescript more and add it to my project... soon)
Collaboration of the year, thank you Brad and Jack đ
This is super helpful.Traversy Media thank you for bringing Jack here.He is awesome as usual.
Loved the video. The presentation was great. Thanks Jack. It was super easy to understand. Also, Thanks to Brad for bringing this video to us.
Excellently handled all the matters.
Brilliant Editing.
Super clear video looks very high resolution.
This was gold! I'd love to see more things like this on the channel! Thanks to both of you!
Great vid, nice find! The concepts were illustrated amazingly, and were flowing in an understandable way
This is really amazing, Iâve been postponing for a while and finally watched. Iâm excited I did. Thanks Brad, thanks Jack!
I have been working on React for about an year or soo professionally. And I have been following most these recommend do's and don'ts. đđ
Surprised me when I click on this and someone else started talking to me. Thank you, this was actually really cool to watch. I've been working with react for not that long and Jack is a great teacher
Jack good content as always. Been a subscriber for sometime, and it's good to see you on Brad's channel.
Amazing clear explanations at a very pleasant pace
So cool to see Jack here!
This video was very helpful, Thank you Traversy for bringing us this amazing video.
Great content. Thank you Jack and Bradđâ€â€â€
thank you, Jack. It is really simple explanation of the mentioned topics.
Thank You for sharing your time with us to give us very necessary information.
outstanding knowledge, great presentation, perfect video and audio
Jack is the best and an amazing person in real life. I do love your channel as well.
I didn't have idea you are on Brad's channel until you thanked Brad in the end.
I picked up this video from notification just by reading title.
Thank you both of you.
The first time I learned ReactJS was from Bob Ziroll. Bob's a clear guy, you can understand crystal clear from him. Unfortunately I couldn't find a ReactJS course from him on Udemy. This video is a blessing from Brad, thanks Brad â€.
Class as always Brad. Many thanks
This was a very nice collection of tips. Thanks.
I just got started in React and transitioning from a regular html/css/js developer. Things in React are just mind blowing. And I came here to avoid all the rookie mistakes and pro tip advances. Thank you soo muchh
Great video as always!
Jack this information was awesome dude. It needs to understand every react developer mostly for beginners.
Very good explanation, great value for an entry level react devs
Woah! Great to see Mr. Herrington here on Traversy Media! The "crew" is getting more and more awesome!
Very Helpful video. Thanks man!!!
Awesome! Simple and well explained, great work!!
On point with the pronunciation of Zustand đȘ and thanks for the vid Brad & Jack đ
Colab of the MVPs of Programmer CZcams
This last tip was amazing. It clicked with what I have seen in many projects but it's not entirely on the engineering team.
Material UI, bootstrap, etc are really hard to tweak bc most of their CSS has the "! important" attribute.
But designers tend to want to leave their special mark on the layout "just because". If you are building software at the MVP stage I can't stress enough to use an UI library and follow along the design guidelines for that specific library.
When the app core is set, then you can spend the resources to build your own design system and ui library but doing both on a tight budget when you don't have a clear picture of the software architecture is pure madness.
Can't tell how many projects would have been spared from chaos by following this simple advice
thanks Jack and Brad! You're great teachers! I leant a lot from the content!
Such a good lesson! Thank you, Jack
Great explanation , Thank you for sharing đ
I am a novice, I just finished a 12 week coding bootcamp where MERN was our final project stack, this type of content is really useful for someone in my position because I went from having my skill development be 100% directed by an outside influence, to being 100% my responsibility, this will help me gain a little bit of that structure back and give me a set of skills to reach for next. I cant say I understood 100% everything, but I understood enough of each subject to know what the first steps should be. I still have to review the course material because its so fast paced that no one could possibly absorb it all, I would be surprised if anyone was even able to absorb like 2/3rds of the material. But now I can review the course material and learn some typescript basics at the same time and see if I can translate the lessons from javascript to typescript. I think I am gonna try to redo my final project in typescript and see if I can follow all these dos and don'ts while I'm at it, that sounds like a fun next step.
Cheers!
Thank-you so much Jack for this knowledge.
Awesome tips. Thanks
Great content , Great timing . Thanks alot
These are actually really good pieces of advice. Thanks.
Awesome. I hope to see more of this. Thank you.
Great content , thanks for sharing
Typescript ugly???!!! Typescript is awesome!!!! Thank Jack, great video and also thanks Brad for inviting Jack. PS: I think that making your own UI library/framwork is not that bad and a great learning experience BTW
Great overview. Much appreciated !!!
Starting out with react. Very helpful and deep. Keeps someone like me on a good path or road map. đ
Very very useful tips! Thanks!
Always appreciate for such a great content :)
This format is totally working if it can bring in heavyweights like Jack. His channel has pretty awesome advanced React, TS videos. Bring in Dave Gray next with a frontend, backend or fullstack tutorial đ đ
I'd definitely vouch for Dave Gray
Definitely, Dave is one of the best teachers out here
I just started React a few months ago, thank you for the tips..
Great video, great teacher. Thank you đ
Great video, love Jack's content. Just want to point out that the `?` mark implies that the field could be `undefined`, not `null`.
Learned a lot! Thank you!
You are always amazing and super helpful đđœ
Exactly what I needed. Thank you!
That was fantastic, thank you so much for those golden tips.
Thanx a lot. Your tutorials are amazing. I learn a lot from you.
I love your videos.
Always big help to improve my development! Thanks a lot!
Awesome team up!
thanks alot Brad and jack
Great Explanation đ€©
Agree to all of them except the UI one, I have encountered multiple cases where libraries do not cover the design team requests. Mostly all of the time it is better to organize well your code
Excellent class
đI learned more with this video than in hundreds đŻ
Excellent video on React practice!
Loved it !!!! This guy is super duper amazing !
This a really helpful video! Thank you so much for the great content!
Thanks for these tips, very helpful
Such a nice video! Thanks for this!
Ohh, jack Its nice seeing you here
Hey this was incredibly useful and informative. I'm following.
thanks! very interesting and helpful!
Agree with everything here, except the last one in some scenarios. If you have a custom design which isn't already based on a library like MUI, it can be a real pain to customize the components to match your design. Great video!
My preferred approach for custom designs is taking advantage of "headless" libraries such as Headless UI, Radix, and React Aria.
Regarding the last point, he didn't say don't make your own designs, he said don't make your own library
You can even customize your designs with Styled-Components in combination with libraries like MUI.
Or just opt for tailwind
HeadlessUI and Tailwind is my favourite combo, I've just started using and it's so cool and really easy to build components.
i'm on the same boat as you, but i think that one specific "dont" is aimed to either new devs or devs that dont focus too much on front end. for those ppl, things like MUI helps a lot.
I'm a long time React developer and i totally agree all the thought discussed in the video.... đ
Nice one about dependency arrays!
Mashallah! This is a great video @Traversy Media I have been following you keenly for somewhile and I can adhere that this is my best CZcams Channel so far and it has thought me a lot a Software Developer. One day I am gonna develop a big website Inshallah. Big love from Kenya.đđđđ
AMAZING VIDEO!
One addition might be that react does not use triple equals but uses Object.is().
Thanks, this was very informative!
Stoked to see 2 of my favorite people overlapping! đđ
Loved the video. Only thing was that the usage of ? in typescript is to declare that the value will be undefined. If you want to declare a null you will have to actually set that type. Something like name: string | null
10:06 small correction - the question mark is called an optional parameter. It is equivalent to saying: put whatever type I define or undefined (e.g. someVar?: string === someVar: string | undefined). So when putting null under the address variable explicitly, typescript will complain
I am newbie, and this kind of error scares me to use typescript. I know I should learn how ânullâ and âundefinedâ are different, but what is the solution for this ?
@@tadakuniyasuda8214 better not to avoid using it. When you start writing a code with Typescript and get used to it, you won't probably want to come back.
I tried to maintain a relatively big project purely written in Javascript both on frontend and backend. Man, there were so many bugs that could easily be identified during compilation.
Generally, undefined means that something is missing. Simple example is when you want to access any variable from empty object. Null usually means that something is defined but its value is nothing. So my point here is you should not put undefined explicitly under variables as a value, prefer null instead. However, when defining types or interfaces, it really depends on your code what you expect it to do
@@internet4543 Thank you, I am going to learn typescript now.
Very interesting video. thanks for sharing...
Very useful, thanks
This is a collab that I didn't see coming at all :O
fantastic video!
Great video as always. :) I do think the last topic is very debatable. I've worked on many projects where building out a custom UI library/Design System made more sense. But that choice involves a lot of factors like the design itself, future plans for the app or the company and even who needs to work with it or maintain it.
i agree, it depends on the design the client wants, i worked in a project where we used Material UI but the design they wanted was so customized that we essentially had to fight with material ui components to look that way which defeated the purpose of using them in the first place.
@@rajatgupta2625 Yea I know that struggle. An existing UI library is great to work with, as long as you can mostly confirm to those existing components.
Thank you Jack for the great React content
I wanna Thank yall for this amazing content
Great video!
A M A Z I N G ! Thanksđđ
Golden advices!