Emmanuel Fordjour Kumah

Posted on Aug 9, 2022

How to break the UI of any website into React components

In building websites or web apps in React, it is recommended to segment the user interface into building blocks called components. Components are one of the core concept in React, as it makes building user interface easy

In this article, you will learn how to segment the interface of your app into components.
Let's get started!

Tradition way of building user interface.

The UI design of a web app can feel overwhelming when tasked to convert it to a functional application.

Traditionally, you would write all the markup that makes the UI of a single page (e.g. Homepage) in one HTML file. If the homepage contains multiple sections, the markup for each section will be in the same HTML file (e.g. home.html).
To add interactivity to the homepage, you will need to access the DOM elements, and manipulate it with JavaScript.

Due to the numerous lines of code you would have written, when an error occurs, you will have to go through each line of code to detect, and fix the error.
When you want to make a content update, for instance, if you want to change the content menu item in a nav bar, you will have to go through each HTML file that houses the nav bar to effect the change.
Again, because all the interactivity will be written in a JavaScript file, fix errors or modification becomes a head ache.

Using this approach, it makes building user interfaces difficult to maintain and update.

Below, we discuss how to solve these issue using components.

Understanding React components

React help solve the issues recoiled above by giving us the ability to break each part of the user interface into pieces, and then work on each piece

These individual pieces can then be merged into a parent component to form the final UI. The individual pieces you will develop are what we call components.

Components are individual pieces of your user interface that can be developed and reused.

It is the backbone of any React application, component makes use of an important concept in programming called "separation of concerns".

Seperation of concerns deals wihh having each part of our component have its only clearly defined roles and tasks, different from other components.

Benefits of using components:

The below are the advantages of using components in building your user interface:

It will allow you to select the section of the user interface that feels easy to implement and swiftly work on that.
Quickly fix errors in your app by going to the component that is throwing the error and resolve it without combing through the entire lines of code in each file.
Reuse the component in another page, for instance when you develop a NavBar component, you can use it on any page you want to display a navigation menu.

Breaking the UI into components

Imagine you want to build the hero section of my portfolio website below.

In order not feel overwhelmed, you can break down the hero section of the UI of my portfolio website into components.

For instance, we can segment the hero section into the following components
-NavBar
-HeroDetails
-HeroImage
-Socials

We can even have child components, for instance in the NavBar component we can nest other components like the NavMenu and the NavBar. The NavBar then becomes the parent component and the nested components are the child components

Creating your component from markup

HTML or markup is the structure of every website you visit, for instance, the HTML below is what I used to display the HeroDetails section of my site

   <section>
        <div>
          <span>Frontend Developer</span>
          <span>Technical Writer</span>
        </div>
        <h1> Emmanuel F. Kumah.</h1>
        <h2>I build things for the web.</h2>
        <p>
          I help businesses increase customer engagement and retention by
          combining technology and design to create inviting, easy-to-use web
          applications
        </p>

        <div>
          <button>View portfolio</button>

          <a
            href="https://drive.google.com/file/d/1vfw-TMv9Wsg6zpPI454PnvH6Azn2bgOw/view?usp=sharing"
            download
          >
            Download CV
          </a>
        </div>
      </section>

This markup represents the section tag with some h1,p,a and button tags.
Sprinkled with a bit of CSS, we can have the cool user interface marked Hero Details in the screenshot above, we can then hook it with JS to add interactivity.

It is this markup, that will be used to create our component.

Let's see how to achieve that

Components Everywhere.

React is big on making our website interactivity and dynamic, hence, in our React project, you will usually create a JS file which contains a function, and then embed the HTML into it, sprinkled with some CSS.

Let's see how to create our component in React.

Steps in creating your component

After you have segmented the UI design of the website into components, you can then start with any part of the design that feels easy to implement.
Supposing, you were starting the the HeroDetails segment of the portfolio website, here is how you will build the HeroDetails component in React.

Step 1: Declare the function

Create a JS file, and declare a function, you use the usual method of declaring functions in JavaScript.

A function declaration is made of the function keyword, followed by the obligatory function name, then some parenthesis (), and finally an open and closing curly braces {}.

The body of function {} will contain a set of HTML elements (markup) that will determine how the structure of that section should look like.

The HeroDetails section can be defined like the below:

function HeroDetails(){
return (//html goes here)
}

We have declared a function with with a name HeroDetails
In React, function names should always start with a capital letter, hence the uppercase H in HeroDetails.

Step 2: Add the markup or HTML

In the body of the function, you will use the return keyword prior to writing the markup.
This return keyword is *responsible for displaying the markup, or the HTML *.

When the function is executed, the markup will be displayed on the screen as the user interface.

Let's take a look at how to achieve that

function HeroText() {
  return (
      <section>
        <div>
          <span>Frontend Developer</span>
          <span>Technical Writer</span>
        </div>
        <h1> Emmanuel F. Kumah.</h1>
        <h2>I build things for the web.</h2>
        <p>
          I help businesses increase customer engagement and retention by
          combining technology and design to create inviting, easy-to-use web
          applications
        </p>

        <div>
          <button>View portfolio</button>

          <a
            href="https://drive.google.com/file/d/1vfw-TMv9Wsg6zpPI454PnvH6Azn2bgOw/view?usp=sharing"
            download
          >
            Download CV
          </a>
        </div>
      </section>

  );
}

Usually, we cannot embed HTML in a JavaScript function, however, React allows us to achieve that using a syntax called JSX.

Instead of putting JS in HTML, React allows us to add HTML in a JavaScript file.JSX simply allows us to write HTML in JavaScript.

-If the markup isn't all on the same line as the return keyword, you should wrap your markup in parentheses () after the return keyword, like the below:

return (//add your html here)

So far, we have defined the HeroDetails function, and inside the body of the function, we used the return keyword and then proceed to write our markup in the parentheses.

Step 3: Export the component

To make use of the HeroDetails component, we need to export it from the file we created it in.
To do that, use the syntax below at the end of the file.

export default HeroDetails

The export default prefix let you mark the function in a file so that you can later import it from other files.

Use the component

To use the HeroDetails component, we will import it from the parent component. The parent component is another JavaScript file you will create. It serves as main file (parent) to add the individual components (mother)

In my case, I will name it Home.js file. This file will contain all the individual segments that comes together to form the home page.

In the Home.js file, you can import the HeroDetails component you have written, to do that use the import keyword at the top of the file, we use the usual **import **in JavaScript.

import HeroDetails from "./HeroDetails";

function Home() {
  return (
    <HeroDetails/>

  );
}

For the Hero Details component to display the UI, you write the name of the component enclosed in angle brackets ` like a normal HTML tag

<HeroDetails/>

When the app is rendered, the markup you have defined in the HeroDetails component will be display on the screen as the user interface.

Even though <HeroDetails/> looks like an HTML` tag, it is actually a React component.

The browser is able to distinguish between a normal HTML tag and a React component by the uppercase of the component name, in our case the H of the HeroDetails component.

Adding multiple components

Components are regular JavaScript functions, that displays the user interface of our application, hence, you can have multiple components in the same file.

In our case, we can have a single file called Home.js and then nest all the components we have declared into it to form the homepage of our design.

We can use the same steps as above to write the NavBar component, which will be a parent component with two child components, NavBrand and NavMenu. Then work on the Socials and HeroImage component.

If we continue work on the other components, we could have a single Home.js file with these components nested inside like the below

import HeroDetails from "./HeroDetails";
import NavBar from "./NavBar"
Import HeroImage from "./HeroImage"
import Socials from "./Socials"

function Home() {
  return (
    <NavBar/>
    <HeroDetail/>
    <HeroImage/>
    <Socials/>
  );
}

Reusability of components

The magic of React lies in its reusability, if we succeed in creating a component for each section of our web app, we can import a specific component and reuse it in other part of our application.

For instance, when we create our NavBar component, we don't need to recreate it again when we want to code, say, an About page.
We only need to import the NavBar component, and it will show in our About page.

The final step is to link your Style sheet to the Component to style it nicely, and you are good to go.

Conclusion

In this article, we have learned how to break the user interface of any website into components.
Components are the building blocks of any React apps, it is a JavaScript function embedded with some HTML in a syntax known as JSX.

If you find this article useful, kindly share on your social media channels.
Do you need any clarification or have some suggestion to make on this article. Feel free to drop you comment. Would love to read what you have to say.

Happy Reacting