In React vormen componenten de fundamentele bouwstenen van een gebruikersinterface. Ze stellen ontwikkelaars in staat om onafhankelijke, herbruikbare delen van de gebruikersinterface te creëren die gecombineerd kunnen worden tot grotere UI-elementen.

Een React-app kan worden gezien als een boom van componenten, waarbij de bovenliggende component de wortel is. Elke component is verantwoordelijk voor het renderen van JSX-markup en het definiëren van de gewenste HTML-structuur die in de Browser DOM wordt weergegeven.

Functionele Componenten

Functionele componenten zijn JavaScript-functies die JSX retourneren om de structuur en inhoud van een UI-element te definiëren. Ze vertegenwoordigen de moderne manier om React-apps te bouwen en worden aangeduid met hoofdletters, zoals Product of User, om ze te onderscheiden van standaard HTML-elementen zoals div of span.

Functionele componenten bieden verschillende voordelen:

• Minder Boilerplate: Functionele componenten verminderen boilerplate-code, waardoor ze beknopter en eenvoudiger te gebruiken zijn;
• Eenvoudiger te Begrijpen: Ze zijn eenvoudiger te begrijpen, vooral voor ontwikkelaars die nieuw zijn met React;
• Eenvoudiger te Testen: Functionele componenten vergemakkelijken het testen vanwege hun overzichtelijke aard;
• Geen Context (this): In tegenstelling tot klassecomponenten maken functionele componenten geen gebruik van context (this), wat de code vereenvoudigt. Hier volgt een voorbeeld van een functionele component:

const Product = () => (
  <div>
    <h2>HolaFood</h2>
    <p>Price: $19.99</p>
    <button type="button">Add to Cart</button>
  </div>
);

In dit voorbeeld is Product een functioneel component dat een productkaart weergeeft.

Functionele componenten vormen het grootste deel van de structuur van een React-app en dienen als essentiële bouwstenen voor het creëren van gebruikersinterfaces.