What is "Composition" in React.js, Angular or Vue Apps?
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2021
- When working with modern frontend frameworks like Angular, React or Vue, you often work with a concept called "Composition". Even without knowing that it's called liked that. It is a key concept though - and thankfully also quite easy to understand.
Want to learn more about JavaScript or modern frontend frameworks? Explore our courses (and get some nice discounts)!
JavaScript - The Complete Guide: acad.link/js
Angular - The Complete Guide: acad.link/angular
React.js - The Complete Guide: acad.link/reactjs
Vue - The Complete Guide: acad.link/vuejs
Or get ALL ours courses for one low price with our monthly or annual memberships: pro.academind.com
Join our free Academind Community on Discord: / discord
Check out all our other courses: academind.com/learn/our-courses
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
![ความรักของยักษ์เขียว (ทศกัณฐ์) - เดี่ยว ไออุ่น [OFFICIAL MUSICVIDEO 4K]](http://i.ytimg.com/vi/yCCy-QVHqK8/mqdefault.jpg)
Loving these short informative style of videos!
Understanding your code is very important. This is a great quick video and you are an awesome teacher Max. Appreciate it. See you soon!
Been trying all day today to understand composition and why you use props,children, and the first 2 minutes of this video, its explained perfectly, thank you! I finally understand why you do it this way
Woww guys! Nice work here with these conceptual videos!!! I'm suggesting to all the beginner devs in my company to watch it all!
It's always better to understand the terms before you start using them even if it takes much longer to get it but it will definitely pay you back on the long run.
Thanks Max
thank you max
you are a great teacher and the best ❤️
i will never forget your react course in udemy , you taught me alot ❤️
Composition in the context of UI Composition has a different meaning than Composition in Programming Languages.
In UI it hans more the meaning of grouping components together or creating a compound component containing multiple child component.
In programming it is clearly Function Composition as we know it from functional style programming!
There is one axioma for me in programming "Composition over inheritance"
Nice vid max!
Thanks a lot 😀😊
Thank you max.❤
love from India❤️ thanks max for your great efforts..
@Academin Plz make 1 video on which is better UI framework for React Js :
Material UI vs Reactstrap vs React-bootstrap vs Antd ?
Hey Max, is there any plan for advanced Node.js course?
@UCZtNOD_3RVvauKe5vnotlpQ Which one do you mean, mate?
There is NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno) on Udemy already, taught by Max.
Hey Max, what is the font you are using for vs code ?
Dark+ :)
Great Videos!
where i can see a example with inheritance to compare D:
I have been using this already but never knew it was called composition. Great to know it. Thank you.
of vue already has this. why the new composition API in vue 3?
If i remember it correctly, it's called content projection in angular?
So, there are a couple of things here to dissect IMHO.
The offered "composition" within components is, in the end, hierarchical. It's the building of dom nodes, which are purely hierarchical. So, from that perspective, it's not really composition. Why? Because you can end up with very bad coupling between components due the hierarchy, if you aren't careful.
The other things, "slotting in content", is also not really composition. What it is, is allowing other devs (or yourself) to inject code as needed into the component. It's not composing component "features", it's injecting dom content (which might have additional features). One could say, the "slot" offered by a component is part of it's API, but to slot in DOM nodes (again, hierarchical) via other components. Vue's slots, for example, make this "Component API" concept much more apparent.
What’s crazy is that this idea and practice has existed forever. But us old guys have to keep learning the new buzzwords being slapped onto the old thing. It seems like every new generation on the lecture circuit or in the big tech companies like to repackage and rename something and then announce it as new.
Help me
alert('Max transforms a composition of complex concepts into simple concepts');
I would love to see this explained using typescript with proper typing.
Tech word jargon?
I understand that you try to explain what Composition in React is, but I don't think this approach is DRY, at least not DRY enough. 😂
Imagine adding a couple other types of Alert component. You'll end up with 4 Alert components.
I would prefer to have a _dismissable_ prop with conditional rendering on the button or even better render the dismiss button if _onDismiss_ callback is passed down.
Yeah, I wish he mentioned that it was just for demo purposes before people end up creating variations of every component. For something as small as a dismiss button it should be contained as you said.
Hey max, please build some tutorial showing making changes in react native code during building of app for ios & Android simuntaneously . I found no resource anywhere on youtube although its core feature of react native
In react-native any code you write works for android and ios. Therefore, any changes you make to your code should affect both. 🙏🏼
@@nevinkuser9892 appearance different in different platforms moreover some commands are platform specific. For optimal performance we need to append code using platform=='ios' then else type thing.
First
You speak as Bill Gates xd
Thank you max.❤