React on monelle tuttu nimi, mutta harva osaa silti tarkasti kuvailla mikä React oikein on ja mitä sillä tehdään. Typistettynä, React on interaktiivisten käyttöliittymien tekemisen kultamikiviä. Tämä artikkeli pyrkii kuitenkin selventämään mikä on React ja mitä hyötyä sen käytöstä ja hallitsemisesta on yksinkertaistavien esimerkkien kautta. 

Tilan muutokset

React on JavaScript-kirjasto, joka on pääasiallisesti tehty käsittelemään tilan muutosten hallinnoimiseen liittyvää ongelmaa. Reactin loi Facebookin työntekijä John Walke ja sen suosio perustuu sen yksinkertaisuuteen ja joustavuuteen.

Tilalla tarkoitetaan sovelluksen sen hetkisessä tilassa vallitsevaa totuutta. Esimerkiksi, kun vierailet verkkosivulla, sivusto aukeaa tietyssä “aloitustilassa”. Verkkosivulla ollessasi klikkaat painiketta, joka avaa menun. Menun ollessa auki sovellus on uudessa tilassa. Sivulla on mahdollisuus tykätä asioista, painat tykkäysnappia ja ikoni vaihtaa väriään tykkäyksen merkiksi. Nyt sovellus on jälleen uudessa tilassa. 

Kuvitellaan, että sivun nurkassa on laskuri indikoimassa tykkäysten määrää, jolloin sivua tehdessä on loogista, että aina tykkäyksen ilmetessä tykkäysmäärä päivittyy.  Muistetaan, että jokainen tykkäys luo sivustolle uuden tilan, näin ollen erilaiset yhdistelmien ja permutaatioiden ja niiden tilojen perässä pysyminen muuttuu todella monimutkaiseksi. 

Tässä kohtaa React astuu kuvioihin. React tekee tilojen hallinnoimisesta helpompaa varastoimalla “keskeisen totuuden” ja antamalla tämän ikään kuin valua alas eri komponentteihin, jotka muodostavat sovelluksen. Tämä tehdään sen sijaan että pyrittäisiin hallinnoimaan prosessia, jossa kerrotaan jokaiselle komponentille erikseen mikä niiden ominainen tehtävä on. Nämä komponentit asetetaan ikään kuin heijastamaan senhetkistä tilaa. 

React on “selittävä”, siten että logiikkasi päätavoite on kertoa ohjelmalle “Sen kuuluisi näyttää tältä”. Vastakohtana taas “määräävä”,  joka on kuin kertoisi ohjelmalle “Sinun kuuluisi tehdä näin”. 

Yksinkertaistava maalausesimerkki 

Kuvitellaan, että maalaat ja haluat maalaukseen keltaisen taustan, mutta käytössäsi on vain kolme väriä; punainen, vihreä ja sininen. 

JavaScriptillä lisäisit ensin punaisen värin, joka saa värin muuttumaan. Se näyttää erilaiselta nyt; sen tila on muuttunut. Seuraavaksi, lisäät hieman vihreää ja väri muuttuu keltaiseksi kuten myös maalauskankaan tila. Hienoa, tavoite saavutettu. 

React.js:llä taas voit sekoittaa kaikki värit etukäteen käyttäen “maalipyttyä”, jota React kutsuu komponentiksi, juuri ennes kuin kanvaasi (ja tila) päivittyy. Jälleen sama tavoite saavutettu.

Molemmat tavat ovat toimivia, mutta on huomattavasti hankalampaa lisätä jokaista väriä yksitellen ja pysyä perässä kankaan muuttuvista väreistä. Kun taas vaihtoehtoisesti on paljon helpompaa sekoittaa värit etukäteen Reactilla ja lisätä ne suoraan kankaalle.

Tekninen puoli

Reactiin liittyvää termistöä:

JSX

JSX on syntaksijatke JavaScriptille. JSX näyttää samantapaiselta kuin HTML-merkintäkieli, mutta sillä on todellisuudessa käytössään JavaScriptin täydet voimat. Se näyttää samalta kuin HTML-merkintäkieli JavaScript-tiedostossasi. 

JSX:n avulla voit kirjoittaa HTML-tyylisiä rakenteita samaan tiedostoon, johon kirjoitat JavaScript-koodia. JSX siis mahdollistaa HTML-merkintäkielen syöttämistä JavaScript-ohjelmointikieleen kun ennen tämä oli mahdollista vain toisinpäin.  

Tila

Tiloja käytetään määrittämään milloin asioiden tulee muuttua. Esimerkiksi jonkin elementin näkyminen, tiedon päivittyminen ja niin edelleen. Tiloja käytettäessä tulee olla asetettu niin kutsuttu lähtötila. Komponentti tarvitsee tilan kun jokin tilaan liittyvä data muuttuu ajan kuluessa.

Komponentti 

Reactin komponentit ovat pieniä, uudelleenkäytettäviä koodinpalasia jotka palauttavat tietyn React-elementin näytettäväksi sivustolle. Komponentit toimivat ikään kuin sivustosi rakennuspalikoina. 

Yksinkertaisin versio komponentista on JavaScript-funktio joka palauttaa React-elementin.

Komponentit voidaan purkaa selkeiksi osiksi niiden toiminnallisuuden kautta ja niitä voi myös käyttää toisten komponenttien sisällä. Nyrkkisääntönä: jos jotain käyttöliittymän osaa käytetään usein (nappi tai paneeli) tai se on tarpeeksi monimutkainen (sovellus), se on hyvä kandidaatti uudelleenkäytettäväksi komponentiksi. 

Property tai “prop” 

“Propsit” ovat syötteitä React-komponenteille. Ne ovat dataa, joka on toimitettu vanhempi-komponentista lapsi-komponentille. Niitä siis käytetään tiedonvälitykseen komponenttien välillä. Perusidea on se että voit kirjoittaa yksittäisen komponentin, jota voit käyttää useamman kerran eri paikoissa sovellusta, jolloin propsit siis auttavat kirjoittamaan uudelleenkäytettävää koodia.

Propsit ovat avattavissa ja luettavissa, mutta niitä ei voi muokata kirjoittamalla tiedostoon. Niitä ei myöskään tulisi muokata millään tavoin. Mikäli jotain arvoa haluaa muuttaa, suositellaan tämä tekemään “tilan” kautta. 

Document Object Model tai “DOM”