React pähkinänkuoressa

Teknologia

Meemi: React.JS, so hot right now

Or should one say “React still so hot”? Onhan se kuitenkin julkaistu jo 6 vuotta sitten – 29. toukokuuta 2013.

  • Reactin loi Facebook, josta syystä se sai paljon huomiota
  • Se ratkaisi SPA:n ( Single Page Applications ) merkittäviä ongelmia
  • Tänä päivänä se on suosittu yksinkertaisuutensa ja juostavuutensa ansiosta. Toki suosioon vaikuttaa se, että isot yritykset kuten, PayPal, Uber ja Instagram käyttävät tätä tekniikkaa.

Mitä React on?

React on tapa rakentaa käyttöliittymiä. React tekee käyttöliittymien rakentamisen helpoksi pilkkomalla jokaisen sivun paloiksi. Näitä paloja kutsutaan komponenteiksi.

React komponentti on pala koodia, joka kuvaa jotain tiettyä osaa sivusta. Jokainen komponentti on JavaScript funktio, joka palauttaa palan koodia, joka puolestaan kuvaa osaa verkkosivusta.

Sivu siis muodostuu Reactilla siitä, että näitä funktioita kutsutaan ja kasataan tietyssä järjestyksessä ja näytetään tuo järjestys käyttäjälle.

React on JavaScript kirjasto, joka käyttää JSX-syntaksia (JavaScript XML). React ei itsessään vaadi JSX:n käyttöä, eli sitä olisi mahdollista kirjoittaa suoraan JavaScriptinä, mutta useimmat kokevat sen hyödylliseksi. Yleisesti ottaen kukaan täysijärkinen ei kirjoita Reactia ilman JSX:ää.

JSX lyhyesti:

  • JSX muistuttaa hyvin pitkälti HTML:ää
  • JSX on XML:n kaltainen syntaksi, eli jokainen tagi täytyy sulkea
  • JSX:n käyttö sallii Reactin näyttää hyödyllisempiä virhe -ja varoitus ilmoituksia
  • JSX mahdollistaa dynaamisen sisällön luomisen helposti kirjoittamalla JavaScriptiä aaltosulkeiden sisälle

Komponentit ja propsit

Komponentit siis sallivat käyttöliittymän erottelun itsenäisiin ja uudelleen käytettäviin lohkoihin. Komponentteja voidaan luoda funktioiden lisäksi “ES6 class:ia” käyttämällä. Lisätietoa ES6 luokista: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes.

Props on lyhenne sanasta “Properties”. Propseja käytetään tiedonvälitykseen komponenttien välillä. Perusidea propsien takana on se, että voit kirjoittaa yksittäisen komponentin, jota voidaan käyttää useassa eri paikassa sovellustasi. ”Parent”, joka kutsuu komponenttia voi asettaa sen propsit, joka voi siis sijaita eri paikassa. Periaatteessa propsit auttavat kirjoittamaan uudelleenkäytettävää koodia.

Reactin yksi ainoita tiukkoja sääntöjä on, että luokkien tai funktioiden ei ole koskaan tarkoitus muokata omia propsejaan suoraan. Sen sijaan, että propsien arvoa muutettaisiin, muutetaan tilan arvoa eli ”State”, tästä tarkemmin seuraavassa kappaleessa.

Tila eli ”State”

Tila initialisoidaan luokan konstruktorissa. Konstruktori on ainoa paikka missä tilan arvo voidaan asettaa suoraan ilman siihen tarkoitettua setState() funktiota tai hook:ia.

Sovelluksen tila voidaan siis päivittää käyttämällä setState() funktiota tai State hook:ia käyttämällä. State hook:stä lisätietoa löytyy: https://reactjs.org/docs/hooks-state.html

Tila lyhyesti:

  • Tilaa ei saa päivittää suoraan, vaan siihen käytetään setState() funktiota tai State hook:ia
  • Konstruktori on ainut paikka, jossa tilaan voidaan suoraan päivittää jokin arvo
  • Tilaa voidaan päivittää asynkronisesti
  • Tilan arvoja päivittämällä voidaan uudelleen renderöidä komponentteja

Yhteenveto

Tässä oli lyhyehkö katsaus Reactin perusteisiin, jonka tarkoitus on antaa lukijalle pientä näkemystä Reactin käytöstä teoriatasolla. Teille, joita React kiinnostaa enemmän ja haluatte käytännön esimerkkejä tai harjoituksia, voin suositella Helsingin yliopiston tarjoamaa Full Stack MOOC -kurssia. Kurssin sisältö on laaja ja tarjoaa hyvät perustaidot moderniin websovelluskehitykseen.

https://fullstackopen.com/

Lähteet ja lisää luettavaa

https://fullstackopen.com/osa1/reactin_alkeet

https://reactjs.org/docs/getting-started.html

https://reactjs.org/docs/introducing-jsx.html

https://reactjs.org/docs/state-and-lifecycle.html

https://medium.com/@thinkwik/why-reactjs-is-gaining-so-much-popularity-these-days-c3aa686ec0b3