# Tehtävä

Luo yksinkertainen sosiaalisen median julkaisukortti, jossa on toimiva tykkäyslaskuri käyttäen `useState`-hookia.

Komponentin tulee sisältää:

1. Tilamuuttuja nimeltä `likes`. Sen alkuarvon tulee olla `120`.

2. Otsikko (`h2`-elementti). Sen tekstisisällön tulee olla `Exploring Iceland`.

3. Kappale (`p`-elementti). Sen tekstisisällön tulee olla `One of the most beautiful trips I've ever had.`

4. Toinen kappale (`p`-elementti). Sen tulee näyttää `Likes:` ja nykyinen `likes`-arvo.

5. Painike (`button`-elementti). Sen tekstisisällön tulee olla `Like Post`.

6. Kun painiketta klikataan, `likes`-tilaa kasvatetaan `1`.

## Aloituskoodi
Avaa alla oleva aloitusprojekti ja täydennä komponentin puuttuvat osat.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-05-starter-build-a-social-media-post-like-button?file=src%2FApp.jsx)



## Ratkaisu

Voit verrata tulostasi lopulliseen ratkaisuun alla.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-05-solution-build-a-social-media-post-like-button?file=src%2FApp.jsx)

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ä.

Mikä hook on tarkoitettu tilan hallintaan funktiokomponentissa?

Milloin `useEffect`-hook suoritetaan oletuksena (ilman riippuvuuslistaa)?

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: Rakenna sosiaalisen median julkaisun tykkäyspainike

Tehtävä

Aloituskoodi

Ratkaisu