React ja räätälöidyt sovellukset
React on yksi suosituimpia ja käytetyimpä sovelluskehityksen teknologioita tänään. Sen suosio on jatkuvassa kasvussa, erityisesti headless-tyyppisten toteutusten frontendin ja CMS:n hallintapaneelien luomiseen. Sovellamme Reactia monenlaisiin käyttötapauksiin, ja suosittelemme sitä useissa tapauksissa käytettäväksi teknologiaksi.
Mitä on React?
React on JavaScript-kirjasto. Käyttöliittymän eri näkyvät palaset pilkotaan React-komponenteiksi, jotka pystyvät liikuttamaan olennaista dataa itsensä ja muiden komponenttien kanssa. Komponentit ovat itsenäisiä toiminnallisia sovelluksen kokonaisuuksia, joiden riippuvuus toisistaan pysyy hyvin pienenä. Tämä mahdollistaa kompaktimman koodin, hyvän jatkokehitettävyyden sekä korkean sovelluksen sisäisen modulaarisuuden tason.
React käytännössä
Esimerkiksi kirjautumisdialogi, joka ilmestyy nappia painamalla voisi koostua näistä komponenteista:
1. Overlay-komponentti jossa on navigaatio, menu, sisältö ja footer
2. Appbar-komponentti joka on navigaatiopalkki sivun yläosassa
3. LoginPopper-painike joka näyttää ja piilottaa kirjautumisnäkymän painikkeesta
4. Login-komponentti joka piirtää kirjautumislomakeen ja kommunikoi rajapinnan kanssa kirjautumisesta
Yllä listatun kirjautumiseen tarvittavan komponenttipuun mikä vain osa pystyy näkemään dataa, jos se tallennetaan esimerkiksi Redux-storeen. Redux on koko sovellusta koskevan datan liikuttava kirjasto, jonka avulla esim. “Login” -komponentti voi tallentaa `isloggedin` arvon muiden komponenttien luettavaksi. Kun rajapinta antaa jotain hyödyllistä oikeilla kirjautumistunnuksilla, Reduxiin tallennetaan kirjautumisarvo ja mahdolliset tokenit ja muut vastaavat elementit.
Reactia – sen kattavan tapahtumahallinnan vuoksi – käytetään usein piirtämään koko käyttöliittymä, mutta yksittäisiä React-suorituksia voi kiinnittää myös yksittäisiin elementteihin. Esimerkiksi tyytyväisyyskyselylomake voi olla React-komponentti, joka sivun latautuessa aktivoituu ja alkaa kuuntelemaan käyttäjän klikkauksia ja valintoja.
React Native
React Native mahdollistaa mobiilisovellusten luonnin samanlaisella käyttöliittymäprosessilla kuin React. Erona on, että usein React Nativessa käytettävät valmiit komponentit ovat vahvemmin integroitu puhelinkäyttöön. Toteutimme Seepsulan sopimusasiakkaille tarkoitetun tilaussovelluksen React Nativen avulla iOS ja Android -alustoille.
Reactin vahvuuksia
Monien muiden frontend-frameworkien tavoin myös React tarjoaa täyden kontrollin käyttöliittymässä tapahtuviin asioihin. React tuo valmiiksi niin sanotut “Eventit” jokaiseen lähtöön, ja nimensä mukaisesti reagoi muutoksiin datassa. Esimerkiksi: Jos lista näytettävistä tuotteista päivittyy, päivittyy myös sitä esittävä komponentti automaattisesti.
Reactin hyötyjä on myös Frontendin riippumattomuus sovelluksen backendistä, ja vastaavasti toisin päin. Samaa frontendiä voi käyttää toisen backendin kanssa, kunhan rajapinnat ja niiden datan rakenne pysyy samana. Tämä näkyy nykyään suosituissa headless-toteutuksissa.
Reactin ominaisuuksiin kuuluvat hyvä performanssi ja nopeat latausajat. Sivun eri osat voidaan ladata halutussa järjestyksessä ja sivun datan päivittyessä vain sitä koskevat komponentit piirretään uudelleen. Tämän merkitystä ei voi väheksyä erityisesti hyvin suurien käyttäjä- ja latausmäärien tapauksessa.
Mitä Reactilla voi tehdä?
Reactin avulla voi toteuttaa kaikkea mikä näkyy ruudulla ja renderöidään clientin päässä, esitetään se sitten verkkoselaimella, mobiilisovelluksena tai Electron.js työpöytäsovelluksella. Sillä voi tehdä esimerkiksi verkkosivustojen käyttöliittymiä ja hallintapaneeleita, tai mobiili- ja työpöytäsovelluksia käyttämällä React Native ja Electron -kirjastoja.
Reactin rooli kulkee käsi kädessä JavaScriptin kanssa. Typescript/Javascript on Noden suosion noustua erittäin “valmiiksi katettu” pöytä tehdä sekä frontend- että backend-sovelluksia. Reactin suosio on jatkuvassa kasvussa ja yksi käytetyimpä teknologioita headless-tyyppisten toteutusten frontendin ja CMS:n hallintapaneelien luomiseen.
Toteutimme Reilua energiaa -verkkolehden artikkelinostot ja hakutoiminnon Reactin avulla.
React tänään ja huomenna
React on saavuttanut todella suuren suosion verkkopalveluiden käyttöliittymien ja kirjautumisen takana olevien hallintapaneeleiden toteuttamisessa. Hyvin todennäköisesti Reactin suosio vain jatkaa kasvamistaan sen modulaarisuuden, korkean jatkokehitettävyyden ja tehokkuuden ansiosta.
Agenda Helsingissä olemme käyttäneet Reactia mm. Tilaussovelluksen toteuttamiseen sekä mobiilisovelluksina (React Native, iOS, Android) että siihen liittyvinä lisäulottuvuuksina (esim. Sisällönhallintapaneeli ja rajapinta). Olemme myös hyödyntäneet reactia yksittäisten verkkopalveluiden eri ominaisuuksissa, kuten esimerkiksi sisältöjen (kuten työpaikkailmoitukset tai uutiset) esittäminen ja haku.

