Communicating components

Composing React components is one of the key benefits of building applications with React. By creating small, reusable components with clean interfaces, you can easily compose them together to create complex applications that are both powerful and maintainable.

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 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...