Props en compositie

Doel: Geef gegevens door met props, stel standaardwaarden in en bouw gebruikersinterfaces door kleine componenten te componeren.

• Props geven gegevens door aan componenten.
• Standaardwaarden via eenvoudige destructurering.
• Compositie en children-slots.

Props zijn alleen-lezeninvoer. Een oudercomponent geeft een kindcomponent weer en levert waarden aan; het kind leest die uit de parameters.

• Wijzig props niet.
• Een component wordt opnieuw weergegeven wanneer oudercomponenten hun status of props wijzigen.

Geef props standaardwaarden door ze in de parameterlijst te destructureren: function Card({ title = "Untitled" }).

• Houdt componenten robuust.
• Voorkomt controles op undefined in de opmaak.

Compositie betekent dat je grotere gebruikersinterfaces opbouwt uit kleinere onderdelen (children/slots). Geef hier voor flexibiliteit en een duidelijke gegevensstroom de voorkeur aan boven overerving.

Voorbeeld: geef props door, stel standaardwaarden in en composeer children binnen een eenvoudige kaartindeling.

Presentatiecomponenten richten zich op indeling en vormgeving; laat ze waar mogelijk door props aangestuurd en zonder status, zodat je ze eenvoudig kunt hergebruiken.

• Klein API-oppervlak (alleen props).
• Stijl ze met klassen; vermijd verborgen bijwerkingen.

Samenvatting: Geef gegevens door met props, stel veilige standaardwaarden in en composeer children om flexibele, herbruikbare gebruikersinterfaces te bouwen; vermijd hiërarchieën op basis van overerving.