Reusing functions is one of our goals as developers, and in the previous chapter, we saw how React makes it easy to create reusable components. Reusable components can be shared across multiple domains of your application to avoid duplication.
Small components with a clean interface can be composed together to create complex applications that are powerful and maintainable at the same time.
Composing React components is pretty straightforward; you just have to include them in the render:
const Profile = ({ user }) => (
<>
<Picture profileImageUrl={user.profileImageUrl} />
<UserName name={user.name} screenName={user.screenName} />
</>
)
For example, you can create a Profile component by simply composing a Picture component to display the profile image and a UserName component to display the name and the screen name of the user.
In this way, you can produce new parts of the user interface very quickly, writing only a few lines...