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" />

---

🏇 Recommendation: My Clean Code Book (2025)

Anyone can write code (zero). Even AI. But only THOSE who write clean, maintainable code (one) will survive in the software development jobs.

If you’re serious about mastering clean code and taking your programming career to the next level, my book is for you: Clean Code Zero to One. I am offering 50% discount using the code "earlybird" during checkout — only for the first 50 copies! Plus, enjoy a 30-day money-back guarantee — no risk, all reward.

---

👏 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

Comments

[Jotty John]

Cool!!

[Programming with Shahan]

I agree :)