Introduction to Thinking with React Components

React provides an excellent way to build scalable and highly performant applications. We have to carefully and efficiently structure these applications while we are building them. We will look at a few design principles that will help us to logically structure our app into components.

Atomic Design

While building web and mobile applications, which is a common use case for React, we tend to create a design system that consists of elements, along with the design and interaction that make up the application. Now, the more reusable the components are, the more the design becomes consistent and cohesive, and speed improves. Developers are able to work with components, which provides a good foundation to grow and make further modifications when required.

One way to compose a design system would be to use the principles of atomic design, which dictate how components should look and feel when the user interacts with them. Atomic design, as coined by Brad Frost, takes its cues from chemistry and uses it as a metaphor to explain the structure of UIs:

Figure 5.1: Atomic design, as coined by Brad Frost

According to modular atomic design, web components should be versatile and reusable. We begin with atoms, which are the smallest basic building blocks. In UIs, these are elements such as buttons, inputs, form controls, and labels.

Molecules are a combination of multiple atoms that, in UIs, would be grouped elements that work together, such as a search module that is a combination of a form label and a text input with a button or a simple styled list of links.

Combining various molecules gives us organisms, which are relatively complex UI components, such as a website header or navigation bar, which is made up of smaller elements, such as lists of links, dropdowns, and hamburgers for mobile navigation.

Templates that are made up of organisms begin to take shape, showing us the final design layout. These are page-level objects and articulate the desired content structure. An example would be to create a dashboard template or a home page template using the elements mentioned above.

Pages are created from templates and are higher fidelity, the final level of our interfaces. They have all the realistic content, assets, and media added and are a true reflection of what the end result will be.

With this knowledge of how an application should be designed and can be broken down into several UI elements, let's take a look at the wireframe of a shopping cart.

Pragmatic Approach

Here is a wireframe of a shopping cart:

Figure 5.2: Wireframe of a shopping cart

We can see the following elements on screen:

• Page header
• Sort field
• Pagination
• Product list

The product list comprises product elements, which includes the following:

• Product title
• Product image
• Product description
• Add to Cart
• Add to wish list

We shall next break down the UI into the elements we have identified and mark them so that we are able to build reusable components. Atomic design principles help us to think about how the components should be broken down and structured. We also need to name them, which may be a common name for the UI element.

The following is the wireframe of the same shop with marked components:

Figure 5.3: Elements marked as components

Note

Components are written in pascal case, which is a naming convention where the first letter of every word in a compound word is capitalized.

The component names would be:

• PageHeader
• SortField
• Pagination
• Button
• ProductList
• Product
• ProductImage

Now, we are able to correctly identify the elements that could be transformed into a component. In the next section, let's focus on building React components.