Wat is een component?

Een component in frontend-ontwikkeling is een onafhankelijk, herbruikbaar blok van de gebruikersinterface. Het encapsuleert zijn structuur (HTML), stijl (CSS) en gedrag (JavaScript). Componenten helpen bij het opdelen van complexe interfaces in kleinere, beheersbare delen, wat de leesbaarheid van de code verbetert, en het onderhoud en testen vergemakkelijkt.

Belangrijkste kenmerken:

• Encapsulatie: Logica, markup en styling zijn binnen het component verbonden.
• Herbruikbaarheid: Het component kan in verschillende delen van de applicatie of zelfs in andere projecten worden gebruikt.
• Onafhankelijkheid: Wijzigingen in één component hebben minimale invloed op anderen.
• State en props: Componenten kunnen interne staat (gegevens die kunnen veranderen) hebben en externe gegevens ontvangen via props (eigenschappen).

Voorbeeld van een componentstructuur (React):

// Button.js component
import React from 'react';
import './Button.css'; // Stijlen importeren

function Button(props) {
  return (
    <button className="button-style" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

export default Button;

/* Stijlen in Button.css */
.button-style {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

// Gebruik van de component
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Knop geklikt!');
  };

  return (
    <div>
      <h1>Mijn applicatie</h1>
      <Button label="Klik op mij" onClick={handleClick} />
    </div>
  );
}

export default App;

Het concept van componenten is centraal in moderne JavaScript-frameworks en -bibliotheken zoals React, Vue en Angular.