How to Design a UI

Now, we are going to see how we can design our application so that it fits well when implemented with React.

Everything Is a Component

The main concept introduced by React in user interface design and implementation is the component concept. A user interface is an aggregate of components, and the whole React application is an aggregate of components. We will now see in more detail what components are from a design point of view.

Note

From a design point of view, we can say that a component is a part of the user interface, having a specific role. A hierarchy of components is often called a component tree.

Consider a form in a web page. It can be treated as a component, since it has a specific role: to collect data and send it to the server. Also, a textbox inside the form can be considered a component. It has a specific role: to collect a single piece of data that will be sent to the server. So, a component may contain other components. And this is what usually happens: a user interface is a hierarchy of components, where some components contain other components.

Keep this concept in mind, since it will be useful to implement efficient and reusable user interfaces.

Decompose a User Interface

To better understand how to design a user interface and how to create components to implement them, we will try to decompose a well-known web user interface—the YouTube main page:

We can detect several items on this page, each having a specific role, starting with the page itself, whose role is to allow the user to interact with the system.

If we consider the header, the left sidebar, and the main area, all of these items are components of the page. You can see them highlighted in the following screenshot:

Of course, we can go ahead and detect other components. For example, we can consider each video preview box in the main area as a component. You can see them in the following screenshot:

This decomposition process allows us to focus on the specific role of each item in an interface, so that we can try to isolate each functionality and create reusable components, that is, components with just the dependencies that really matter.

Container and Presentational Components

We can classify the components in a user interface into container and presentational components.

The container components are components that do not have a relevant visual effect. Their main role is to group other components, that is, contain other components. For example, a form is usually a container component, since its main role is to contain other components, such as textboxes, labels, buttons, and so on.

The presentational components are components that display data in some graphical form. A textbox, a date picker, and a toolbar are examples of presentational components.

The distinction between container and presentational components is very important in order to create efficient user interfaces in React. We will exploit this distinction later, when we learn to manage the components' state and to propagate data through the components.

Activity: Detecting Components in a Web User Interface

Scenario

We need to convert the Wikipedia website's user interface (https://en.wikipedia.org) into React components.

Aim

The aim of the activity is to address the design process when implementing React-based user interfaces.

Steps for Completion

1. Analyze the page's current structure and detect the items you can implement as components
2. Indicate which would be container and which would be presentational components

Solution

Assume that the following is the current Wikipedia home page:

A possible solution could be as follows.

We can detect the following components:

• The home page component contains the left sidebar component, the header component, and the main area component. All of these components are container components.
• The left-side component contains the logo component (presentational) and a list of section components (presentational).
• The header component contains a list of link components (presentational) to general pieces of functionality.
• The main area component contains a list of tab components (container) and a search component (presentational).
• The main tab component contains a banner component (presentational), a topic index component (presentational), and a list of block components (presentational).