React pähkinänkuoressa
Or should one say “React still so hot”? Onhan se kuitenkin julkaistu jo 6 vuotta sitten – 29. toukokuuta 2013.
- Facebook loi Reactin, minkä vuoksi se sai paljon huomiota.
- Se ratkaisi SPA:n ( Single Page Applications ) merkittäviä ongelmia.
- Tänä päivänä React on suosittu yksinkertaisuutensa ja juostavuutensa vuoksi. Toki suosioon vaikuttaa myös se, että isot yritykset, kuten PayPal, Uber ja Instagram käyttävä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 siten, 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 JSX:n käytön hyödylliseksi. Yleisesti ottaen kukaan täysjä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 varoitusilmoituksia.
- 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 propseissa on se, että voit kirjoittaa yksittäisen komponentin, jota voidaan käyttää useassa eri paikassa sovellustasi. ”Parent” -komponetti, voi antaa sen sisällä olevalle ”Child”-komponentille propsit. ”Child”-komponentti voi siis sijaita myös eri tiedostossa kuin ”Parent”-komponentti. Periaatteessa propsit auttavat kirjoittamaan uudelleenkäytettävää koodia.
Reactin yksi ainoita tiukkoja sääntöjä on se, 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 ainoa paikka, jossa tilaan voidaan suoraan päivittää jokin arvo.
- Tilaa voidaan päivittää asynkronisesti.
- Tilan arvoja päivittämällä voidaan uudelleenrenderöidä komponentteja.
Yhteenveto
Tässä oli lyhyehkö katsaus Reactin perusteisiin, joiden on tarkoitus 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.
Lähteet ja lisää luettavaa
https://joinex.fi/react-hooks-react-blogi-part-2/
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
