Overall great tutorial with some valuable concepts. Just one thing: this pattern `` is quite dangerous. It can result in unexpected runtime errors when the prop name in SmallPersonListItem changes or this componentn later requires additional props. And while the first one can easily be fixed, the later one will basically be impossible to fix without changing the api of RegularList wich, as it will be most likely a very widely used component, can be quite dangerous as well. A much better pattern would be to use render props instead: ` } />` This way you can get proper TypeScript support for all the props of SmallPersonListItem (or at least proper IDE support when using JS). And the TypeScript support becomes even better when you use inferred generics in RegularList: ``` interface ListProps { items: Array; renderItem: (item: T) => ReactNode; } const RegularList = ({ items, renderItem }: ListProps) => { return (
This video is a gold mine. So clear and concise between the instruction, the logic behind the code, and even the variable names. Everything seems so constructed with thought in mind to make it as easy for the viewer to understand as possible. I very much appreciate this video, as I'm sure many others do. Thank you very much! Easily earned a new Sub!!
Thanks a lot for your valuable comment. Thanks for subscribing, Please support me to gain more subscribers and to share content to the useful people's who are indeed ☺
Thanks for your valuable comment. Please support me by subscribing and sharing my videos to others. Don’t forget to turn on notifications bell for more updates
Thanks a lot for your valuable comment. Please support me by subscribing, like and don’t forget to turn on notifications bell for more amazing content soon I’ll upload moree
Thanks a lot Han, unfortunately my laptop got formatted and I lost files but please don’t worry l I’ll try to figure it out and get the code hehe Please do support me By subscribing, sharing and turn on notifications bell 😊
even though its dark mode, you shouldn't watch any screens without background lights on. When thee is no bg light our iris is wide open and the directed light from screens damages our retina.
Mr. M, you are the reason why there are so many programmers without computer science degree, as well as, the reason why we can effectively compete with the college graduates! It's hard to overestimate the value of this series! Thank you very much!!! I stay tuned now.
Dude , your channel is the Gold , we sadly need to dig for among all those cliche tutorials emphasizing the same trendy material ! Anyways Massive Respect for you to teach these Design Patterns !
I was asked about design pattern in React and this was the only reason I was not qualified. now i understood, thank you, your video is very helpful to me.
I'm happy, it's helpful for you and the other developers like you, Please support me by subscribe, like and share to other developers like you and don't forget to turn on notifications bell
Lovely course, I just wanted to add that using the file type .jsx instead of .js is probably wise. I found this out when setting up React to work with Vite where I had to rename aaallll of my components to use jsx instead.
Thanks for the video. I see some reusable components here, but I don't see the pattern here tbh. Maybe it's worth to make a summary in the end... kinda... tend to use children components rather then pass components as props, if we talk about layouts. Also I'd like to hear when it's worth to create another kind of List component? like you did with Numbered list. We could add a prop, called `numbered` and tweak the regular List component to support it.
Great video but just a question I dont really understand how we can style the list item component in another component.If i want to style the h3 tag of the list item component from its parent component how will I exactly achieve it.
please I encourage viewer to vote this question because this is really a very good question. I would like to seek the attention of the Mr. M to this question or someone who has answer to this. Thank you
11:48 leftWeight={1} and rightWeight={3} doesn't give you one third as you said but a quarter basically it's 1/(1+3) = 1/4 and 3/(1+3) = 3/4 If you'd wanted one third you should have, instead, set: leftWeight={1} and rightWeight={2} -> left: 1/(1+2) = 1/3, right: 2/(1+2) = 2/3 If you want a half: leftWeight={1} and rightWeight={1} -> left: 1/(1+1) = 1/2, right: 1/(1+1) = 1/2 etc (:
Thanks man please support me Please support me by subscribing and sharing my videos to others. Don’t forget to turn on notifications bell for more updates
Great video, I have one question at the end of the layout pattern why are we keeping leftweight = 1 and rightweight = 1. Why are we assigning a number to these when we already do that in the splitscreen prop?
I'm pretty sure those are just default values: this way even if we omit passing those props from the parent component, they will still have a value of 1
love this, I am trying to follow along using typescript, and struggling a bit, please if you have a video of converting js components to typescript components that would help. Thanks
Great suggestion! I’ll do that in next video. Please do support me by sharing my videos to others and don’t forget to subscribe and turn on notifications bell
Hi! In the snippet above: Are the external curly brackets brackets for the react dynamic values? So these brakets aren't javascript object literal braces, are they? If they are just javascript object literal braces we just copy an object to another object with the same structure. (with the spread operator) Actually, this is a react question, not related to the design pattern. Thanks!
Hai yeah! Thanks for your question about the code snippet. You're absolutely right! The curly braces in JSX are used for dynamic values in React, but they're not limited to React - they're a JavaScript thing. And yes, the spread operator (`...`) is handy for copying object properties, a cool JavaScript trick! Feel free to hit me up if you have more questions. Happy coding! Please support me by subscribing and sharing my videos to others. Don’t forget to turn on notifications bell for more updates
Great content!! Just wondering if you have a rule of thumb or some kind of hint that tells you where to stop adding extra logic to components in order to make them more flexible. ie, You can easily add an extra boolean prop to regular list component that tells you if you want to display the index value and making the list "numeric" in the process. No need for an extra component to achieve that, since you barely changed the code.
Thank you for this video and for the entire series. As far as I'm aware of Styled-Components is a package which take care of styling in React. Maybe they use some type of design pattern, but you represent them as if they are themselves a design pattern, while no official documanet of react about design patterns (as far as I found) doesn't even mentioned styling as an example of one of the design pattern forms/types. I'm not sure I understand the purpose of this video, if you installed NPM to represent a design pattern while some of us working with Bootstraps, Material UI, or Tailwind. What is even the name of the design pattern that you are showing here? What am I missing here..? I'll be happy to understand.
Please go through the entire playlist and here’s some of the information. Design patterns are reusable solutions to commonly occurring problems in software design. React, being a popular JavaScript library for building user interfaces, has several design patterns that are commonly used to solve common problems. Here are some common design patterns in React: Render Props Pattern: This pattern involves passing a function as a prop to a component which can then be called to render content in the component. This allows for more flexibility in creating reusable components. Higher-Order Components Pattern: This pattern involves creating a function that takes a component and returns a new component with additional functionality. This can be useful for adding common functionality, such as data fetching or authentication, to multiple components. Container-Component Pattern: This pattern involves separating a component into two parts: a container component that manages state and data, and a presentational component that renders the UI. This can make the code more organized and easier to understand. Controlled Components Pattern: This pattern involves controlling the state of form inputs in a component by passing their values and onChange events as props. This can make it easier to manage the state of form data and make the component more reusable. Redux Pattern: This pattern involves using the Redux library to manage state across multiple components. This can make it easier to manage complex state and ensure consistency across the application. These are just a few examples of the design patterns used in React. There are many other patterns that can be used to solve different problems, and developers often combine multiple patterns to create more complex solutions. Please do support my channel
Awesome video! This gave me some inspiration for refactoring some of my old code. I do have a question regarding your layout pattern for lists. How does the pattern you showed differ , or why is it a better approach than say, creating a list component with an actual unordered list or ordered list that maps over the items themselves and nests them within the ul or ol provided by RegularList or NumberedList. My thinking was that a list item is not the list itself but a single child element of one. It could be that I’m confining my thinking of lists to actual list item elements within html list elements. I hope the question makes sense. This has been an excellent tutorial.
Yes you're right it's just making us easr to make one reusable component to loop through the items and make a list. It can be either ordered or unordered its depend on use case, for making as per that you just need to pass one more props like isOrdered if it's true then make it as ordered list or else unordered. I hope you got me. Thanks for the feedback. Please do support me by subscribing my channel and share my video to everyone who keen to learn and don't forget to turn on notifications bell for new videos
Hello Mr.M 😀, I love this course. you made me think out of the box. I have one small question. your code looks short and sweet. How ever if you develop a huge web applications containing 100's of components and things. The programmers how are viewing our code for the first time will feel difficult right? Because this will increase the complexity while viewing. if we need a good quality code our application should have lots of state less components right?. is it recommended for bigger and bigger applications?
Yes that's true, simple code is for better understanding and optimizing, for a new coder it'll take time to understand, for the experience coders then can love your code easily
I have tried following this code but I am stuck with the left and right that you have defined. did you install any library for that? I'm getting the error that it is undefined.
the styled components library is pretty cool but from a learning perspective I'd much prefer to see how to write these with vanilla react first and not have the dependency then if I want add a helper class I can but I will understand what is running underneath.
styled component is doing nothing here, if you understand the concept, it is easily reproducible with vanilla react as well. Styled components is just for styling and nothing else..
Thanks a lot bro. Thanks for the 500th like. Please do support me by subscribing my channel and share my videos other people’s who are looking for coding tutorials. I just started editing one more new tutorial heheh. Don’t forget to subscribe and turn on notifications bell 😉
Thank you for this video and for the entire series. As far as I'm aware of Styled-Components is a package which take care of styling in React. Maybe they use some type of design pattern, but you represent them as if they are themselves a design pattern, while no official documanet of react about design patterns (as far as I found) doesn't even mentioned styling as an example of one of the design pattern forms/types. I'm not sure I understand the purpose of this video, if you installed NPM to represent a design pattern while some of us working with Bootstraps, Material UI, or Tailwind. What is even the name of the design pattern that you are showing here? What am I missing here..? I'll be happy to understand.
Please go through the entire videos playlist. Design patterns are reusable solutions to commonly occurring problems in software design. React, being a popular JavaScript library for building user interfaces, has several design patterns that are commonly used to solve common problems. Here are some common design patterns in React: Render Props Pattern: This pattern involves passing a function as a prop to a component which can then be called to render content in the component. This allows for more flexibility in creating reusable components. Higher-Order Components Pattern: This pattern involves creating a function that takes a component and returns a new component with additional functionality. This can be useful for adding common functionality, such as data fetching or authentication, to multiple components. Container-Component Pattern: This pattern involves separating a component into two parts: a container component that manages state and data, and a presentational component that renders the UI. This can make the code more organized and easier to understand. Controlled Components Pattern: This pattern involves controlling the state of form inputs in a component by passing their values and onChange events as props. This can make it easier to manage the state of form data and make the component more reusable. Redux Pattern: This pattern involves using the Redux library to manage state across multiple components. This can make it easier to manage complex state and ensure consistency across the application. These are just a few examples of the design patterns used in React. There are many other patterns that can be used to solve different problems, and developers often combine multiple patterns to create more complex solutions.
Overall great tutorial with some valuable concepts.
Just one thing: this pattern
``
is quite dangerous. It can result in unexpected runtime errors when the prop name in SmallPersonListItem changes or this componentn later requires additional props. And while the first one can easily be fixed, the later one will basically be impossible to fix without changing the api of RegularList wich, as it will be most likely a very widely used component, can be quite dangerous as well.
A much better pattern would be to use render props instead:
` } />`
This way you can get proper TypeScript support for all the props of SmallPersonListItem (or at least proper IDE support when using JS). And the TypeScript support becomes even better when you use inferred generics in RegularList:
```
interface ListProps {
items: Array;
renderItem: (item: T) => ReactNode;
}
const RegularList = ({ items, renderItem }: ListProps) => {
return (
{items.map((item, index) => (
{renderItem(item)}
))}
);
};
```
I Agree with you bro, your version I very liked
I don’t think so it will throw the errors or dangerous because you just need to pass the props however you can pass it though
thanks, i was about to comment this, as i work for a fintech giant and we use this.
This video is a gold mine. So clear and concise between the instruction, the logic behind the code, and even the variable names. Everything seems so constructed with thought in mind to make it as easy for the viewer to understand as possible. I very much appreciate this video, as I'm sure many others do. Thank you very much! Easily earned a new Sub!!
Thanks a lot for your valuable comment.
Thanks for subscribing,
Please support me to gain more subscribers and to share content to the useful people's who are indeed ☺
Can't find github link in description can you provide?
Yeah sorry. I lost those files. I formatted my laptop and lost all those files. In my next video I’ll provide it
Layout design pattern for lists is neat! Thanks for making this course available.
Thanks for your valuable comment. Please support me by subscribing and sharing my videos to others. Don’t forget to turn on notifications bell for more updates
Amidst a mountain of react tutorials. this stands out as mount everest. Amazing Stuff.
Thanks a lot for your valuable comment. Please support me by subscribing, like and don’t forget to turn on notifications bell for more amazing content soon I’ll upload moree
Hi! I love you courses, where can I find the exercise files source code?
Thanks a lot Han, unfortunately my laptop got formatted and I lost files but please don’t worry l I’ll try to figure it out and get the code hehe
Please do support me
By subscribing, sharing and turn on notifications bell 😊
"Dark Theme" please, ... this is burning my retina. (many of us are watching this on laptop in darkness)
even though its dark mode, you shouldn't watch any screens without background lights on.
When thee is no bg light our iris is wide open and the directed light from screens damages our retina.
@s-qc9ns yeah that’s right
Mr. M, you are the reason why there are so many programmers without computer science degree, as well as, the reason why we can effectively compete with the college graduates! It's hard to overestimate the value of this series! Thank you very much!!! I stay tuned now.
Please support me by sharing my videos and don't forget to like, share, subscribe and turn on notifications bell
WHAT DO YOU THINK? COMPUTER SCIENCE STUDENT ARE TAUGHT PROGRAMMING OR REACT DURING DEGREE? NO BRO.
Of course not at all, CS student just get the knowledge instead of the dev skills, skills need to be learn, we can't get it from the degree
Dude , your channel is the Gold , we sadly need to dig for among all those cliche tutorials emphasizing the same trendy material !
Anyways Massive Respect for you to teach these Design Patterns !
Thanks a lot buddy
Please support me by sharing my videos and don't forget to like, share, subscribe and turn on notifications bell
I was asked about design pattern in React and this was the only reason I was not qualified. now i understood, thank you, your video is very helpful to me.
I'm happy, it's helpful for you and the other developers like you,
Please support me by subscribe, like and share to other developers like you and don't forget to turn on notifications bell
@@CodingWithMrM already subscribed, liked and i will share to the needful.
Lovely course, I just wanted to add that using the file type .jsx instead of .js is probably wise. I found this out when setting up React to work with Vite where I had to rename aaallll of my components to use jsx instead.
Yeah, sometimes vite throws that error with the extension, but it's a good practice to use jsx instead of js, as its react components.
Thanks for the video. I see some reusable components here, but I don't see the pattern here tbh. Maybe it's worth to make a summary in the end... kinda... tend to use children components rather then pass components as props, if we talk about layouts.
Also I'd like to hear when it's worth to create another kind of List component? like you did with Numbered list. We could add a prop, called `numbered` and tweak the regular List component to support it.
Yeah we can do that.
Please support me by subscribing and sharing my videos to others. Don’t forget to turn on notifications bell for more updates
Great video but just a question I dont really understand how we can style the list item component in another component.If i want to style the h3 tag of the list item component from its parent component how will I exactly achieve it.
please I encourage viewer to vote this question because this is really a very good question. I would like to seek the attention of the Mr. M to this question or someone who has answer to this. Thank you
You can pass an object to the resourceName. Like this:-
resourceName={{name: 'product', customStyle:"backgroundColor:'red'"}}
Something like this..
You can do it by giving the class name or id it's easy though ☺
11:48
leftWeight={1} and rightWeight={3}
doesn't give you one third as you said but a quarter
basically it's 1/(1+3) = 1/4 and 3/(1+3) = 3/4
If you'd wanted one third you should have, instead, set:
leftWeight={1} and rightWeight={2}
-> left: 1/(1+2) = 1/3, right: 2/(1+2) = 2/3
If you want a half:
leftWeight={1} and rightWeight={1}
-> left: 1/(1+1) = 1/2, right: 1/(1+1) = 1/2
etc (:
He said left weight will be one third as wide as right weight, in this condition leftweight = 1 , rightweight = 3 is correct.
@pinrruchou8187 indeed, my bad (:
@yanngranjon hehe okay. Don’t forget to subscribe my channel and support me
Great video, so helpful
Thanks a lot
Please support me by subscribing and sharing my videos to others. Don’t forget to turn on notifications bell for more updates
You’re a lifesaver
Thanks man please support me
Please support me by subscribing and sharing my videos to others. Don’t forget to turn on notifications bell for more updates
Great video to learn pro code
Thanks please support me by sharing, liking and subscribing my channel
Awesome. Many thanks
Thanks a lot
Please do support me by subscribing, sharing my videos and don't forget to turn on notifications bell 🛎
Thank you for this clear and educational content. Keep up the good work. Can’t wait to see more. 😃👍🏻
Your welcome
Yes I’ll upload today one more part of it.
Don’t forget to subscribe and turn on notifications and share to them who need of it 😊
Great video, I have one question at the end of the layout pattern why are we keeping leftweight = 1 and rightweight = 1.
Why are we assigning a number to these when we already do that in the splitscreen prop?
I'm pretty sure those are just default values: this way even if we omit passing those props from the parent component, they will still have a value of 1
It’s because of default value
love this, I am trying to follow along using typescript, and struggling a bit, please if you have a video of converting js components to typescript components that would help.
Thanks
Great suggestion! I’ll do that in next video. Please do support me by sharing my videos to others and don’t forget to subscribe and turn on notifications bell
THANK YOU !
You're welcome!
Please support me by subscribing and sharing my videos to others. Don’t forget to turn on notifications bell for more updates
Hi!
In the snippet above:
Are the external curly brackets brackets for the react dynamic values?
So these brakets aren't javascript object literal braces, are they?
If they are just javascript object literal braces we just copy an object to another object with the same structure. (with the spread operator)
Actually, this is a react question, not related to the design pattern.
Thanks!
Hai yeah!
Thanks for your question about the code snippet. You're absolutely right! The curly braces in JSX are used for dynamic values in React, but they're not limited to React - they're a JavaScript thing.
And yes, the spread operator (`...`) is handy for copying object properties, a cool JavaScript trick!
Feel free to hit me up if you have more questions. Happy coding!
Please support me by subscribing and sharing my videos to others. Don’t forget to turn on notifications bell for more updates
Great content!!
Just wondering if you have a rule of thumb or some kind of hint that tells you where to stop adding extra logic to components in order to make them more flexible.
ie, You can easily add an extra boolean prop to regular list component that tells you if you want to display the index value and making the list "numeric" in the process. No need for an extra component to achieve that, since you barely changed the code.
Thanks, yeah we can do that too
Thank you! Really helpful!
You're welcome
Don't forget to like, share, subscribe and turn on notifications bell 🛎
where I can get from the exercises files ?
I lost those files sorry
Thank you for this video and for the entire series.
As far as I'm aware of Styled-Components is a package which take care of styling in React.
Maybe they use some type of design pattern, but you represent them as if they are themselves a design pattern, while no official documanet of react about design patterns (as far as I found) doesn't even mentioned styling as an example of one of the design pattern forms/types.
I'm not sure I understand the purpose of this video, if you installed NPM to represent a design pattern while some of us working with Bootstraps, Material UI, or Tailwind.
What is even the name of the design pattern that you are showing here?
What am I missing here..?
I'll be happy to understand.
Please go through the entire playlist and here’s some of the information.
Design patterns are reusable solutions to commonly occurring problems in software design. React, being a popular JavaScript library for building user interfaces, has several design patterns that are commonly used to solve common problems.
Here are some common design patterns in React:
Render Props Pattern: This pattern involves passing a function as a prop to a component which can then be called to render content in the component. This allows for more flexibility in creating reusable components.
Higher-Order Components Pattern: This pattern involves creating a function that takes a component and returns a new component with additional functionality. This can be useful for adding common functionality, such as data fetching or authentication, to multiple components.
Container-Component Pattern: This pattern involves separating a component into two parts: a container component that manages state and data, and a presentational component that renders the UI. This can make the code more organized and easier to understand.
Controlled Components Pattern: This pattern involves controlling the state of form inputs in a component by passing their values and onChange events as props. This can make it easier to manage the state of form data and make the component more reusable.
Redux Pattern: This pattern involves using the Redux library to manage state across multiple components. This can make it easier to manage complex state and ensure consistency across the application.
These are just a few examples of the design patterns used in React. There are many other patterns that can be used to solve different problems, and developers often combine multiple patterns to create more complex solutions.
Please do support my channel
Awesome video! This gave me some inspiration for refactoring some of my old code. I do have a question regarding your layout pattern for lists. How does the pattern you showed differ , or why is it a better approach than say, creating a list component with an actual unordered list or ordered list that maps over the items themselves and nests them within the ul or ol provided by RegularList or NumberedList. My thinking was that a list item is not the list itself but a single child element of one. It could be that I’m confining my thinking of lists to actual list item elements within html list elements. I hope the question makes sense. This has been an excellent tutorial.
Yes you're right it's just making us easr to make one reusable component to loop through the items and make a list. It can be either ordered or unordered its depend on use case, for making as per that you just need to pass one more props like isOrdered if it's true then make it as ordered list or else unordered. I hope you got me.
Thanks for the feedback.
Please do support me by subscribing my channel and share my video to everyone who keen to learn and don't forget to turn on notifications bell for new videos
Hello Mr.M 😀,
I love this course. you made me think out of the box. I have one small question. your code looks short and sweet. How ever if you develop a huge web applications containing 100's of components and things. The programmers how are viewing our code for the first time will feel difficult right? Because this will increase the complexity while viewing. if we need a good quality code our application should have lots of state less components right?. is it recommended for bigger and bigger applications?
Yes that's true, simple code is for better understanding and optimizing, for a new coder it'll take time to understand, for the experience coders then can love your code easily
Very nice!
Don't forget to like, share, subscribe and turn on notifications bell please help me by supporting my channel ☺
const [left, right] = children is amazing !
Thanks
Don't forget to like, share, subscribe and turn on notifications bell 🛎
thank you
You're welcome
Don't forget to like, share, subscribe and turn on notifications bell 🛎
This is awesome
Thanks a lot
Thanks a lot
Thanks a lot
I have tried following this code but I am stuck with the left and right that you have defined. did you install any library for that? I'm getting the error that it is undefined.
No I haven’t installed any. Sorry for late reply. You can connect me on fb and we can solve it
the styled components library is pretty cool but from a learning perspective I'd much prefer to see how to write these with vanilla react first and not have the dependency then if I want add a helper class I can but I will understand what is running underneath.
styled component is doing nothing here, if you understand the concept, it is easily reproducible with vanilla react as well.
Styled components is just for styling and nothing else..
Yeah but in industry we don't use all those we go along with the libraries
How can we animate the modal to fade in and out?
With the css you can do that, check my css videos
Dude im dumb as a door how would one style them later on? 😮
Ahh could you send me the question on my instagram so I might can help you
can you provide github of your code
Once I’m recover then I’ll update it
congrats for your 500th like😊✨, nice explanation on this topic ... (mza aa gya guru : in hindi(❁´◡`❁))
Thanks a lot bro. Thanks for the 500th like.
Please do support me by subscribing my channel and share my videos other people’s who are looking for coding tutorials.
I just started editing one more new tutorial heheh.
Don’t forget to subscribe and turn on notifications bell 😉
github link please
Sorry I need to search because I lost it my old account
⭐ Promo-SM!!
Hello I would like to know where the project startup folder is located
You can follow the video
Thank you for this video and for the entire series.
As far as I'm aware of Styled-Components is a package which take care of styling in React.
Maybe they use some type of design pattern, but you represent them as if they are themselves a design pattern, while no official documanet of react about design patterns (as far as I found) doesn't even mentioned styling as an example of one of the design pattern forms/types.
I'm not sure I understand the purpose of this video, if you installed NPM to represent a design pattern while some of us working with Bootstraps, Material UI, or Tailwind.
What is even the name of the design pattern that you are showing here?
What am I missing here..?
I'll be happy to understand.
Please go through the entire videos playlist.
Design patterns are reusable solutions to commonly occurring problems in software design. React, being a popular JavaScript library for building user interfaces, has several design patterns that are commonly used to solve common problems.
Here are some common design patterns in React:
Render Props Pattern: This pattern involves passing a function as a prop to a component which can then be called to render content in the component. This allows for more flexibility in creating reusable components.
Higher-Order Components Pattern: This pattern involves creating a function that takes a component and returns a new component with additional functionality. This can be useful for adding common functionality, such as data fetching or authentication, to multiple components.
Container-Component Pattern: This pattern involves separating a component into two parts: a container component that manages state and data, and a presentational component that renders the UI. This can make the code more organized and easier to understand.
Controlled Components Pattern: This pattern involves controlling the state of form inputs in a component by passing their values and onChange events as props. This can make it easier to manage the state of form data and make the component more reusable.
Redux Pattern: This pattern involves using the Redux library to manage state across multiple components. This can make it easier to manage complex state and ensure consistency across the application.
These are just a few examples of the design patterns used in React. There are many other patterns that can be used to solve different problems, and developers often combine multiple patterns to create more complex solutions.