Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Beginning React

You're reading from   Beginning React Simplify your frontend development workflow and enhance the user experience of your applications with React

Arrow left icon
Product type Paperback
Published in Jul 2018
Publisher
ISBN-13 9781789530520
Length 96 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Toc

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.


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).
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime