How to break the UI of any website into React components
Published: 2022-08-09 13:10:53

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.

![emmanuelkumah description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19q89fy3l6yb8k1w1upp.png)

In order not feel overwhelmed, you can break down the hero section of the UI of my [portfolio ](https://efkumah.netlify.app/)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 `<ComonentName/> 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