Breaking down UIs into components

Let’s examine a more complex UI and explore how to break it down into components and implement them separately. In this example, we will use a weather application:

Figure 2.1: A weather application

The entire application can be defined as a WeatherApplication component, which includes several subcomponents:

const WeatherApplication = () => {
  return (
    <>
      <Heading title="Weather" />
      <SearchBox />
      <Notification />
      <WeatherList />
    </>
  );
};

Each subcomponent can perform various tasks, such as fetching data from a remote server, conditionally rendering a drop-down list, or auto-refreshing periodically.

For example, a SearchBox component might have...