Hackforge Academy

Explanation

A reusable component in React is a component that can be created once and used multiple times across different parts of an application with different data using props. This reduces duplicate code and improves maintainability.

Code:

// Button.jsx
function Button({ label }) {
  return <button>{label}</button>;
}

export default Button;

Explanation

Reusable components accept props so they can display different content while using the same structure and logic. This makes them flexible and scalable for large applications.

Code:

// Using Button component multiple times
import Button from './Button';

function App() {
  return (
    <div>
      <Button label="Login" />
      <Button label="Register" />
    </div>
  );
}

Explanation

Common reusable components include UI elements like Button, Input, Card, Modal, Navbar, and Table because they appear frequently across multiple pages in an application.

Code:

src/
 ├── components/
 │    ├── Button.jsx
 │    ├── Input.jsx
 │    ├── Card.jsx
 │    └── Navbar.jsx