5 Pro-Level React Do's & Don'ts
HTML-код
- Опубликовано: 2 авг 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 RUclips 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 
Наука
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!
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.
You are first person to have any real arguments against using class components. I have been seeking then for a long time.
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)
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
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 ❤.
This was gold! I'd love to see more things like this on the channel! Thanks to both of you!
Collaboration of the year, thank you Brad and Jack 🙏
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.
This is super helpful.Traversy Media thank you for bringing Jack here.He is awesome as usual.
So cool to see Jack here!
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.
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
Excellently handled all the matters.
Brilliant Editing.
Super clear video looks very high resolution.
Jack is the best and an amazing person in real life. I do love your channel as well.
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. 👌👍
Great vid, nice find! The concepts were illustrated amazingly, and were flowing in an understandable way
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
Jack good content as always. Been a subscriber for sometime, and it's good to see you on Brad's channel.
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
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.
Woah! Great to see Mr. Herrington here on Traversy Media! The "crew" is getting more and more awesome!
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
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!
This is really amazing, I’ve been postponing for a while and finally watched. I’m excited I did. Thanks Brad, thanks Jack!
Ohh, jack Its nice seeing you here
This is a collab that I didn't see coming at all :O
This video was very helpful, Thank you Traversy for bringing us this amazing video.
Great video, love Jack's content. Just want to point out that the `?` mark implies that the field could be `undefined`, not `null`.
Good content! Props to ya guys as always
One correction tho at 10:06. The questionmark like this in typescript means that the key can be missing so it's value is possibly undefined. If you also need to include null in the range of values, you'd want to use what's called enum in typescript like this: string | null
So an example would be
type TMyType = {
myKey: string
myAnotherKey?: string | null
}
const myVal = ({ myKey, myAnotherKey }: TMyType) => {} // accessing myAnotherKey would give you either undefined, or string, or null
I like what you did with "Props"
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
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
Thank You for sharing your time with us to give us very necessary information.
Amazing clear explanations at a very pleasant pace
thank you, Jack. It is really simple explanation of the mentioned topics.
Class as always Brad. Many thanks
I just started React a few months ago, thank you for the tips..
Jack this information was awesome dude. It needs to understand every react developer mostly for beginners.
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.
On point with the pronunciation of Zustand 💪 and thanks for the vid Brad & Jack 😀
Colab of the MVPs of Programmer RUclips
Starting out with react. Very helpful and deep. Keeps someone like me on a good path or road map. 🙏
thanks Jack and Brad! You're great teachers! I leant a lot from the content!
Very good explanation, great value for an entry level react devs
A M A Z I N G ! Thanks💙💙
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.
Great content. Thank you Jack and Brad😍❤❤❤
Great video as always!
Stoked to see 2 of my favorite people overlapping! 😎👍
I'm a long time React developer and i totally agree all the thought discussed in the video.... 👌
outstanding knowledge, great presentation, perfect video and audio
i can't wait to see it.
🤩
Excellent class
📒I learned more with this video than in hundreds 💯
Awesome team up!
I love your videos.
Always big help to improve my development! Thanks a lot!
Some great tips
Thanks for the video, even though lots of the stuff you talk already explained even in older React docs (there's a beta one iirc). But main culprit I believe is, people rather than reading, try to use their knowledge from other libraries and frameworks, which make them misjudge how React works. Unlike many other, React has no magic tricks (except jsx), it is plain javascript and some clever stuff like hooks. So, if one knows any programming language, not just javascript and knows basics of React (which can be read from docs), it is pretty trivial task to understand what's going on. I'd say this is the gem of the React, it being a library this way. Anyway, again, thanks for your efforts. I've seen some people doing some of those mistakes even in production, which I think is unbelivable; so having videos like this really helps in that matter (atleast that's what I hope).
This was a very nice collection of tips. Thanks.
thanks alot Brad and jack
Great content , Great timing . Thanks alot
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 RUclips 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.🚀🚀😍😍
Such a good lesson! Thank you, Jack
AMAZING VIDEO!
One addition might be that react does not use triple equals but uses Object.is().
Awesome. I hope to see more of this. Thank you.
Thanx a lot. Your tutorials are amazing. I learn a lot from you.
Awesome! Simple and well explained, great work!!
I can listen to Jack say "ZUSTAND!" all day long
Great video, great teacher. Thank you 👍
Great overview. Much appreciated !!!
Always appreciate for such a great content :)
Great content , thanks for sharing
That was fantastic, thank you so much for those golden tips.
These are actually really good pieces of advice. Thanks.
You are always amazing and super helpful 🙌🏽
Very Helpful video. Thanks man!!!
Awesome tips. Thanks
Thank-you so much Jack for this knowledge.
Great explanation , Thank you for sharing 😊
This guy is just fantastic
Very very useful tips! Thanks!
Great Explanation 🤩
Great video!
This a really helpful video! Thank you so much for the great content!
fantastic video!
Exactly what I needed. Thank you!
Loved it !!!! This guy is super duper amazing !
I am new on React but this is to die for
Thank you Jack for the great React content
Thanks it's good to hear am on the right part.
Learned a lot! Thank you!
Such a nice video! Thanks for this!
I wanna Thank yall for this amazing content
Very useful, thanks