> Obs
>
> Alla utmaningar kan initialt verka trasiga eftersom de innehåller tomma avsnitt där du behöver fylla i nödvändig kod. När du korrekt fyller i dessa tomma avsnitt visas den kompletta koden på den aktiva sidan.
>
> Dessutom har varje utmaning två knappar: `Hint` och `Solution`. Genom att klicka på `Hint` får du små ledtrådar för den aktuella utmaningen, medan valet av knappen `Solution` öppnar en ny flik med den färdiga utmaningen.

## Uppgift: Skapa ett produktkort
Skapa produktkortet 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).
   - Textinnehållet ska vara `Computer`.
3. Produktpris (`span`-element).
   - Textinnehållet ska vara `Price: $129.99`.
4. Produktbeskrivning (`p`-element).
   - Textinnehållet ska vara `New Model`.

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

Lär dig att bygga dynamiska, interaktiva användargränssnitt med React. Förstå kärnkoncept som JSX, den virtuella DOM:en och återanvändbar komponentbaserad arkitektur. Tillämpa stiltekniker med inline-stilar, extern CSS och CSS-moduler för skalbar design. Hantera tillstånd och bieffekter effektivt med React Hooks och dela data mellan komponenter med Context.

Få en förståelse för de grundläggande principerna i React. Du kommer att lära dig om JSX (JavaScript XML), att bygga återanvändbara UI-komponenter och rendera element. Dessutom kommer du att utforska vikten av datainsamling och villkorlig rendering i React-applikationer. Efter denna sektion har du en solid grund i Reacts centrala koncept, vilket förbereder dig för mer avancerade ämnen i de kommande sektionerna.

Utforska olika metoder för att lägga till stilar i React-applikationer. Du kommer att lära dig hur man applicerar stilar på enskilda komponenter, använder dynamiska stilar och upprätthåller en skalbar och underhållbar stilhantering i dina projekt.

Kraftfulla funktioner inom modern React-utveckling. Hooks revolutionerar hur vi skriver funktionella komponenter genom att erbjuda ett koncist och intuitivt sätt att hantera tillstånd och utföra bieffekter. Context möjliggör delning av data genom komponentträdet utan prop-drilling. Kombinationen av hooks och Context möjliggör effektiv tillståndshantering och förenklad datadelning i React-applikationer.


Steg-för-steg-guide om hur du startar ett verkligt React-projekt. Från att konfigurera din utvecklingsmiljö till att förstå projektorganisation och viktiga verktyg får du kunskap och självförtroende att påbörja din React-resa.

Utmaning: Rendera ett Element i React

Hur man arbetar med Code Sandbox

Uppgift: Skapa ett produktkort

Awesome!

Utmaning: Rendera ett Element i React

Hur man arbetar med Code Sandbox

Uppgift: Skapa ett produktkort