REACT – FRONTEND KEHITYKSEN TETRIS

09.09.20

React nauttii valtavaa suosiosta vaikkakin se on julkaistu jo yli seitsemän vuotta sitten.  Sen julkaisijana toimi Facebook, mikä jo itsessään aikaansai kyseiselle JavaScript-kirjastolle paljon huomiota. React on nykyään laajamittaisesti käytössä pitkälti sen yksinkertaisen ja joustavan rakenteen ansiosta.

Reactia käyttävät Facebookin ja Instagramin lisäksi Netflix, Yahoo, PayPal, Uber ja AirBnb, joka puolestaan on lisännyt teknologian mielenkiintoa entisestään. React nauttii maailmanlaajuisesti korkeasta käyttöasteesta ja sillä on julkaistu Suomessa yli 3400 eri sivua. Esimerkiksi Oikotie, HS, Iltalehti, YLE, Foreca, Suomi.fi, Suomi24, Veikkaus, Seiska.

Mitä on React?

React on tapa rakentaa käyttöliittymiä ja se tunnetaan myös nimillä React.js. React on teknologia, joka ratkaisi niin sanottujen SPA-käyttöliittymien (single-page application) ongelman. Tällä tarkoitetaan esimerkiksi sitä, että sen avulla voidaan kehittää käyttöliittymä, joka koostuu vain yhdestä sivusta ja jolle latautuu erilaisia näkymiä riippuen siitä mitä käyttäjä sivulla tekee.

React tekee käyttöliittymän rakentamisen helpoksi, pilkkomalla sivun elementit pienempiin osiin eli niin sanottuihin komponentteihin. Tämä tarkoittaa, että jokainen sivulla oleva pala on rakennettu omaksi erilliseksi komponentiksi ja toimii JavaScript -funktiona. Eri komponentit pystyvät jakamaan tietoa muiden komponenttien kanssa, jonka ansiosta tietty toiminto palauttaa aina vain relevantin osan koodia, joka puolestaan luo kuvan kyseistä sivun osasta. Näin ollen sivu rakentuu aina tietyistä komponenteista, jotka kasataan käyttäjälle tietyssä järjestyksessä riippuen käyttäjän tekemistä komennoista. Eri komponentit ovat itsenäisiä palasia ja ne sisältävät omia yksityiskohtaisia toimintoja ja tyylejä. Eri komponenttien riippuvuus toisistaan pidetään usein hyvin pienenä, joka mahdollistaa kompaktin ja selkeän koodin, helpon jatkokehityksen sekä korkean ja modulaarisen tason.

Reactin käyttöönotto

Reactin käyttöönotto on yksinkertaista ja nopeaa ja sen käyttöastetta määrittelee pitkälti projektin suunnittelu ja React-projektin laajuus. Reactia on mahdollista hyödyntää vain muutamalla komponentilla tai sen avulla voidaan rakentaa suurempi ja täysin React-pohjainen käyttöliittymä.

React käyttää JSX-syntaksia (JavaScript XML). Vaikkei React itsessään vaadi JSX:n käyttöä, koetaan sen käyttö hyödylliseksi. JSX on Facebookin kehittämä syntaksi, joka on yksinkertaisempi tapa rakentaa käyttöliittymän elementtejä React komponenttien sisällä. JSX muistuttaa hyvin pitkälti HTML:ää ja XML:n kaltainen syntaksi missä jokainen tagi pitää sulkea.

React-komponentit

React-komponenteilla määritellään sivuston ulkonäkö ja sen eri toiminnot, eli lähtökohtaisesti kaikki mitä käyttäjä näkee Reactilla rakennetulla sivustolla (kuten alla olevasta kuva havainnolistaa). Jokainen katkoviivoilla rajattu alue kuvastaa yhtä yksittäistä komponenttia, joka vastaa omaa tyyliä ja omaa toimintoaan. Täten Reactilla rakennettu verkkosivusto on kuin pelaisi Tetristä.

Komponenteilla on usein tila (state) ja/tai propsit. Jos nämä muuttuvat, kyseinen komponentti ja kaikki sen lapsikomponentit päivittyvät ilman, että koko sivusto päivittyy. Jokaisella komponenteilla on myös niin sanottu elinkaari (lifecycle), joka voidaan jakaa kolmeen eri kategoriaan: kiinnittymiseen (mounting), päivittämiseen (updating) ja irtaantumiseen (unmounting).

Koska komponentit ovat yksittäisiä ja itsenäisiä, voidaan niitä käyttää aina uudestaan ja uudestaan eri puolella sivustoa. Tämä vähentää saman koodin kirjoittamista monia kertoja uudestaan.

Reactin vahvuudet

Kuten monet muut frontend-frameworkit, React tarjoaa täyden kontrollin käyttöliittymässä tapahtuviin asioihin. Reactin vahvuuksiin lukeutuvat sen tehokas toimintakyky ja nopeat latausajat. Sivu voi latautua taustalla ja sivun eri osia voidaan ladata halutussa järjestyksessä, jolloin vain kyseisen sivun komponentit esitetään ja ladataan. Tämä ominaisuus korostuu esimerkiksi silloin kun palvelulla on valtavat käyttäjämäärät, jolloin latausmäärät kasvavat suhteessa nopeasti suuriksi.

Mitä teemme Reactilla?

Reactilla voidaan käytännössä toteuttaa kaikkea sitä mitä yksittäinen käyttäjä näkee omalla ruudullaan esimerkiksi verkossa tai mobiilisovelluksissa. Sen avulla voidaan toteuttaa esimerkiksi erilaisia verkkosivustojen käyttöliittymiä ja hallintapaneeleita. React Native puolestaan mahdollistaa myös erilaisten mobiili- ja työpöytäsovellusten kehittämisen. Esimerkiksi kehitämme usein suuremmat verkkosivutoteutukset asiakkaan tarpeisiin joko täysin React-pohjaisesti tai osittain ja niin sanotusti hybridimallia hyödyntäen, missä esimerkiksi UI (User Interface) rakennetaan erilaisista React-komponeneteista ja Backend erillisenä kokonaisuutena.

Haluatko kuulla lisää eri React toteutuksistamme? Ota yhteyttä hello@tecci.fi