ReactJS follows the current trend of component oriented Web UI design. Component oriented design is nothing new; in my good old desktop times I wrote applications in Qt, which uses widgets. Java Server Faces, WebForms and others do the same on server side. Nowadays, we can see the same trend hitting client side, like WebComponents, Directives in Angular, FlightJS, and of course ReactJS. In this article I'll talk about different composition types you can realize with ReactJS. Although this article shows how to compose your UI using ReactJS for composition, the ideas behind the composition modalities can be applied for other component driven libraries, or frameworks, too. I distinguish two modalities of composition, which I call Coupled and Decoupled Composition.
A coupled composition means that one component is the owner of another component.The owning component can be considered as a parent, while the owned component becomes a child.This kind of coupling leads to a typical component hierarchy with parent and children components.
A decoupled composition is used when none of the components is owner, nor owned.These components exist on the same screen, nevertheless they are not bound or related to each other.
The composition modality defines the way how components communicate which each other.