React-komponentit

Aikaisemmin todettiin, että React on käyttöliittymien toteuttamiseen luotu kirjasto, sen avulla voi toteuttaa sovellusten lisäksi myös kotisivuja. Reactissa kaikki rakentuvat komponenttien ympärille. Komponenttia voidaan ajatella yksittäiseksi rakennuspalaksi, joka toteuttaa käyttöliittymästä (tai sivustosta) jonkin pienen kokonaisuuden.

Komponentteja voidaan ajatella tavallaan HTML-kielen laajennukseksi, niillä voidaan esimerkiksi paketoida jokin elementtikokonaisuus (kuten esimerkiksi avatar) yhdeksi loogiseksi kokonaisuudeksi, jota sitten käytetään sopivissa tilanteissa. Samoin kuin HTML-elementtejä voidaan sijoittaa toisten sisälle, niin React-komponenttien voidaan käyttää muita komponentteja.

Toteutetaan ensimmäinen, hyvin alkeellinen React-komponentti Avatar.

Siistitään ensin projektipohjasta ylimääräiset asiat pois. Avaa src-kansiossa oleva App.jsx-tiedosto ja korvaa sen sisältö seuraavalla ohjelmakoodilla.
```
import './App.css'

// TODO Avatar-komponentti

function App() {
  return (
    <div>
      TODO Avatar-komponentin kutsu
    </div>
  )
}

export default App
```
Tämän muutoksen jälkeen selainikkuna on muuten tyhjä, mutta sen keskellä lukee teksti TODO Avatar-komponentin kutsu.
Hae jokin sopiva profiilikuva ja tallenna se src/assets-kansioon nimellä profiili.png. Jos käyttämäsi kuvan tiedostomuoto on jokin muun kuin PNG, niin muuta tiedostopääte vastaamaan sitä.

Tässä esimerkissä profiilikuva on haettu Open Peeps -sivustolta, josta saa vapaasti käyttöönsä huikean määrän erilaisia profiilikuvia.

Tämä profiilikuva löytyy tästä linkistä.
Sijoita seuraavaksi // TODO Avatar-komponentti -tekstin paikalle seuraava ohjelmakoodi:
```
import profileimage from './assets/profiili.png';

function Avatar() {
  return (
    <img className="avatar" src={profileimage} alt="" />
  );
}
```
import-rivi tuo ensin komponentissa käytettävän kuvan JavaScriptin puolella sellaiseksi asiaksi, että se voidaan sijoittaa suoraan img-elementin kuvaksi. Tätä tapaa käytetään silloin, kun ohjelmakoodissa liitettävä kuva on aika sama. Myöhemmin tulemme käyttämään toista menetelmää silloin, kun käytettävä kuva riippuu tilanteesta.

Tämän jälkeen esitellään ihan tavallinen Avatar-niminen funktio, joka ei saa parametrina mitään ja joka palauttaa yksinkertaisen img-elementin. Tarkkaan ottaen return-lauseen sisällä oleva img-elementti ei ole JavaScript-koodia, vaan sen JSX-laajennusta. Huomaa, että edellä muokatun tiedoston pääte on myös jsx. JSX mahdollistaa HTML-kielen kaltaisen merkkauksen JavaScript-koodin keskellä, tähän palaamme vielä tarkemmin myöhemmin.
Kutsutaan tätä komponenttia seuraavaksi App-komponentin sisällä. Muuta TODO Avatar-komponentin kutsu -tekstin paikalle seuraava koodirivi. Tallenna viimeistään tässä vaiheessa tekemäsi muutokset.
```
      <Avatar />
```
Tämän seurauksena selainikkukaan ilmestyi iso profiilikuva, sillä kuvalle ei ole vielä määritelty mitään CSS-tyylejä.
Lisätään seuraavaksi komponentille CSS-tyylimääritteet. Lisää src-kansion App.css-tiedoston loppuun seuraavat tyylimääritteet.
```
.avatar {
  width: 8em;
  height: 8em;
  background-color: cadetblue;
  border-radius: 50%;
  object-fit: cover;
  margin: 1em;
}
```
Tämä määrittelee avatar-luokalle seuraavat tyyliasetukset:
- Määritellään elementin leveydeksi ja korkeudeksi kahdeksan kirjaimen kokoa.
- Määritellään kuvan taustaväriksi sinervän vihreä. Taustaväri näkyy silloin kun kuvassa on läpinäkyviä kohtia, kuten esimerkkikuvassa.
- Pyöristetään reunat niin, että laatikosta tulee ympyrä. Tämä edellyttää, että kuvan leveys ja korkeus ovat samat.
- Viimeisenä on määritys, joka sijoittaa kuvan niin, että se täyttää koko ympyrän. Tällä asetuksella saadaan kuvan kuvasuhde säilymään.Jos kuva on kuvan korkeutta kapeampi, niin kuvaa suurennetaan niin, että se täyttää koko leveyden. Tällöin kuvan ylä- ja alareunasta leikkautuu osa pois.
- Kuvan ympärillä on yhden kirjaimen kokoinen marginaali.
Tyylimäärittelyiden jälkeen selainikkuna näyttää seuraavanlaiselta.
Lisätään sivulle vielä kaksi samanlaista avataria lisää. Muuta src-kansion App.jsx-tiedoston App-komponentti seuraavanlaiseksi.
```
function App() {
  return (
    <div>
      <Avatar />
      <Avatar />
      <Avatar />
    </div>
  )
}   
```
Tämän muutoksen jälkeen sivulla on nyt kolma samanlaista avataria vierekkäin.

Tässä vaiheessa emme tutustu vielä siihen, miten avatarin sisälle saadaan eri profiilikuvat. React mahdollistaa myös sen, mutta seuraavaksi tutustutaan JSX-laajennukseen.

React 101

React-komponentit