Kaikki haasteet saattavat aluksi näyttää keskeneräisiltä. Niissä on tyhjiä osioita, joihin sinun tulee lisätä tarvittava koodi. Kun kaikki puuttuvat osat on täytetty oikein, valmis koodi näytetään livenä sivulla.

Jokaisessa haasteessa on kaksi apupainiketta:
- **Vihje**: näyttää pieniä vihjeitä ohjauksen tueksi;
- **Ratkaisu**: avaa valmiin version uuteen välilehteen.

Huomio

Voit myös katsoa alla olevan lyhyen videon oppiaksesi käyttämään CodeSandboxia.

## CodeSandboxin käyttö

## Tehtävä: Tuotekortin luominen
Luo yksinkertainen tuotekortti käyttämällä JSX:ää ja renderöi se DOM:iin. Tuotekortin tulee sisältää:
1. Tuotekuva (`img`-elementti).
   - `src`-attribuutin tulee olla yhtä kuin `imageUrl`-muuttuja.
   - `alt`-attribuutin tulee olla merkkijono `Computer`.
   - `width`-attribuutin tulee olla `256`.
2. Tuotteen otsikko (`h3`-elementti).
   - Tekstisisällön tulee olla `Computer`.
3. Tuotteen hinta (`span`-elementti).
   - Tekstisisällön tulee olla `Price: $129.99`.
4. Tuotteen kuvaus (`p`-elementti).
   - Tekstisisällön tulee olla `New Model`.

1. `src`-attribuutin arvona tulee olla `imageUrl`-muuttuja. Käytä aaltosulkeita `{}`.
2. `alt`-attribuutin arvona tulee olla merkkijono `"Computer"`. Sulje se lainausmerkkeihin.
3. `width`-attribuutin arvona tulee olla numero `256`. Käytä aaltosulkeita `{}`.
3. Varmista, että `h3`-, `span`- ja `p`-elementeillä on oikeat arvot.

Tutustu siihen, miten Reactia käytetään dynaamisten käyttöliittymien rakentamiseen komponenttien, JSX:n ja propien avulla. Hallitse tilaa ja sivuvaikutuksia hookien avulla, renderöi listoja ja ehdollisia käyttöliittymiä sekä sovella tyylejä oikeisiin komponentteihin. Ota React-projekti käyttöön Viten avulla ja ymmärrä, miten sovellukset rakennetaan.

Haaste: Elementin Renderöinti Reactissa

CodeSandboxin käyttö

Tehtävä: Tuotekortin luominen