Kaikki haasteet saattavat aluksi näyttää keskeneräisiltä. Niissä on tyhjiä osioita, joihin sinun tulee lisätä vaadittu koodi. Kun kaikki puuttuvat osat on täytetty oikein, valmis koodi näkyy live-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.

## Code Sandboxin 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 muuttuja `imageUrl`.
   - `alt`-attribuutin tulee olla merkkijono `Computer`.
   - `width`-attribuutin tulee olla `256`.
2. Tuotteen otsikko (`h3`-elementti).
   - Sen tekstisisällön tulee olla `Computer`.
3. Tuotteen hinta (`span`-elementti).
   - Sen tekstisisällön tulee olla `Price: $129.99`.
4. Tuotteen kuvaus (`p`-elementti).
   - Sen tekstisisällön tulee olla `New Model`.

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

Tutustu Reactin käyttöliittymien rakentamisen perusteisiin. Keskity komponentteihin, JSX:ään, tietovirtaan, tilaan ja sivuvaikutuksiin, joita käytetään jokapäiväisissä React-sovelluksissa.

Tutustu siihen, mitä React on ja miten se renderöi käyttöliittymiä. Keskity komponentteihin, JSX-syntaksiin ja elementtien näyttämiseen näytöllä.

Syvenny tiedon välittämiseen komponenttien välillä ja käyttöliittymän ulostulon hallintaan. Painopisteenä propsit, ehdollinen renderöinti ja tietolistojen renderöinti.

Opi, miten käyttäjän vuorovaikutukset ja ulkoiset tiedot muuttavat käyttöliittymää ajan myötä. Keskity tilan hallintaan ja sivuvaikutusten käsittelyyn React-hookien avulla.

Tutustu yleisimpiin tapoihin tyylittää React-komponentteja. Keskity tyylien lisäämiseen käyttämällä sisäisiä tyylejä ja ulkoista CSS:ää.

Opi suorittamaan React-projekti ja ymmärtämään sen rakenne. Keskity projektin käynnistämiseen Vite-työkalulla sekä projektitiedostojen selaamiseen.

Haaste: Renderöi Elementti Reactissa

Code Sandboxin käyttö

Tehtävä: Tuotekortin luominen

Haaste: Renderöi Elementti Reactissa

Code Sandboxin käyttö

Tehtävä: Tuotekortin luominen