Let's practice writing clean, reusable components in react

🔑 Key Concepts

What are reusable React components? Think of them as building blocks.

They're pieces of code you can use in different parts of your website to save time. They can be anything from simple buttons to complex forms.

Why Use Reusable Components?

They make it easy to add new features and improve your code's scalability. Plus, you can use them in future projects without rewriting.

🧩 How to Write Clean, Reusable React Components

Two key points:

1. Avoid Side Effects: Don't include logic that interacts with external data (like API calls) directly in your component. Instead, pass this logic as props.

Example of a simple but non-reusable button:

const Button = () => {
  return (
    <button>Click Me</button>
  );
}

This button lacks flexibility because the text is hardcoded.

2. Use Props: Props are arguments you pass to a component to customize it.

Example of a better button:

const Button = ({ color, label }) => {
  return (
    <button style={{ backgroundColor: color }}>{label}</button>
  );
}

This button can have different colors and labels, making it more reusable.

Challenge:

Think about how your component might be used in different situations and design it to be flexible.

🍃 Examples of Reusable React Components

1. Buttons: Customize them with different styles and functions.

const Button = ({ color, label, onClick }) => {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {label}
    </button>
  );
};

// Using the Button component
<Button color="blue" label="Click Here" onClick={() => console.log("Button clicked!")} />

2. Navbars: Consistent navigation across your website.

const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="navbar">
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
      {isLoggedIn ? <a href="/profile">Profile</a> : <a href="/login">Login</a>}
    </div>
  );
};

// Using the Navbar component
<Navbar isLoggedIn={true} />

3. Why Avoid API Calls in Components
Including side-effects like API calls in your components reduces reusability. Pass the side-effect as a prop instead:

const SaveButton = ({ onClick, label }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

// Using SaveButton
<SaveButton onClick={saveUser} label="Save User" />
<SaveButton onClick={saveProject} label="Save Project" />

Building components without proper visualization first can be overwhelming. For design, Figma is a fantastic tool used by developers for creating web design components and prototypes. It's popular for its clean UI and collaborative features. you can sign up here for free.

👏 Conclusion

Congrats! You’ve learned how to create clean, reusable React components. They are the foundation of robust React development. The more you practice, the better you'll get at using them in your projects.

If you enjoyed this, follow me on 𝕏 for more front-end development tips.

Read More: The Future of Frontend Development