Abdul Basit

Posted on Apr 18, 2021 • Updated on Jan 16 • Originally published at codevertiser.com

My Top 5 Methods To Develop UIs Faster in ReactJS

#javascript #react #beginners #webdev

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.

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:

Create an object there something like this and export it.

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,

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.