Funktiokomponentti

Kuten aiemminkin on jo todettu, niin Reactissa käyttöliittymä toteutetaan komponentteina. Alla on havainnekuva, jossa sovelluksen pääsivulla olevat sisällöt on pilkottu pienempiin komponentteihin.

• Header-komponentti sisältää sivun otsikon. Alasivuilla tämä näyttää hieman erilaiselta.
• Balance-komponentti näyttää käytettävissä olevien sitruunoiden määrän. Tämä määrä kasvaa jokaisella napautuksella.
• Lemon-komponentti sisältää napautettavan kuvan.
• Booster näyttää yhdellä napautuksella kertyvien sitruunoiden määrän.

Seuraavaksi toteutamme projektin ensimmäisen komponentin ja otamme sen käyttöön. Lähdemme toteuttamaan sovellusta keskeisimmästä asiasta, pelin napauteltavasta sitruunan kuvasta eli Lemon-komponentista.

1. Luo src-kansion alle uusi kansio ja anna sen nimeksi components. Tähän kansioon lisäämme projektin aikana toteutettavat komponentit.

2. Luo edellä luotuun components-kansioon uusi Lemon.jsx -niminen tiedosto ja liitä sen sisällöksi seuraava ohjelmakoodi.

   import lemon from '../assets/lemon-big.svg'
   
   function Lemon() {
     return (
       <div className="lemon">
         <img src={lemon} alt="lemon" />
       </div>
     );
   }
   
   export default Lemon;
   

   Tämä komponentti on rakenteeltaan yksinkertaisimmasta päästä. Ensimmäisellä rivillä tuodaan (import) käytettävä kuva. Tämän jälkeen esitellään Lemon-niminen komponentti, joka palauttaa kuvan div-elementtiin käärittynä.

   Kuvat on helpointa liittää tässä esimerkissä näkyvällä tavalla, sillä kuvan sijainti tiedetään käännösvaiheessa ja osoiteviittaus kuvaan tulee siksi oikein.

   Komponentin palauttama "HTML-koodi" on ihan normaalia kolmea poikkeusta lukuunottamatta:

   • class-sana on varattu toiseen tarkoitukseen, tästä johtuen elementtien luokkamääritykset tehdään className-sanan kanssa. Muuten luokkamääritykset toimivat samalla tavalla, div-elementti kytketään lemon-nimiseen luokkaan.
   • Kuvan src-määritteen arvo on annettu aaltosulkeissa. JSX-merkkauksen sisällä JavaScript-sisältöön viitataan nimenomaan aaltosulkeiden avulla. Tässä yhteydessä lemon on koodin alussa tuotu kuva eli se on koodin näkökulmasta JavaScript-olio. Kuvan lähteeksi määritellään tämä kyseinen olio.
   • img-elementin lopussa on ns. lopettava /-merkki. JSX-merkkaus on pohjimmiltaan XML-merkkausta. XML-merkkauksessa pitää kertoa erikseen, että elementille ei ole lopetustagia sijoittamalla aloitustagin loppuun /-merkki. Tämä sama sääntö koskee kaikkia elementtejä, joista merkataan ainoastaan aloitustagi.

3. Avaa src-kansiossa oleva App.jsx -niminen tiedosto ja tee siihen seuraavat muutokset:

   • Lisää ohjelmakoodin alkuun seuraava koodirivi:

     import Lemon from './components/Lemon';
     

     Tämä tuo edellä luomamme Lemon-komponentin niin, että voimme käyttää sitä jatkossa. Huomaa, että jatkossa käytetään import-sanan perässä olevaa nimeä. Periaatteessa tässä nimeksi voisi antaa minkä tahansa, sillä ei ole merkitystä, kunhan käyttää kutsun yhteydessä samaa määritteltyä nimeä.

   • Korvaa TODO Lemon Clicker -teksti seuraavalla koodilla:

             <Lemon />
     

     Komponenttia kutsutaan ihan samalla tavalla kuin mitä tahansa HTML-elementtiä. Huomaa tagin lopussa oleva /-merkki, tälle komponentille ei tule lopetustagia.

4. Avaa sovellus selaimessa, sinne on nyt ilmestynyt iso sitruunan puolikas.

   
   
   

   Jos klikkaat tätä kuvaat, niin se pienenee ja palautuu takaisin alkuperäiseen kokoo aina kun klikkaat kuvaa. Tämä toiminnallisuus on määritelty CSS-tyylimääritteissä animaationa, joka on kytketty kuvaan silloin, kun se on aktiivinen.

   
   
   

Edellä on esimerkki komponentista, jonka ulkoasu on aina samanlainen. Useasti sisältö kuitenkin muuttuu jollakin tavalla, toteutetaan seuraavaksi sisällöltään muuttuva komponentti.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää Lemon-komponentin"

lisää Lemon-komponentin -commit