Componenten

Componenten zijn de bouwblokken van elke React applicatie. Tot nu toe hebben we altijd gebruik gemaakt van 1 component: de App component. We zouden kunnen blijven werken met 1 component en daar alles in plaatsen, maar zoals alle software systemen is dit geen goed idee. We willen de applicatie opsplitsen in kleine herbruikbare blokjes. Deze herbruikbare blokjes noemen we in react: Componenten.

We gaan even terug naar onze lijst applicatie kijken. We gaan hier onze eerste opsplitsing maken in een nieuw component: de List component.

import React from 'react';

const List = () => {
  return (
      <div>{games.map((game: Game) => {
        return <div key={game.id}>
                  <div>{game.name}</div>
                  <div>{game.releaseYear}</div>
                  <div>{game.sales}</div>                  
               </div>
      })}
      </div>
  );
}

Je ziet hier dat we gewoon terug een nieuwe functie aanmaken die een stuk van de JSX-code teruggeeft als return waarde. We hebben deze gewoon verplaatst van het App component naar de List component. In react noemen we een functie die JSX-code teruggeeft een component.

Omdat we deze code hebben verplaatst naar de nieuwe component moeten we ook nog aangeven in onze Appcomponent dat we deze component willen tonen. Dit doen we aan de hand van de <ComponentName/> syntax. Je merkt hier op dat we hier blijven werken met de HTML-achtige syntax. Het lijkt een beetje op een eigen HTML tag hebben aangemaakt.

const App = () => {
  return (
    <div>
      <h1>Welcome to the H2O Game shop</h1>
      <List/>
    </div>
  );
}

Heel gelijkaardig kunnen we nu ook de header als een eigen component gaan maken als we dit willen.

const Header = () => {
  return (
    <h1>Welcome to the H2O Game shop</h1>
  );
}

en dan passen we de App component verder aan zodat deze ook de Header component zal gebruiken.

const App = () => {
  return (
    <div>
      <Header/>
      <List/>
    </div>
  );
}

In javascript zijn er meerdere manieren om een functie aan te maken. Als je door het internet zoekt naar voorbeeld code zal je ongetwijfeld ook de function syntax tegen komen. Deze kan in ons geval meestal exact gebruikt worden als vervanging van de arrow notatie. Zo kan het Header Component ook geschreven worden als

function Header() {
  return (
    <h1>Welcome to the H2O Game shop</h1>
  );
}