Componenten: een bouwpakket voor het web

Ik laat je zien: je eerste eigen component

Een component is een functie met een hoofdletter die JSX teruggeeft. Het is gebruikelijk om elk in een eigen bestand te zetten. Maak het bestand src/Header.jsx:

function Header() {
  return (
    <header>
      <h1>FC Riverside</h1>
      <nav>
        <a href="#team">Team</a>
        <a href="#results">Results</a>
      </nav>
    </header>
  );
}

export default Header;

En gebruik hem in src/App.jsx:

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to our club's website!</p>
      </main>
    </div>
  );
}

export default App;

• import ... from ... – “leen een component uit een ander bestand.” Het hoort bij export default.
• <Header /> – een eigen tag! De hoofdletter vertelt React: dit is geen HTML, het is mijn component.

Herinner je de pijn uit Level 1 – het menu op elke pagina gekopieerd? Die is weg. De header bestaat één keer, in één bestand.

Ik laat je zien: een component met verwisselbare data (props)

Een stempel met verwisselbare letters – data gaat naar een component als props (properties). Bestand src/PlayerCard.jsx:

function PlayerCard({ name, position, number }) {
  return (
    <div className="card">
      <h3>{name} · #{number}</h3>
      <p>{position}</p>
    </div>
  );
}

export default PlayerCard;

Gebruikt in App.jsx:

import PlayerCard from './PlayerCard.jsx';

<PlayerCard name="Jake" position="goalkeeper" number={1} />
<PlayerCard name="Alex" position="midfield" number={8} />
<PlayerCard name="Tom" position="forward" number={9} />

Props schrijf je als HTML-attributen. Tekst tussen aanhalingstekens, getallen en JavaScript in {}. De component pakt ze uit in ({ name, position, number }) en gebruikt ze.

Ik laat je zien: een lijst uit een array

Drie kaarten met de hand – prima. Maar twintig? Zet de data in een array en gebruik .map():

const players = [
  { name: "Jake", position: "goalkeeper", number: 1 },
  { name: "Matt", position: "defense", number: 4 },
  { name: "Alex", position: "midfield", number: 8 },
  { name: "Tom", position: "forward", number: 9 },
];

function App() {
  return (
    <div className="cards">
      {players.map((player) => (
        <PlayerCard
          key={player.number}
          name={player.name}
          position={player.position}
          number={player.number}
        />
      ))}
    </div>
  );
}

.map() loopt door de array en maakt voor elk item een kaart. Speler toevoegen = een rij aan de array. Geen HTML kopiëren. (key is een hulp voor React om kaarten uit elkaar te houden – zet iets unieks erin.)

Nu jij 💪

Bouw een componentenkit voor je eigen project in je React-project:

1. Een Header-component met de naam van je website en menu.
2. Een kaartcomponent met props die bij je project passen: 🏫 TeacherCard (naam, vak) · 🙋 HobbyCard (naam, beschrijving) · 🌍 TripCard (plaats, beschrijving) · ⚽ PlayerCard (naam, positie, nummer).
3. Zet de data in een array en render met .map() – minstens 4 items.
4. Kopieer je kaartstijlen van je oude website naar src/App.css – je CSS-kennis blijft ongewijzigd!

Wat neem je mee uit deze les

• Een component = een bestand + een functie met hoofdletter + export default; gebruikt via import en <Tag />.
• Props = verwisselbare data van een component: <Card name="Jake" number={1} />.
• Lijsten teken je met array.map() – data stuurt het scherm.

© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden