It always begins with a single component. You could maybe define a class or functional component, but ultimately you must always be ready to render. You can have data in the form of local state(s), or functionality in form of, say, event handlers.
Your component will grow in responsibility and complexity. No component is a singleton, you learned, so you break your component down.
Now you have two components. Then three. Then four. Eventually you’ll have X number of components, each with its own complexity. The good stuff.
Components let you isolate parts of your large application so you can have a separation of concerns, and if anything breaks you can easily identify where things went wrong. Regardless, components are also meant to be reusable: you want to avoid duplicated logic, and you also want to keep watch for over-abstraction. Reusing components comes with the Don’t Repeat Yourself (Benefits), but it isn’t carved in stone as taught in Goodbye, clean code.
More often than not, components will have some data or functionality that another component needs. This could be to avoid duplication, or to keep the components in synchronization.
Whatever the reason, some components might need to communicate, and the way to do this in React is through props.