What is "Composition" in React.js, Angular or Vue Apps?

hi everyone in this video we're going to have a look at the concept of composition in the context of front-end frameworks and libraries like view or react and we're going to have a look at what composition means and why it's a useful pattern which you probably are already using at least you should so what is composition i prepared a very simple react project here here it is which only does one thing it renders two alert components here one of them is dismissible now i'm achieving this in this very simple project by having two components an alert component which in the end is just rendering a div with some dynamic content which can be passed in from outside where i'm using that component and i'm having a dismissible alert component which is using that alert component to then just also add a button besides that outside content and that's composition in action already it actually already starts with the normal alert component i'm using composition here because i'm building a component which just provides a shell you could say this div with certain styles around some dynamic content and with props children in reacts world we can pass in content between the opening and closing tags of our own custom component i'm doing this here in app.js here i'm using this alert component and i'm passing in some text between the opening and closing tags of the alert component i built and this content which i passed between the opening and closing tags is output with props children here and that's composition in action because i'm building this base shell to then put any content in there which i want so i can compose my user interface by using this alert base building block and then making it whatever it should be in this case an alert box with some text just based on what i passed between the opening and closing tags here and then we're taking composition to the next level by building another new component based on the old component and we're not doing this with inheritance or anything like that but instead we're building a new component by composing it of different things by composing different things together in the end here we're composing this dismissible alert component by combining the existing alert component with any external content with props children just also wrapped between a span here and by then combining this external content with a hard-coded button which closes this alert so we're building a new component with composition here because we're combining an existing component we're adding that into our jsx code here with some new markup and the content which is past them from outside and that allows us to use this dismissible alert like this just by again passing in some text but we have this extra functionality of being able to close it just because of composition here now you were probably already using composition when you were working with react or with vue or with angular and i want to say that vue and angular also know that feature in view you use the slot component in angular you use the ng-content component this is simply a crucial feature in modern front-end development because it allows you to build powerful user interfaces from small reusable building blocks which of course ensures that you don't repeat yourselves that you can use code you already wrote in another component to then build a new component and therefore overall leads to cleaner code and i just want to emphasize this and reintroduce this concept you might already know so that you also know its official term and understand the reasoning behind it because understanding the reasoning behind what you do is never a bad thing

Channel: Academind

Views: 15,296

Keywords: vue, react, react.js, reactjs, angular, vue.js, vuejs, composition, react composition, vue composition, academind, maximilian schwarzmueller, maximilian schwarzmuller, maximilian schwarzmüller

Id: of7isf3YBZ4

Length: 4min 19sec (259 seconds)

Published: Thu Feb 11 2021