## Tehtävä
Seuraavaksi luomme `Alert`-komponentin, joka renderöi kaikki sille annetut lapset 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 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. Aseta `props.children` tekstisisällöksi sijoittamalla se `{...}`-merkintöjen sisään ja käyttämällä `props.children`. Esimerkki: `<div>{props.children}</div>`.
3. Lisää luokan nimi `div`-elementtiin käyttämällä `className`-attribuuttia ja aseta arvoksi `alert`. Esimerkki: `className="alert"`.
4. Tuo tyylitiedosto `index.js`-tiedostoon käyttämällä `import`-lausetta ja määrittämällä oikea polku tiedostoon. Esimerkki: `import './index.css'`.
5. Käytä luokan valitsinta `div` ja lisää tehtävän mukaiset tyylit `.alert`-elementtiin.

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: Ulkoisen CSS:n Käyttäminen React-sovelluksessa

Tehtävä

Awesome!

Haaste: Ulkoisen CSS:n Käyttäminen React-sovelluksessa

Tehtävä