The Art Of Reusable Components

Every single month (or less )a new JS framework is shipped, however, a few years ago after a period of agony for frontend developers, ReactJS was born. ReactJs is one of the fastest growing Javascript Libraries in history (Thanks to JS hype) but are we utilizing the core react functionality to full capacity? Your guess is as good as mine, NO! The usefulness of ReactJs is in its strength to integrate reusable components in a project hence eliminating the frequent violation of the Don’t Repeat Yourself (DRY)principle (spaghetti code). Modular reusable code not only creates an appeal to the reader, or developer but also reduces the amount of code that the developer has to write.

While the focus of reusability to many developers lies is on large components that are used by more than one route, it is also possible for small components on the same route to enjoy the modularity of being fully reusable. Reusability means that if for example, you had a button, you do not have to define any other button but instead reuse the button for all other reasons that you may require, this is through customization of the button props. Props are arbitrary inputs to a component and they define how a ReactJS element should appear on the screen. In ReactJs passing in props is what determines if various properties of a particular component can be changed or reusable. In illustrating how Reusable components should work we will use a Card component and a Button component that we will customize to produce cards and buttons of various characteristics all taken from one reusable component. sounds cool?

The Card component holds a skeleton of what a card should look like i.e all the props that we should pass to the card and the general structure of the card. The skeleton is what we will modify to produce the desired component output. The properties (props) passed to the Card and Button components will be used to modify the components to the liking of the user and this is done depending on the desired end result. Defining what props the component should accept gives the component the flexibility of having different properties when it is rendered. {props.propName} is used as the standard definition of props in functional components.

If at all a user requires a card with a border classcard border-primary or even a button from the bootstrapbtn btn-primary those are the props that will be passed ontoprops.cardBorder andprops.className in the card and button components respectively. Thecard text,card header and even thecard images are totally customizable hence ensuring that the card component can always be recreated by passing down the required props. The reusability also applies to the button component which is called by theprops.children property of the reusable card component.

Reusability of ReactJs components not only increases readability but it also eliminates the chances of errors and code bugs as errors can be traced back to one point of failure (The parent component), and once resolved it works for all the components.

One catch to reusable components is that the user is at liberty to make the choices of how much reusable their components can become. For scalability purposes the higher the reusability levels the better for the codebase and this will trickle down to the developer happiness levels (assuming nothing else at the time is diluting this state). It takes less effort to debug a simple single component rather than it would take ten components that are doing something similar or closely similar.

From a simple card and button, little or no effort and usage of DRY principles you can be able to build and ship great features that are scalable. ReactJs was built for reusability and if one cannot be able to reuse the basic UI components then you might need to rethink your development strategy and whether you are using ReactJS for the right reasons.

The image above is an illustration of the three components built from the Reusable Bootstrap Card and Button. Zero hustle involved!. The only different things among the components are the props passed down from the main Higher Order Component that calls each of the cards including the profile section.

Software development is an art and it is not all about writing code, it is all about writing good code. As I love to say software development is not about getting to the end goal, it is a journey and getting to that understanding makes life more interesting as you strive to not only get to the end but also understand everything that will lead you to the end of your goal. Happy Coding!