Build Reusable Components in React

One of the core strengths of React is its component-based architecture, which helps developers build reusable components like a modular and maintainable UI. By creating reusable components, you can enhance efficiency, eliminate redundancy, and maintain consistency throughout your application.

In this article, we’ll explore:
– What makes a component reusable
– Best practices for building reusable components
– Examples of reusable components in action

1. What Makes a Component Reusable?

A **reusable component** can be used across different parts of your application (or even different projects) with minimal modifications. Key characteristics include:

Independent – Should not be tightly coupled with a specific app logic.
Customizable – Should accept props for flexibility.
Encapsulated – Should handle its internal state and styles.
Composable – Can be combined with other components easily.

2. Best Practices for Building Reusable Components

A. Use Props for Customization

Props allow components to accept different values and behave dynamically.

Example:

** A **Button** component with customizable `label`, `color`, and `onClick` event.

const Button = ({ label, color = "blue", onClick }) => {

return (

<button

style={{ backgroundColor: color, padding: "10px", border: "none", color: "#fff" }}

onClick={onClick}

{label}

</button>

);

};

// Usage

<Button label="Click Me" color="red" onClick={() => alert("Button Clicked!")} />

const Button = ({ label, color = "blue", onClick }) => { return ( <button style={{ backgroundColor: color, padding: "10px", border: "none", color: "#fff" }} onClick={onClick} > {label} </button> ); }; // Usage <Button label="Click Me" color="red" onClick={() => alert("Button Clicked!")} />

const Button = ({ label, color = "blue", onClick }) => {
  return (
    <button
      style={{ backgroundColor: color, padding: "10px", border: "none", color: "#fff" }}
      onClick={onClick}
    >
      {label}
    </button>
  );
};

// Usage
<Button label="Click Me" color="red" onClick={() => alert("Button Clicked!")} />

B. Use Default Props and Prop Types

Set default values for props to avoid errors and enhance reusability.

import PropTypes from "prop-types";

const Alert = ({ message, type = "info" }) => {

return <div className={`alert alert-${type}`}>{message}</div>;

};

Alert.propTypes = {

message: PropTypes.string.isRequired,

type: PropTypes.oneOf(["info", "warning", "error"]),

};

import PropTypes from "prop-types"; const Alert = ({ message, type = "info" }) => { return <div className={`alert alert-${type}`}>{message}</div>; }; Alert.propTypes = { message: PropTypes.string.isRequired, type: PropTypes.oneOf(["info", "warning", "error"]), };

import PropTypes from "prop-types";

const Alert = ({ message, type = "info" }) => {
  return <div className={`alert alert-${type}`}>{message}</div>;
};

Alert.propTypes = {
  message: PropTypes.string.isRequired,
  type: PropTypes.oneOf(["info", "warning", "error"]),
};

C. Use Composition Instead of Prop Drilling

Instead of passing props down multiple levels, use **composition**.

Example:** A **Card** component that allows custom content.

const Card = ({ children }) => {

return (

{children}

</div>

);

};

// Usage

<Card>

<h3>Title</h3>

<p>This is a reusable card component.</p>

</Card>

const Card = ({ children }) => { return ( <div style={{ border: "1px solid #ccc", padding: "10px", borderRadius: "5px" }}> {children} </div> ); }; // Usage <Card> <h3>Title</h3> <p>This is a reusable card component.</p> </Card>

const Card = ({ children }) => {
  return (
    <div style={{ border: "1px solid #ccc", padding: "10px", borderRadius: "5px" }}>
      {children}
    </div>
  );
};

// Usage
<Card>
  <h3>Title</h3>
  <p>This is a reusable card component.</p>
</Card>

D. Style Components Properly

Use CSS Modules, Styled Components, or Tailwind CSS for better component styling.

Example:

** Using **Styled Components**

import styled from "styled-components";

const StyledButton = styled.button`

background-color: ${(props) => props.bg || "blue"};

color: white;

padding: 10px;

border: none;

cursor: pointer;

const App = () => <StyledButton bg="green">Click Me</StyledButton>;

import styled from "styled-components"; const StyledButton = styled.button` background-color: ${(props) => props.bg || "blue"}; color: white; padding: 10px; border: none; cursor: pointer; `; const App = () => <StyledButton bg="green">Click Me</StyledButton>;

import styled from "styled-components";

const StyledButton = styled.button`
  background-color: ${(props) => props.bg || "blue"};
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
`;

const App = () => <StyledButton bg="green">Click Me</StyledButton>;

3. Examples of Reusable Components

Component	Use Case
Button	Different UI buttons with various colors, sizes, and actions.
Modal	A reusable pop-up component with content passed as children.
Form Input	Text fields, dropdowns, or checkboxes with validation.
Toast Notification	Display user alerts dynamically.
Card	Reusable container for displaying structured information.

4. Making Components Truly Reusable Across Projects

To maximize reusability:
Store components in a **separate folder (`/components`)**.
Use a **UI library like Storybook** to document reusable components.
Consider publishing common components as an **NPM package**.

Conclusion

By designing reusable React components, you create cleaner, more maintainable, and scalable applications. Following best practices like using props, composition, and modular styling will ensure that your components can be easily reused across projects.

Getting Started with the MERN Stack: A Beginner’s Guide

Also Visit :
http://www.inimisttech.com/