Re-usable components and utility functions saved ME!

Hello to you fellow dev! The title of the post says it all but if it doesn't to you let's dive right into it.

I've had times where when I started a project in React I would at most create files for the pages I need to allow navigation. This means that all the utility functions I created was inside my pages including the http requests I made. For a small project it went smooth until I tried to clone a popular website.

The Turning Point

I started cloning the web app expecting to finish it in just 3 weeks. What's funny is that I finished the not good-looking app in almost 2 months all because of improper organization and not using re-usable components and utility functions. That's when I decided to start using re-usable components and utility functions from then.

Understand re-usable components

A re-usable component in simple words is a component that you can use in many different places and it can be given some props if you know them, to give it the adaptation and flexibility in those many scenarios.

What do you mean by utility functions also?

Utility functions are functions that you put aside and you are sure that you will need them many times throughout the whole project. An example of such functions are http requests, data-modification functions and many others.

Why use re-usable components and utility functions

I have stated it before and I'll repeat it again ,use utility functions and destruct your project as you can as it will save your time and prevent you from burn-out and frustration, believe me.

Here's another story

I started building a resume builder project that seemed somehow hard to me but due to proper organization after a week I am 85% almost finished with the project.

Have a look on my current folder structure of that project:

Note:

• I have the src folder with subfolders.
• The folders are :
  • Components folder which contains re-usable components like navbar, input, imageCards, etc.
  • redux which contains all things related to redux from store to actionCreators.
  • utils folder which contains the utility functions we've been talking about like the one I have called generateYears.ts which help me get years , months and days for my select options.

So, this was a short blog but keep that in mind because someone once said : "Think twice before programming or program twice before you start thinking."

Thank You! A like would help so much.