Alle uitdagingen kunnen standaard onvolledig lijken. Ze bevatten lege secties waar je de vereiste code moet toevoegen. Zodra alle ontbrekende onderdelen correct zijn ingevuld, wordt de volledige code weergegeven op de live pagina.

Elke uitdaging bevat twee hulpkoppen:
- **Hint**: toont kleine aanwijzingen om je te begeleiden;
- **Oplossing**: opent de volledige versie in een nieuw tabblad.

Opmerking

Je kunt ook de korte videotutorial hieronder bekijken om te leren werken met CodeSandbox.

## Werken met CodeSandbox

## Taak: Een productkaart maken
Maak een eenvoudige productkaart met behulp van JSX en render deze naar de DOM. De productkaart moet het volgende bevatten:
1. De productafbeelding (`img`-element).
   - Het `src`-attribuut moet gelijk zijn aan de variabele `imageUrl`.
   - Het `alt`-attribuut moet gelijk zijn aan de string `Computer`.
   - Het `width`-attribuut moet gelijk zijn aan `256`.
2. De producttitel (`h3`-element).
   - De tekstinhoud moet `Computer` zijn.
3. De productprijs (`span`-element).
   - De tekstinhoud moet `Price: $129.99` zijn.
4. De productbeschrijving (`p`-element).
   - De tekstinhoud moet `New Model` zijn.

1. Het `src`-attribuut moet de variabele `imageUrl` als waarde bevatten. Gebruik accolades `{}`.
2. Het `alt`-attribuut moet de tekenreeks `"Computer"` als waarde bevatten. Plaats deze tussen dubbele aanhalingstekens.
3. Het `width`-attribuut moet het getal `256` als waarde bevatten. Gebruik accolades `{}`.
3. Zorg ervoor dat de elementen `h3`, `span` en `p` de juiste waarden hebben.

Ontdek de basisprincipes van het bouwen van gebruikersinterfaces met React. Focus op componenten, JSX, gegevensstroom, toestand en neveneffecten die worden gebruikt in alledaagse React-toepassingen.

Ontdek wat React is en hoe het gebruikersinterfaces rendert. Focus op componenten, JSX-syntaxis en het weergeven van elementen op het scherm.

Verdieping in het doorgeven van gegevens tussen componenten en het aansturen van de UI-uitvoer. Focus op props, conditionele weergave en het weergeven van lijsten met gegevens.

Leer hoe gebruikersinteracties en externe gegevens de gebruikersinterface in de loop van de tijd veranderen. Focus op het beheren van toestand en het afhandelen van neveneffecten met React hooks.

Ontdek gangbare methoden om React-componenten te stylen. Focus op het toepassen van stijlen met inline stijlen en externe CSS.

Leer hoe u een React-project uitvoert en de structuur ervan begrijpt. Focus op het starten van een project met Vite en het navigeren door de projectbestanden.

Uitdaging: Een Element Renderen in React

Werken met CodeSandbox

Taak: Een productkaart maken

Uitdaging: Een Element Renderen in React

Werken met CodeSandbox

Taak: Een productkaart maken