DEV Community

Cover image for My Top 5 Methods To Develop UIs Faster in ReactJS
Abdul Basit
Abdul Basit

Posted on • Updated on • Originally published at

My Top 5 Methods To Develop UIs Faster in ReactJS

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 (
      <Header />
      <Footer />

export default Layout
Enter fullscreen mode Exit fullscreen mode
  • 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

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: '',
      phone: '1234567'
      id: 2,
      name: 'John Doe',
      email: '',
      phone: '1234567'

export { employess }
Enter fullscreen mode Exit fullscreen mode

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 } =
    setUserProfile({ ...userProfile, [name]: value })

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

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

  return (
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (16)

braydentw profile image
Brayden W ⚡️

Good stuff! thanks!

jamiebradley profile image
Jamie Bradley

Great insight, thank you for sharing. I hope you don't mind me pointing this out but I noticed a typo in the "Searching for wrappers" bullet point:

Let's say if we have a modal on 3 three different places in our app

abdulbasit313 profile image
Abdul Basit

Thanks. Fixed

andrewbaisden profile image
Andrew Baisden

Good tips.

aalphaindia profile image
Pawan Pawar

Keep sharing !

dev_inikhiya profile image

Thanks buddy

amjedidiah profile image
Jedidiah Amaraegbu

Many thanks

oyintoboss profile image

Excellent Write up


andemosa profile image
Anderson Osayerie

Thanks for sharing this. It would greatly help me when next I am building a UI.

d1eshi profile image
Diego Silva

thanks for the information, really I appreciate I think what the comunitty too!

poseidonrage profile image
Baqar Hussain Naqvi

I am new to react, and hell yeah, i am gonna follow these methods.
thanks for throwing light on them, Jazakallah

abdulbasit313 profile image
Abdul Basit

We usually configure eslint with prettier. Prettier does all for us

abdulbasit313 profile image
Abdul Basit

Hmmm.. Good point, for me using eslint means our code will be clean and consistent, that makes development easier.