> Huomio
>
> Kaikki haasteet saattavat aluksi näyttää rikkinäisiltä, koska niissä on tyhjiä kohtia, joihin sinun tulee syöttää tarvittava koodi. Kun täytät nämä kohdat oikein, valmis koodi näkyy live-sivulla.
>
> Lisäksi jokaisessa haasteessa on kaksi painiketta: `Vihje` ja `Ratkaisu`. Napsauttamalla `Vihje` saat pieniä vihjeitä kyseiseen haasteeseen, kun taas `Ratkaisu` avaa uuden välilehden, jossa on valmis ratkaisu.

## Tehtävä: Tuotekortin luominen
Luo tuotekortti ja renderöi se DOM:iin. Tuotekorttiin tarvitaan:
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ä 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.

Opi rakentamaan dynaamisia, interaktiivisia käyttöliittymiä Reactilla. Ymmärrä keskeiset käsitteet, kuten JSX, virtuaalinen DOM ja uudelleenkäytettävä komponenttipohjainen arkkitehtuuri. Hyödynnä tyylittelytekniikoita käyttämällä sisäisiä tyylejä, ulkoista CSS:ää ja CSS-moduuleja skaalautuvaa suunnittelua varten. Hallitse tilaa ja sivuvaikutuksia tehokkaasti React Hookien avulla ja jaa dataa komponenttien välillä Contextin kautta.

Ymmärrä Reactin ydinkäsitteet. Opit tuntemaan JSX:n (JavaScript XML), uudelleenkäytettävien käyttöliittymäkomponenttien rakentamisen sekä elementtien renderöinnin. Lisäksi perehdyt tiedon keräämisen ja ehdollisen renderöinnin merkitykseen React-sovelluksissa. Tämän osion lopussa hallitset Reactin keskeiset periaatteet, mikä luo vahvan pohjan seuraavien osioiden edistyneemmille aiheille.

Tutustu erilaisiin tapoihin lisätä tyylejä React-sovelluksiin. Opit, kuinka tyylejä sovelletaan yksittäisiin komponentteihin, käytetään dynaamisia tyylejä sekä ylläpidetään skaalautuvaa ja ylläpidettävää tyylittelytapaa projekteissasi.

Tehokkaita ominaisuuksia modernissa React-kehityksessä. Hookit mullistavat tapamme kirjoittaa funktiokomponentteja tarjoten tiiviin ja intuitiivisen tavan hallita tilaa ja suorittaa sivuvaikutuksia. Konteksti puolestaan mahdollistaa datan jakamisen komponenttipuun läpi ilman propseja. Hookien ja kontekstin yhdistäminen mahdollistaa tehokkaan tilanhallinnan ja yksinkertaistetun datan jakamisen React-sovelluksissa.

Vaiheittainen opas reaalimaailman React-projektin aloittamiseen. Kehitysympäristön perustamisesta projektin rakenteen ja keskeisten työkalujen ymmärtämiseen saat tiedot ja varmuuden React-matkasi aloittamiseen.

Haaste: Elementin Renderöinti Reactissa

Kuinka käyttää Code Sandboxia

Tehtävä: Tuotekortin luominen

Awesome!

Haaste: Elementin Renderöinti Reactissa

Kuinka käyttää Code Sandboxia

Tehtävä: Tuotekortin luominen