Using composition
In React, composition is a natural pattern of the component model. For instance, JSX’s markup language syntax enables us to pair a div with an h2 tag seamlessly, without the need to incorporate anything new.
The custom component is nothing more special than the built-in ones like a div; you can use your Cart component with a div just as you can use a p tag with it. This pattern enables more straightforward reuse of components, which can contribute to cleaner and more maintainable code.
Let’s consider an example. Suppose we’re building a UserDashboard component that displays user information. The profile includes an avatar, a name, and a list of the user’s friends and the latest posts. Here’s how it might look:
type User = {
name: string;
avatar: string;
friends: string[];
};
type Post = {
author: string;
summary: string;
};
type UserDashboardProps = {
...
