## Tehtävä
Seuraavaksi luodaan `Alert`-komponentti, joka renderöi kaikki sille annetut lapset (children) ja lisää niihin tietyt tyylit. Tehtävä:
1. Luo `Alert`-komponentti, jonka sisällä on `div`-elementti.
2. `div`-elementillä tulee olla luokan nimi `alert`.
3. `div`-elementin sisällöksi asetetaan `children`-prop.
4. `div`-elementille lisätään seuraavat CSS-tyylit.
```css
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
```

1. Luo komponenttiin `div`-elementti käyttämällä `<div>...</div>`.
2. Aseta `props.children` tekstisisällöksi sijoittamalla se `{...}`-sisään ja käyttämällä `props.children`. Esimerkki: `<div>{props.children}</div>`.
3. Lisää luokan nimi `div`-elementille käyttämällä `className`-attribuuttia ja asettamalla arvoksi `alert`. Esimerkki: `className="alert"`.
4. Tuo tyylitiedosto `index.js`-tiedostoon `import`-lauseella ja määritä oikea polku tiedostoon. Esimerkki: `import './index.css'`.
5. Lisää tyylit `div`-elementtiin käyttämällä luokkavalitsinta `.alert` ja lisää tehtävän mukaiset tyylit.

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: Tyylittele React-sovellus

Tehtävä