How To Identity Components In A Design Mockup To Build A React Application

Are you curious about React JS as a JavaScript developer and can’t wait to start building something interesting with it? If YES let's journey together.

Now let’s talk about React

What is React

React is a JavaScript library for building user interfaces. It is about building JavaScript applications that can scale. React apps don’t run on the server they run in the browser.

Now let jump into WHY we use React.

Why use React

As your application becomes huge and complex, targeting elements in the DOM of your application becomes more stressful. Also, the UI state of the application becomes difficult to manage with vanilla JavaScript. Therefore considering React JS is an efficient way of building scalable JavaScript applications.

HOW TO IDENTIFY COMPONENTS IN A DESIGN MOCKUP

Wow, now you know what React JS is and why you should build your applications with it. To build applications with React you need to know and understand the steps required to convert mockups into making a React application but this lesson is on Splitting the Mockup Into “useful Components”. The word “useful components” is deliberate as any section can be a component but knowing when not to make component is also important.

Split the mockup into components

Pay attention here, To build a React application you have to break down the UI(User Interface) design into what is referred to as components.

What are components

Components allow you to write reusable, manageable and maintainable code. React uses components to build user interfaces. Working with components makes it easier to work with teams and also makes it easier to manage the code.

Now take a look at the image below, it’s a regular web page with a header, sidebar, headline and article content section. These sections of the page are what are referred to as components(the header component, sidebar component etc.) from the UI point of view.

NOTE: If you are trying to divide a mockup page into components, One technique to be used is the single responsibility principle which means that a component should ideally only do one thing. If the component becomes complex, it should be decomposed into smaller subcomponents which also perform one function.

For example, the header, sidebar, headline, and article content section component displays only the header, sidebar, headline and article content section respectively.

In addition, if you are going to display JSON or Object data then break down your UI into components, where each component matches one piece of your data model. Let me use the example on the official React page to demonstrate the understanding of how to break down components.

Example: Assuming you have been given the mockup design and with an API endpoint with the data below.

Mockup design

Sample data

Now let’s analyze the mockup with respect to the given JSON data to determine our components

I personally take these steps to determine components in a mockup

In no particular order

1. Draw a box around the contents of the mockup that are strictly values from the JSON data.
2. Draw a box around every section of the UI that are reusable.
3. Multiple values from the JSON or Object data should be in a single box if there are to be displayed as one content(eg. The product row).
4. Draw a box around inputs of forms(should contain all input types needed).
5. Wrap smaller boxes with bigger ones in case of subcomponents. Static content and non-reusable can be part of a wrapping box not as the box on its own.
6. Cover all contents in one outer box which represents the outermost component.

After carefully analyzing the mockup and JSON data, you should have something like the image below.

The numbers in the image correspond to the numbers below.

1. FilterableProductTable (orange box): The outer box for the entire example

2. SearchBar (blue box): All user’s input box

3. product table (green box): Displays and filters the data collection based on user input

4. ProductCategoryRow (turquoise box): The heading for each category

5. ProductRow (red box): The row for each product

Now that you have been able to identify the components from the UI point of view, the next thing to do is to start coding i.e turning the components into React components. In the next article we will discuss on how to code a React component with examples but before then let's know what a React component is in it simplest form.

Basics of writing a React component

A React component is simply a JavaScript function with the function name starting with Uppercase. The function also returns the HTML code you want to return to the DOM. In React the HTML to be returned is regarded as jsx(note the use of className below as a substitute for class in normal HTML) just to remind you that it isn’t pure HTML but jsx(JavaScript XML).

Basic React component sample

function Person(){

    return(
        <div className="person">
            <h1>James</h1>
            <p> Your age is: 20</p> 
        </div>
    );
}

Thanks for reading and hopefully someone finds this useful.
Please leave a comment to help improve this article.