My Top 5 Methods To Develop UIs Faster in ReactJS
Tags: javascript, react, beginners, webdev
Published: 2021-04-18 20:52:55

---
title: My Top 5 Methods To Develop UIs Faster in ReactJS
published: true
description: So being a frontend developer, let me walk you through the top 5 methods that I keep in mind and personally follow them to build UIs faster in ReactJS app
tags: #javascript, #react, #beginners, #webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20pic75rz84fla22t110.png
---

In an IT setup when a team comes up with a product idea, the first thing they do is the paperwork. Yes, they go through some documentation like feasibility reports, use cases, offering features, market research, and other related aspects of it.

After all the documentation stuff is done, they ask designers to design the application’s UI. As soon as the design is ready, frontend developers are asked to develop the UI of the app while the backend developer works on its APIs.

So being a frontend developer, let me walk you through the top 5 methods that I keep in mind and personally follow them to build UIs faster in ReactJS app, it may include:

- Method#1 Analyze The Design
- Method#2 Build Site Data
- Method#3 Set State
- Method#4 Integrate ESLint
- Method#5 Integrate Storybook

## Method#1: Analyze The Design, Understand The Designing Stuff

In this method, you have to analyze the design and think of various patterns to build the app’s UI. I spend at least 30 minutes analyzing and think of different strategies and patterns I can apply. I analyze the design based on three things, which are:

- **Searching For Wrappers** - What do I mean by wrapper here? *Wrapper* is something that takes `children` as `props`. Let's say if we have a *modal* on 3 different places in our app that has the same design for *title*, *close icon* and *margin*, *paddings*.
For that, I will make a `ModalWrapper` component. Similarly, we can make a wrapper for cards.

Let me walk you through one more example.

Let's say we have the same header and footer on each screen, so we make a layout wrapper something like this.

```jsx
import Footer from '../Footer'
import Header from '../Header'

function Layout({ children }) {
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  )
}

export default Layout
```

- **Reusable Components** - My second step is, I try to note down what I can reuse in my application. For example, *buttons*, *input* with *labels*, *errors*, etc. The main idea of noting down all the reusable components is to create consistency and save time by not writing the same line of code again and again.

Reusable components are one that changes via `props`. (Wrappers are also reusable components but it takes children so l call it wrapper)

- **Understanding The Grid System** - Designers build site using a grid. It will help us to make site responsive easily when it comes to smaller devices. Understanding the grid system is really
important for responsiveness.

In order to make site responsive, we use *flex*, *grid*, or *width in percentages* for responsiveness depends on the scenario.

This is the only method that is going to take much of our time among all other methods. But, there is a reason for it. It sets the roadmap throughout the app and helps us structure our code.

## Method#2: Build Site Data, Use The Dummy Data

While building `UIs` we often come across a list of `data`, since we don't have `APIs` ready, so in order to keep the process smooth and fast, I create the *dummy data* and `map` it, where needed. And also, put it in a new folder created by the name **site-data**.

When we will be integrating APIs, we will be deleting folders inside `site-data`.

But how you are gonna manage the **site-data**, it’s totally up to your choice!

Below is the snippet of how I build the *site data* folder for an example data (on the left) that I often encounter practically when designing the UIs:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb9tmkqv5tcaqh3hfp8u.png)

Create an object there something like this and export it.

```jsx
const employess = {
  header: [
    { title: '#' },
    { title: 'Name' },
    { title: 'Email' },
    { title: 'Phone' },
  ],
  body: [
    {
      id: 1,
      name: 'John Doe',
      email: 'john@email.com',
      phone: '1234567'
    },
    {
      id: 2,
      name: 'John Doe',
      email: 'john@email.com',
      phone: '1234567'
    },
    ....
  ]
}

export { employess }
```

This practice helps you to make your components clean and having a light version of CMS (if you like) for your app that can be easily managed.

## Method#3: Set The State, Dealing With Overtime Data Changes

So whenever you come across a part of the design of an app that has to be interactive, especially using forms, checkboxes, dropdown, etc. Always try to set up a state for them to get the changed data from the users.

In the case of `forms`, I use `console.log` for all the *form's values input* on the `submit` button. It has been really super helpful and fast when I have to integrate the APIs.

Here is the example,
```jsx
const UserProfile = () => {
  const [userProfile, setUserProfile] = useState({
    name: '', oldPassword: '', newPassword: '', email: ''
  })

  const onChangeProfile = (e) => {
    const { name, value } = e.target
    setUserProfile({ ...userProfile, [name]: value })
  }

  const onSaveProfile = (e) => {
    e.preventDefault()
    console.log('userProfile', userProfile)
  }

  const { name, oldPassword, newPassword, email } = userProfile

  return (
    <>
      ...
    </>
  )
}
```
## Method#4: Integrate ESlint, Consistency Is The Key

*Eslint* really helps us to make our code consistent. They don't let us have unused `imports` or `variables` and force us to follow consistency all over the app. If single quotes then we have to use single quotes all over the app for *Javascript* and double quotes for *attributes* like `className` and `props` etc. 

Most of the time, I use the *Airbnb ESlint* code convention to reduce the number of errors on the spot while saving a lot of time.

## Method#5: Integrate Storybook, Fast Visual Testings

Storybook is great when we are building themes. It helps us build and test our component in isolation, by changing its props and responsiveness. It can serve other purposes as well, such as maintaining a component library, series of same designed components, sharing it within the team to get feedback, and so on.

When to use Storybook?

It really depends on requirements and kind of project we are working on. I don't use storybook for small apps or landing pages that consist of couple of screens.

### To Sum Up…

Each of these methods has been practically implemented by myself and has been proven useful to build the UIs faster in ReactJS.

I hope this article will help you to build UIs in ReactJS. If my experience and knowledge that I’ve shared helped you in any way, please comment below.