Siirry pääsisältöön

React

Julkaistu: 9.6.2021
Kategoriat: Teknologia
Lukuaika: 2 min
Two people sitting at the table laptops open and conversing.

React on saavuttanut valtavasti suosiota viime vuosina. Vaikka React voitaisiin määritellä JavaScript-kirjastoksi, joka on suunniteltu auttamaan interaktiivisten rajapintojen luomisessa, on siitä kehittynyt jotain vielä suurempaa. Mikä on mahdollistanut Reactin nousun yhdeksi verkkokehityksen kuumimmista teknologioista?

Miksi React?

Verkkorajapintojen luominen oli ennen työlästä puuhaa. Staattisten elementtien muuttamiseen vuorovaikutteisiksi tarvittiin useita riviä koodia. Kun mukana oli useita interaktiivisia elementtejä, koodin koko ja monimutkaisuus kasvoivat nopeasti. Oli vaikeaa saavuttaa sellaisia toimintoja, joihin liittyi vuorovaikutusta rajapinnan useiden osien välillä, ja sen taustalla olevat ratkaisut olivat usein hataria.

Reactopens-in-a-new-tab oli kuin raikas tuulahdus kaikkien käyttöliittymien luomiseen tarkoitettujen työkalujen ja kehysten joukossa. Sen käyttö on helppo aloittaa, ja sitä voidaan käyttää monimutkaisten rajapintojen luomiseen. Reactin taipuvaisuus erottaa sen muista samankaltaisista työkaluista. Se on kehittäjän työkalu, jolla voidaan luoda hyvin vähärajoitteisia, dynaamisia komponentteja. Tämänkaltainen vapaus näkyy siinä, ettei mitkään React-hankkeet ole keskenään identtisiä. Kehitystiimit voivat vapaasti valita monista datan käsittelyyn, verkostopyyntöihin, käyttäjäistuntoihin ym. liittyvistä ratkaisuista. Reactia voisi verrata LEGO-rakennuspalikoihin: React ei määrää ennalta, mitä ja miten sillä voi rakentaa. Se on yksinkertainen työskentelyjärjestelmä, joka antaa käyttäjälleen vapauden muokata lopputuloksesta omannäköisensä kokonaisuuden.

"Reactia voisi verrata LEGO-rakennuspalikoihin: React ei määrää ennalta, mitä ja miten sillä voi rakentaa."

Miten Reactilla saavutetaan tällainen yksinkertaisuus?

React-insinöörit ymmärsivät, että rajapintaselaimet, jotka on tarkoitettu muuttamaan renderöitävää kohdetta käyttäjien näytöillä (tällaista rajapintaa kutsutaan myös sovellusohjelmointirajapinnaksi tai APIksi), eivät tarjonneet heidän kaipaamaansa joustavuutta. He loivatkin sen sijaan selaimen ohjelmointirajapinnan päälle pienen abstraktiokerroksen, joka tarjoaa kehittäjille erittäin dynaamisten verkko- ja sovellusrajapintojen luomiseen tarvittavat työkalut. Perinteisesti, sovelluslogiikka ja mallit erotetaan toisistaan. Renderöintiprosessissa ne kuitenkin yhdistettiin uudelleen, ja jotkin osat korvattiin dynaamisilla arvoilla. React tekee kaiken tämän, ja mukana tulee oma JSXopens-in-a-new-tab-renderöintikieli. JSX on saumaton yhdistelmä HTML-merkintöjä Javascriptin kanssa. JSX tekee interaktiivisten komponenttien luomisesta paljon helpompaa ja nopeampaa, ja juurikin siihen Reactin suosio suurilta osin juontaa juurensa.

setState()

Reactin ytimessä on niin kutsuttu "tila", eli State. State tarkoittaa niitä tietoja, jotka kuvaavat React-sovelluksen tilaa tiettynä hetkenä. Kun State muuttuu, React päivittää älykkäästi siihen nojaavat komponentit. Älykäs State yhdessä tehokkaan JSX-kielen ja työkalun suoman valinnanvapauden kanssa on tehnyt Reactista yhden kehitystiimien rakastetuimmista työkaluista.

React mikropalveluarkkitehtuureissa

Asiakkuusvastaavamme Patric Ojala kuvailee artikkelissaan, kuinka monoliittisissa toteutuksissa verkkopalvelu on rakennettu kokonaisuudessaan yhden sovelluksen varaan, kun taas mikropalveluarkkitehtuurissa eri toiminnot on jaettu yksittäisiksi sovelluksiksi, jotka ovat toisiinsa yhteydessä ohjelmointirajapintojen kautta. React toimii täydellisesti esimerkiksi Drupalin vastinparina juuri tällaisten palveluiden käyttöliittymäsovelluksena, jossa taustajärjestelmä (backend) on erotettu käyttöliittymästä (frontend).

Lue artikkeli: Miten hyödyntää mikropalveluarkkitehtuuria keskikokoisissa verkkopalveluissa?

Wunderin JS-killan johtaja David Corbacho jakaa parhaita käytäntöjämme React-dokumentaatiossa.

Etsitkö aktiivista kumppania kehittääksesi digitaalisuuttasi?

Älä etsi enää, vaan lähetä viesti asiantuntijallemme tai täytä lomake ja anna meidän olla sinuun yhteydessä!  

Aiheeseen liittyvää sisältöä

Ladataan...