We banned almost all margins from our styles and it is a blessing. It's (almost) always a bad Idea to add a margin to a component to "create spacing". When there needs to be space between components we always use flex containers with a gap defined between the items. We found that this is very consistent with how a designers thinks about the design and it makes components easily have different spacing in different contexts. The spacing between items should always be defined be the parent, not by the items themself.
This concept of ditching the margins from HTML I believe was first made popular by Max Stoiber in 2020 in the article "Margin considered harmful", a read which I recommend to anyone interested in the idea. There's also a video by Theo Browne, former Twitch developer, titled "The Horror of Margins in CSS" in which he ellaborates a bit more on the problems of margin, and Adam Argyle's (Chrome CSS Developer Advocate) prediction that the usage of margin will decline as the gap property becomes more widely adopted in all-flexbox-and-grid situations. Highly recommend these.
@@LuteroFeliz Good pointers, must read for people that need to implement reusable components. A margin is basically a side-effect that breaks composability and react is all about composability. We have yet to encounter a layout requirement that can't be implemented using just padding and flex/grid + gap. It becomes second nature fast and you will almost guaranteed not look back.
This is by far the best practical educational video I’ve ever watched. I’m a senior CS major, and if I had videos like this sooner, I’d have 20x the experience I need.
@@okkashaally2115 Not that great, i sent my resume to 5 or 6 companies and half of them rejected it, and half of them didn't even read. And the scary part is my university is going to start very soon. i don't know what to do...
wow. this is useful even if you have years in this. i have 8 years developing, I'm considered senior in my job, and this tips are very valuable, accurate and helpful. thanks
20:31 about making the main tag and the div surrounding everything, a component: You could make a component, that takes childelements and displays them, so that you can still have the internal stuff in the App.tsx file.
As a Jr dev that came from a boot camp, I really appreciate this advice. The library folder with your utils, types, and hooks is a new concept to me. Learning about the Children pattern to avoid prop drilling is an idea I never knew about. I saw {children} being used in applications but never understood it before. Still got half way to go in the video, but I really appreciate your advice so far! The application I have been building for the past few months will benefit greatly from these ideas!
Simply just looking at the source code of well-respected open source projects (e.g. the Node.js official website) helped me to learn immensely. A lot of times when I implement a new feature I do searches of terms or packages on GitHub to see how other people do it (e.g. I did this for the web-vitals library recently - how do others implement that package?). Then you can take the parts you like from how others do it and fit it to your own needs.
Typescript can be a pain sometimes, when you are trying to get something out the way, you want to scream leave me alone; but it improves yourself as a developer as you add an extra layer to how you think when you are creating something. Like yourself, I too get frustrated when I see tutorials without it.
@@jasonwhittaker3940 When you're working in a team on a bigger project, I'd say TS is essential. I was just helping out on a project that was written only in JS and it was hell, debugging was a true ordeal and without TS you don't even have fully functioning intellisense, so it's good to use it imho.
On components which is topic number 3, for the main tag which is the container of the different components (Header, TodoList and Sidebar) you can also create a new component for it and just put it on the same file, just pass the 3 sub components as children so it is still visible, and cleaner to read.
Best content!, I have learnt a lot! Thanks😀 just one question if a parent component re-renders, the child component will also re-render. How can a children pattern prevent this behavior? Would you please explain? That would be a great help!
Some nice refreshers here, even for a seasoned developer. Oftentimes one might forget some patterns if one stays away from React for enough time. And the section on performance optimization is also valuable. Hopefully React will eventually streamline most of these manual memoization hooks and dependency arrays. They've always been a pain for everyone.
Another option for #13 is just keeping track of which item is selected with a boolean inside the primary state, such as adding active: true to the selected object, especially if you are keeping track of multiple selected items, little more complex but a good solution compared to using an array of Id's. Great video, very informative.
Great video, but in 1:24:00 i am confused about the todos in the useEffect depndency array todos is an array meaning its an object type not a primative type and my understanding is useEffect can know if primative value chnaged but cannot know if a object value chnaged so it will always run on each render in this case sense the todos array is an object type not a primative type please correct me if i am wrong and keep up the great work ❤
What if instead of creating a button component you just create a style in css? I think it makes more sense? The buttons do have the same design but their usage differ, so I would assume it’s the case of creating a css class to button…?
Yes, it's mainly css which handle designs but you have different variants of buttons and conditionally apply classes on button. We have variants such as style, size, icons etc
nextJs + Rtk = serverside or client side video please if we dont use rtk how to write code for CRUD in Nextjs for same app if we use rtk how to write code for CRUD in Nextjs for same app what is diffrence how to deal mega app in Nextjs
If you make everything its own components then when you want to test them for example using React Testing Library then there are too many components to test ? Wouldnt it be more complicated to test ?
Isn't it better to have a folder of them? For example, when I do nextjs projects, I create a folder called actions in that directory with all actions related to that route, is that good a practice?
Месяц назад
No github links in description? That's like the most important thing you can do.
At 21:00 i see that we are using inline styles but doesn't it them makes it difficult to fix something if a component is deeply nested and on the devtools we just see styles defined but don't know in code where the component is. Is there a way better way to manage tailwind??
What’s wrong with using a global CSS file for things like h1? Then you can just add className without all the machinery. Why do Tailwind users seem to avoid all css? What’s the science or philosophy with these practices? Thanks!
We banned almost all margins from our styles and it is a blessing. It's (almost) always a bad Idea to add a margin to a component to "create spacing". When there needs to be space between components we always use flex containers with a gap defined between the items. We found that this is very consistent with how a designers thinks about the design and it makes components easily have different spacing in different contexts. The spacing between items should always be defined be the parent, not by the items themself.
That's a very, very interesting argument. I'll have to dig deeper into that because I have run into issues due to margins.
I do this and it's so effective.
This concept of ditching the margins from HTML I believe was first made popular by Max Stoiber in 2020 in the article "Margin considered harmful", a read which I recommend to anyone interested in the idea. There's also a video by Theo Browne, former Twitch developer, titled "The Horror of Margins in CSS" in which he ellaborates a bit more on the problems of margin, and Adam Argyle's (Chrome CSS Developer Advocate) prediction that the usage of margin will decline as the gap property becomes more widely adopted in all-flexbox-and-grid situations. Highly recommend these.
Agreed! Spacing is a parental task 😁
@@LuteroFeliz Good pointers, must read for people that need to implement reusable components. A margin is basically a side-effect that breaks composability and react is all about composability. We have yet to encounter a layout requirement that can't be implemented using just padding and flex/grid + gap. It becomes second nature fast and you will almost guaranteed not look back.
This is by far the best practical educational video I’ve ever watched. I’m a senior CS major, and if I had videos like this sooner, I’d have 20x the experience I need.
Very nice video, ByteGrad. What about making a video on how you test your react & nextjs applications ?
Good idea
@@ByteGrad yes please ♥
Yes
Yeeeees!!!
yes Agree
RUclips lacks these kinds of videos! Because they're so awesome! 😃 Good job ByteGrad!
I'm going to get a job as a front end developer and I wanted this video exactly right now, thanks man!
How did it go buddy?
tech market sucks atm m8, good luck tho
@@okkashaally2115 Not that great, i sent my resume to 5 or 6 companies and half of them rejected it, and half of them didn't even read. And the scary part is my university is going to start very soon. i don't know what to do...
wow. this is useful even if you have years in this. i have 8 years developing, I'm considered senior in my job, and this tips are very valuable, accurate and helpful. thanks
This video was awesome. I didn’t even notice that it was over an hour I was so interested. Can’t wait to try and put these in practice.
20:31 about making the main tag and the div surrounding everything, a component: You could make a component, that takes childelements and displays them, so that you can still have the internal stuff in the App.tsx file.
True
As a Jr dev that came from a boot camp, I really appreciate this advice. The library folder with your utils, types, and hooks is a new concept to me. Learning about the Children pattern to avoid prop drilling is an idea I never knew about. I saw {children} being used in applications but never understood it before. Still got half way to go in the video, but I really appreciate your advice so far! The application I have been building for the past few months will benefit greatly from these ideas!
Good luck on your journey learning React!
Check out Feature-Sliced Design (Architectural methodology for frontend projects). Design patterns: compound components, render props.
Simply just looking at the source code of well-respected open source projects (e.g. the Node.js official website) helped me to learn immensely. A lot of times when I implement a new feature I do searches of terms or packages on GitHub to see how other people do it (e.g. I did this for the web-vitals library recently - how do others implement that package?). Then you can take the parts you like from how others do it and fit it to your own needs.
Loved it! Need more "best practices videos" about different stuff. Thanks!
Another one is using a progression of multiple useState-> single useState object -> useReducer to manage a component that grows in complexity.
Good stuff, even for more senior devs.
I can't imagine coding anything without TS. Still very surprised someone out there makes tutorials without it.
Typescript can be a pain sometimes, when you are trying to get something out the way, you want to scream leave me alone; but it improves yourself as a developer as you add an extra layer to how you think when you are creating something. Like yourself, I too get frustrated when I see tutorials without it.
@@jasonwhittaker3940 When you're working in a team on a bigger project, I'd say TS is essential. I was just helping out on a project that was written only in JS and it was hell, debugging was a true ordeal and without TS you don't even have fully functioning intellisense, so it's good to use it imho.
Would love to see a video on good coding patterns to use in React or Next and also coding principles, like SOLID and more
On components which is topic number 3, for the main tag which is the container of the different components (Header, TodoList and Sidebar) you can also create a new component for it and just put it on the same file, just pass the 3 sub components as children so it is still visible, and cleaner to read.
Best content!, I have learnt a lot! Thanks😀
just one question
if a parent component re-renders, the child component will also re-render. How can a children pattern prevent this behavior? Would you please explain? That would be a great help!
The level of this course is perfect. Simply explained but covers the detail needed. Do we have github repo available so we can look at the code?
There were some really useful advice in video 👍 out of all the front end frameworks I've had experience with, React is by far my favourite
hi, you can use import classnames from 'classnames'; its a function that allows to merge classnames just like your cn function
Great content. Learned a lot. Thanks for the video, cheers.
Some nice refreshers here, even for a seasoned developer. Oftentimes one might forget some patterns if one stays away from React for enough time. And the section on performance optimization is also valuable. Hopefully React will eventually streamline most of these manual memoization hooks and dependency arrays. They've always been a pain for everyone.
Amazing Guide to all newbies. Thank you so much.
you give a lot of food for thought
Thank you Wesley! Very much appreciated! 🙇
Amazing. I want more best practices like this.
This is real gold. Thanks for explaining this to us and showing every best practices with example. This is very helpful in may ways. ❤👍
Sir, You make always a great tutorial ! Awesome work
Thank you for this video!!!
It is very practical.
I like the way you explain things. More videooos
Thanks Byte Grad for your contents
Thanks for this.
great list
Great video, btw what VS Code theme is this?
0:05 we really need to do what ?
MASTER IT 😀
the kind of videos that are really useful!
Your voice sounds great ngl
please consider REACT UNIT TESTING also your future videos
if you have flex use gap, easy tip to add spacing between components. no need for extra coding or anything.
Thanks. Your explanations are clear and helpful.
Another option for #13 is just keeping track of which item is selected with a boolean inside the primary state, such as adding active: true to the selected object, especially if you are keeping track of multiple selected items, little more complex but a good solution compared to using an array of Id's. Great video, very informative.
1:35:43 by the way conditional display of StartScreen component better to move from view to separate variable in component
Great video, thank you!
One questions to the H1 class issue chapter 5:
I’ve always used template literals to add classname props like
Thank you so much
Really good content man!
Great content!
thank you, mate
Great video, thanks 🔥
Awesome video, loved it :)
Thanks
1:03:56 As we learned from you before, it would probably be better to use [todos.length], due to the value / reference difference, right?
nice to see how generic programming best practices translates to react because react components are just functions.
Nice, Thank a lot.
This video is a real gem! Thanks for all the tips! It will help a lot of people to use cleaner practices.
At 32:24 can't we use back ticks `${}` instead of seperate utility function ?
I had the same question, but I think it's not going to work to pass className props to tailwind className.
1:25:41 Not sure whether it is a good idea to use array (reference data type) as dependency in useEffect
My first thought was “why React 17? (Not 19)” 😊
Nice guide. I mean I know it is gonna be nice.
Ha, enjoy!
What theme you use
Love your content man
Great video,
but in 1:24:00 i am confused about the todos in the useEffect depndency array
todos is an array meaning its an object type not a primative type
and my understanding is useEffect can know if primative value chnaged but cannot know if a object value chnaged
so it will always run on each render in this case sense the todos array is an object type not a primative type
please correct me if i am wrong
and keep up the great work ❤
I have a questions. Is it possible that in the H1 component destructure className = ‘ ‘ like this and pass it into the other tsx file ? 33:20
What if instead of creating a button component you just create a style in css? I think it makes more sense? The buttons do have the same design but their usage differ, so I would assume it’s the case of creating a css class to button…?
Yes, it's mainly css which handle designs but you have different variants of buttons and conditionally apply classes on button. We have variants such as style, size, icons etc
worth watching
Enjoy!
nextJs + Rtk = serverside or client side video please
if we dont use rtk how to write code for CRUD in Nextjs for same app
if we use rtk how to write code for CRUD in Nextjs for same app
what is diffrence how to deal mega app in Nextjs
If you make everything its own components then when you want to test them for example using React Testing Library then there are too many components to test ? Wouldnt it be more complicated to test ?
At 55:41 did you mean to put the form event in the arguments and not todocontent?
Isn't it better to have a folder of them? For example, when I do nextjs projects, I create a folder called actions in that directory with all actions related to that route, is that good a practice?
No github links in description? That's like the most important thing you can do.
At 21:00 i see that we are using inline styles but doesn't it them makes it difficult to fix something if a component is deeply nested and on the devtools we just see styles defined but don't know in code where the component is. Is there a way better way to manage tailwind??
1:09:12 short recap
46:49 props drilling not so bad, because we still have readability, on other side we put everything as children which looks like awful…Am I wrong?
What’s wrong with using a global CSS file for things like h1? Then you can just add className without all the machinery. Why do Tailwind users seem to avoid all css? What’s the science or philosophy with these practices? Thanks!
Hi man! What are you using for AI autocomplete?
Hello Guys, at 7.55 we can see he auto import the variable "max free todos". Can someone tell me how we do that ? Tanks.
58:00
Cool 🔥
Is the classname needed to be so verbose or is best practice to leave it verbose instead of moving all the style to another file?
I love u broooo
Why do we still use , a submit button, and e.preventDefault() in web development? Why not ommit the and just use regular click event?
Why do you use typescript in a tutorial video without using its features?
A habit
1:18:18 Show me the code, man
😂
Use react query.
avoiding constants and hard-coded values are just basic programming principles, and not really much to do with react best practices.
3.000th like❤
DO REPEAT YOURSELF I appreciate that you repeat yourself explaining things 🤯
Semaphore is interesting but I'd rather keep my data private instead of sharing for free to a third party
No one needs your no customers data lol. So you could enjoy your SQL tables by yourself
best practice is to try not to use react
Like there’s a real alternative 🤡 Vue ecosystem is pathetic and tiny (unless yoy Chinese), Svelte is niche, HTMX is a joke
React the best
Smh
Nope
AI is sucks 🥵🥵🥵
Using React is a bad practice
??