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

1. Luo komponenttiin `div`-elementti käyttämällä `<div>...</div>`.
2. Jos haluat välittää `props.children` tekstisisällöksi, sijoita se `{...}`-merkintöjen sisään ja aseta `props.children`. Esimerkki: `<div>{props.children}</div>`.
3. Lisää `div`-elementille luokan nimi käyttämällä `className`-attribuuttia ja aseta se arvoon `alert`. Esimerkki: `className="alert"`.
4. Tuo tyylitiedosto `index.js`-tiedostoon käyttämällä `import`-lausetta ja määritä oikea polku tiedostoon. Esimerkki: `import './index.css'`.
5. Lisätäksesi tyylejä `div`-elementille, käytä luokkavalitsinta `.alert` ja lisää tehtävän mukaiset tyylit.

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

Tehtävä

Haaste: Tyylittele React-sovellus

Tehtävä