Agenda Helsinki oy:n tarjonta
Ohjelmistokehitys
Lisätietoja
Muuta Agenda Helsinki oy:n tarjontaa
Erikoisosaaminen
![]() |
Ohjelmistokehitys |
![]() |
Webkehitys |
Liiketoimintaprosessi
![]() |
Tuotekehitys ja suunnittelu |
![]() |
Laatu, turvallisuus ja ympäristö |
Agenda Helsinki oy:n Ohjelmistokehitys -aiheiset referenssit ja julkaisut
Asiantuntijat ja yhteyshenkilöt
It- ja ohjelmistoalan työpaikat
- Vincit - Mobiilikehittäjä
- Vincit - Ohjelmistokehittäjä
- Ropo Capital Oy - Ohjelmistosuunnittelija / Developer
- Epec Oy - System Specialist
- Epec Oy - System Design Engineer
- Epec Oy - Sourcing Manager
- Epec Oy - Senior Project Manager
Premium-asiakkaiden viimeisimmät referenssit
- Discendum Oy - Patria: Totara-oppimisympäristön avulla laadukkaita koulutuksia henkilöstölle.
- Exove - Haaga-Helia: Uusi ja raikas verkkopalvelu tukemaan käyttäjiensä toimintaa
- Epec Oy - Tana
- Epec Oy - Vestergaard
- Epec Oy - Emoss
- Epec Oy - NT Liftec
- Epec Oy - Stinis
Tapahtumat & webinaarit
- 28.01.2021 - WEBINAARI: Taklaa tietoturvamyytit Valtti Fokuksen ja F-Securen kanssa
- 28.01.2021 - Webinaari: Kuinka viedä työkuormat hallitusti pilveen?
- 04.02.2021 - [Webinaari] Kuinka löytää parhaat osaajat?
- 11.02.2021 - Webinaari: Parhaat opit pilvitransformaatiosta ja julkisen pilven hallinnasta
- 28.05.2021 - EuRuKo 2020/2021
Premium-asiakkaiden viimeisimmät bloggaukset
- Oy Gambit Labs Ab - React Native vs. Flutter ja alustariippumattomien mobiilisovellusten kehittäminen
- Vaimo Finland Oy - VUODEN VERKKOKAUPPATAPAHTUMA SMART COMMERCE 2021 TUO VAUHTIA VERKKOKAUPAN KEHITTÄMISEEN
- Tammi Digital Oy - Ylläpitosopimus on vakuutus mielenrauhalle
- Aitio Finland Oy - Toni - Sovellusarkkitehdin arkea Aitiolla
- eCraft Oy Ab - Vauhdita yrityksesi liiketoimintaprosesseja automaatiolla – kevyellä RPA-kokeilulla alkuun
- Geniem Oy - Geniem satsaa työhyvinvointiin vuonna 2021
- Valota Oy - Tips to Digital Signage Content Management to Boost Employee Communication
![]() |
Digitalisaatio & innovaatiot blogimediaBlogimediamme käsittelee tulevaisuuden liiketoimintaa, digitaalisia innovaatioita ja internet-ajan ilmiöitä |