DEV Community

loading...
Cover image for My Top 5 Methods To Develop UIs Faster in ReactJS

My Top 5 Methods To Develop UIs Faster in ReactJS

Abdul Basit
MERN Stack Developer at Orange Fox Labs
Updated on ・4 min read

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
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: 'john@email.com',
      phone: '1234567'
    },
    {
      id: 2,
      name: 'John Doe',
      email: 'john@email.com',
      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 } = e.target
    setUserProfile({ ...userProfile, [name]: value })
  }

  const onSaveProfile = (e) => {
    e.preventDefault()
    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.

Discussion (16)

Collapse
braydentw profile image
Brayden W ⚡️

Good stuff! thanks!

Collapse
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

Collapse
abdulbasit313 profile image
Abdul Basit Author

Thanks. Fixed

Collapse
simpleadam profile image
simpleAdam

"Method#4: Integrate ESlint, Consistency Is The Key"

but how does this make things faster

Collapse
abdulbasit313 profile image
Abdul Basit Author

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

Collapse
simpleadam profile image
simpleAdam

I guess because if you wish to enforce a consistent style then to do that by hand would be a lot slower than using a tool like eslint. I see the argument now.

Thread Thread
abdulbasit313 profile image
Abdul Basit Author

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

Collapse
dev_inikhiya profile image
DEV INIKHIYA

Thanks buddy

Collapse
oyintoboss profile image
oyintoboss

Excellent Write up

Thanks

Collapse
amjedidiah profile image
Jedidiah Amaraegbu

Many thanks

Collapse
andemosa profile image
Anderson Osayerie

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

Collapse
andrewbaisden profile image
Andrew Baisden

Good tips.

Collapse
aalphaindia profile image
Pawan Pawar

Keep sharing !

Collapse
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

Collapse
d1eshi profile image
Diego Silva

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