Composing Components

If it is not obvious React components can make use of other React components. That is, when defining a component the render configuration function can contain references to other components. When a component contains another component it can be said that the parent component owns the child component (aka composition).

In the code below the BadgeList component contains/owns the BadgeBill and BadgeTom component.

source code

This code was purposefully simplistic in order to demonstrate component composition. In the next chapter, we will look at how the code will typically be written making use of props to create a generic Badge component. The generic Badge component can take any name value v.s. creating a unique badge and hard coding the name in the component.

Notes

• A key tenet of maintainable UI are composable components. React components by design are meant to contain other React components.
• Notice how HTML and previously defined components are mixed together in the render() configuration function.