Alla utmaningar kan initialt verka ofullständiga. De innehåller tomma sektioner där du behöver lägga till den nödvändiga koden. När alla saknade delar har fyllts i korrekt kommer den kompletta koden att visas på livesidan.

Varje utmaning innehåller två hjälpfunktioner:
- **Tips**: visar små ledtrådar för att vägleda dig;
- **Lösning**: öppnar den färdiga versionen i en ny flik.

Notering

Du kan även titta på den korta videohandledningen nedan för att lära dig hur du arbetar med CodeSandbox.

## Hur du arbetar med Code Sandbox

## Uppgift: Skapa ett produktkort
Skapa ett enkelt produktkort med hjälp av JSX och rendera det till DOM:en. Produktkortet ska innehålla:
1. Produktbilden (`img`-element).
   - `src`-attributet ska vara lika med variabeln `imageUrl`.
   - `alt`-attributet ska vara lika med strängen `Computer`.
   - `width`-attributet ska vara lika med `256`.
2. Produkttitel (`h3`-element).
   - Dess textinnehåll ska vara `Computer`.
3. Produktpris (`span`-element).
   - Dess textinnehåll ska vara `Price: $129.99`.
4. Produktbeskrivning (`p`-element).
   - Dess textinnehåll ska vara `New Model`.


1. Attributen `src` måste innehålla variabeln `imageUrl` som värde. Använd klamrar `{}`.
2. Attributen `alt` måste innehålla strängen `"Computer"` som värde. Omslut med dubbla citattecken.
3. Attributen `width` måste innehålla talet `256` som värde. Använd klamrar `{}`.
3. Kontrollera att elementen `h3`, `span` och `p` har korrekta värden.

Utforska grunderna i att bygga användargränssnitt med React. Fokus på komponenter, JSX, dataflöde, tillstånd och sid-effekter som används i vardagliga React-applikationer.

Utforska vad React är och hur det renderar användargränssnitt. Fokus på komponenter, JSX-syntax och visning av element på skärmen.

Fördjupning i att överföra data mellan komponenter och styra UI-utdata. Fokus på props, villkorlig rendering och rendering av listor med data.

Lär dig hur användarinteraktioner och extern data förändrar användargränssnittet över tid. Fokus på hantering av tillstånd och bieffekter med React hooks.

Utforska vanliga metoder för att styla React-komponenter. Fokus på att tillämpa stilar med inline-stilar och extern CSS.

Lär dig hur du kör ett React-projekt och förstår dess struktur. Fokus på att starta ett projekt med Vite och navigera bland projektfilerna.

Utmaning: Rendera ett Element i React

Hur du arbetar med Code Sandbox

Uppgift: Skapa ett produktkort