WIXLIB

Joni HonkanenReactJSOpinnäytetyöSyksy 2017SeAMK TekniikkaTietotekniikan tutkinto-ohjelma

1(43)SEINÄJOEN AMMATTIKORKEAKOULUOpinnäytetyön tiivistelmäKoulutusyksikkö: Tekniikan yksikköTutkinto-ohjelma: TietotekniikkaSuuntautumisvaihtoehto: Sulautetut järjestelmätTekijä: Joni HonkanenTyön nimi: ReactJSOhjaaja: Petteri MäkeläVuosi:2017Sivumäärä: 43Liitteiden lukumäärä: 0JavaScript on saanut paljon suosiota viime vuosien aikana ja suosion mukana ovatmyös tulleet useat JavaScriptiä käyttävät sovelluskehykset sekä kirjastot. Näistä voiolla vaikea valita itselleen sopivinta. Tässä opinnäytetyössä tutustutaan yhteen lupaavimmista JavaScript-kirjastoista, ReactJS-kirjastoon.Opinnäytetyössä tutustuttiin React JavaScript -kirjastoon, sen rakenteeseen, ominaisuuksiin sekä käyttömahdollisuuksiin. Lisäksi perehdyttiin Redux JavaScript -kirjastoon ja siihen, kuinka se soveltuu käytettäväksi Reactin kanssa.Työstä tuli kattava tietopaketti Reactista kiinnostuneille.Avainsanat: React, Redux, JavaScript

2(43)SEINÄJOKI UNIVERSITY OF APPLIED SCIENCESThesis abstractFaculty: School of TechnologyDegree programme: Information TechnologySpecialisation: Embedded SystemsAuthor: Joni HonkanenTitle of thesis: ReactJsSupervisor: Petteri MäkeläYear: 2017Number of pages: 43JavaScript is getting more popular every year and that is why there are many JavaScript frameworks and libraries available for different kind of development. It canbe a hard task to choose the best framework to work with. This thesis focused onone of the most popular JavaScript-libraries from the past few years, which is calledReactJs.The theoretical part of React includes information on the structure of React components, the lifecycle of the components and dataflow between the components. Thestudy also introduces a part of a popular library that can be used with React to storeapplication data to a single store. This library is called Redux. Redux has quite complicated architecture and one goal of this thesis was to explain how different partsof that architecture work. This thesis benefits people who are interested in React.js.Keywords: React, Redux, JavaScript

3(43)SISÄLTÖOpinnäytetyön tiivistelmä. 1Thesis abstract . 2SISÄLTÖ . 3Kuvaluettelo . 5Käytetyt termit ja lyhenteet . 71 JOHDANTO . 81.1 Työn tausta . 81.2 Työn tavoite . 81.3 Työn rakenne . 82 YKSISIVUINEN WEB-SOVELLUS . 102.1 Single-page applications (SPA). 102.2 Sovelluskehykset . 113 REACT.JS . 133.1 Mikä on React.js. 133.2 Virtuaalinen DOM . 143.3 Komponentit . 153.3.1 Tutustuminen komponentin tilaan . 163.3.2 Properties. 173.3.3 Elinkaarimetodit . 183.4 React Native . 203.5 React-työpöytäsovellukset . 213.6 Webpack ja Node.js . 223.6.1 Webpack . 233.6.2 Node.js . 234 JSX . 254.1 Mikä on JSX . 254.2 Babel . 265 REDUX.JS . 275.1 Mikä on Redux . 275.2 Redux-peruskäsitteet . 28

4(43)5.2.1 Tilapuu . 285.2.2 Vain luettava tila. 295.2.3 Muutokset tapahtuvat puhtaiden funktioiden avulla . 305.3 Pääkäsitteet . 315.3.1 Actions ja Action Creators . 315.3.2 Reducers. 325.3.3 Sovelluksen tila . 335.3.4 Store . 345.4 Redux-arkkitehtuuri . 356 REACT-REDUX . 386.1 Reactin sekä Reduxin yhdistäminen . 387 Yhteenveto ja pohdinta . 40LÄHTEET . 41

5(43)KuvaluetteloKuva 1. SPA URL -esimerkki. . 11Kuva 2. MVC-osien vuorovaikutus. . 12Kuva 3. React-komponentin lähettäminen React DOM-malliin. . 14Kuva 4. Esimerkki DOM-mallista. 15Kuva 5. Komponentin tila. . 17Kuva 6. Propertien renderointi. . 18Kuva 7. Komponentin elinkaari. . 19Kuva 8. Komponentin elinkaari toiminnot. . 20Kuva 9. Microsoftin laitteet. . 22Kuva 10. Esimerkki kansioista ja niiden sisällä olevista moduuleista. . 22Kuva 11. Tukkiutuvan ja tukkiutumattoman I/O:n ajan käyttö. . 24Kuva 12. React-elementti tehtynä JSX-syntaksina sekä ilman. . 25Kuva 13. JavaScriptin käyttö JSX-syntaksin sisällä. . 26Kuva 14. Redux-säiliö. . 28Kuva 15. Esimerkki Reduxin tilapuusta. . 29Kuva 16. Esimerkki toiminnosta . 30Kuva 17. Tilan päivittäminen toiminnon avulla. . 31Kuva 18. Esimerkki toiminnosta. . 32Kuva 19. Reducerin rakenne. 33Kuva 20. Tilojen vertailu. . 34

6(43)Kuva 21. Redux-arkkitehtuuri. . 36Kuva 22. Vaiheet 1.1–1.3 määritetään kertaalleen, 2.1–2.2 mahdollisestiuseamman kerran. . 37Kuva 23. Provider käärii sisälleen Reactin pääkomponentin. . 38Kuva 24. Datan kulku React-Redux-sovelluksessa. 39

7(43)Käytetyt termit ja lyhenteetDeklaratiivinenOhjelmointityyli, jossa kerrotaan mihin tulokseen pyritään.Vastakohta imperatiiviselle ohjelmoinnille.Elinkaari metoditKomponentin eri vaiheissa suoritettavat toiminnot.Front EndKäyttäjälle näkyvä osuus.ImperatiivinenOhjelmointityyli, jossa ongelman ratkaisu selitetään vaihekerralla.JSXHTML-kieltä muistuttava tapa kirjoittaa JavaScriptiä. Käytetään React-komponenttien luonnissa.KomponenttiReact-sovelluksen rakennuspalikka, josta sovellus koostuu.MVC-arkkitehtuuriEtenkin graafisissa käyttöliittymissä käytetty ohjelmistoarkkitehtuurityyli, jossa ohjelma jaetaan kolmeen osaan: malliin, näkymään sekä käsittelijään.Properties“Props” on data, joka tulee isäntäkomponentilta lapsikomponentille.RenderointiKuvan muodostaminen.Sovelluksen tilaSovelluksen yhteinen data, joihin jokaisella komponentillaon pääsy.SPAYhden sivun sovellus, käyttäjä pysyy samalla sivulla,vaikka sivun sisältö vaihtuisi.StoreSäilö sovelluksen yhteiselle datalla.TilaKomponentin sisäinen yhteinen data.Virtuaalinen DOMKopio DOM-mallista, tarkoituksena on verrata muutoksiaalkuperäiseen DOM-malliin.

8(43)1 JOHDANTO1.1 Työn taustaWeb-ohjelmointi kehittyy jatkuvasti, tämän vuoksi oikean sovelluskehyksen valitseminen projektiin voi olla vaikeaa. Suosituimpia JavaScript-sovelluskehyksiä ovatAngular.js, React.js, Vue.js, Ember.js sekä Meteor.js. Uuden sovelluskehyksenopettelu on aikaa vievää, vaikka ne pohjautuvatkin samaan kieleen, JavaScriptiin.Sovelluskehykset nopeuttavat ohjelmistojen kehitystyötä tuomalla käytettäväksi valmiita toiminnollisuuksia, tämä vähentää kirjoitettavan koodin määrä. Opinnäytetyöon ajankohtainen kaikille, jotka harkitsevat ReactJS-kirjaston käyttöä tuleviin projekteihinsa tai haluavat tietää enemmän Reactin arkkitehtuurista sekä monipuolisuudesta.1.2 Työn tavoiteTyön tavoitteena on esitellä React- sekä Redux JavaScript-kirjasto, näiden arkkitehtuuri sekä toiminta. Opinnäytetyössä käydään läpi yksityiskohtaisesti Reactin sekäReduxin tärkeimmät termit, datan kulku sekä rakenne.Lukijalle pitäisi selvitä, mikä React on, mihin sitä käytetään, mistä osioista Reactsovellus koostuu, kuinka React toimii ja minkä vuoksi Redux sopii hyvin Reactinkanssa yhteen. Lisäksi lukijalle pitäisi muodostua kuva, kuinka monipuolisesti Reactia voidaan hyödyntää eri alustoille ohjelmoidessa.1.3 Työn rakenneLuvussa 2 esitellään eroavaisuus perinteisen sivuston sekä yhden sivun web-sovelluksen välillä. Lisäksi käydään läpi sovelluskehysten hyödyt web-sivujen suunnittelussa. Luvussa 3 kerrotaan Reactista, Reactin komponenteista, datan kulusta sekäReact-sovelluskehityksestä eri alustoille. Luvussa 4 paneudutaan JSX:n käyttöön.Luku 5 käsittelee Redux-kirjaston ominaisuuksia. Luvussa 6 katsotaan, kuinka

9(43)React ja Redux toimivat yhdessä. Lopuksi on yhteenveto, jossa käydään opinnäytetyön tulokset ja hyödyt läpi.

10(43)2 YKSISIVUINEN WEB-SOVELLUSVerkkosivusto koostuu monista eri tiedostoista, joista selain muodostaa käyttäjällenäkyvän sivun. Verkkosivu on yleensä kirjoitettu HTML-kielellä, jota kaikki selaimetosaavat lukea. Sivu voi myös sisältää CSS-tyylimäärittelyjä sekä JavaScriptiä. CSSvastaa sivun tyylistä tuomalla esimerkiksi erilaisia fontteja ja värejä käytettäväksi.JavaScriptin tehtävä on taas tuoda sivulle dynaamista toiminnallisuutta.Verkkosivun tiedostot sijaitsevat palvelimella. Käyttäjän pyrkiessä sivustolle selainpyytää palvelimelta HTML-dokumentin. Tämän jälkeen HTML-dokumentti muutetaan käyttäjälle näkyvään muotoon. Perinteisillä tekniikoilla tehtyjen sivujen navigointi toiselle sivulle tapahtuu lataamalla uusi HTML-dokumentti. Uuden HTML-tiedoston lataaminen palvelimelta tuo uuden sisällön sivulle, tämä toimenpide vie ainajonkin verran aikaa.2.1 Single-page applications (SPA)Single-page application on sovellus, jossa pystytään samalla www-sivulla, vaikkasivun sisältö vaihtuisi. Näitä sovelluksia käytetään selaimella, kuten muitakin vanhemman tekniikan verkkosivuja. Suurin näkyvä eroavaisuus perinteisen sekä SPAsivun välillä on vähentynyt sivujen latausmäärä. (Code School [Viitattu 28.4.2017].)Yksisivuinen sovellus tarjoaa samat ominaisuudet ja toiminnot, joita käytetään työpöytä- sekä natiivisovelluksissa. SPA-sovelluksissa vain yksi dokumentti ladataanselaimeen. Päädokumentin jälkeen muita resursseja, kuten skriptejä, tyylitiedostoja,dataa sekä muita ominaisuuksia, ladataan asynkronisesti näkyviin ilman että päädokumenttia muutetaan. Toisin sanoen sovelluksen elinkaaren ajan URL-osoitteensisältö hash-merkin (#) edessä ei muutu, sillä selain ei pyydä palvelimelta muitasivuja näytettäväksi. (Vice & Horton [Viitattu 25.5.2017].) Kuviossa 1 esitellään SPAsivuston url-osoitteen rak

3 REACT.JS 3.1 Mikä on React.js React, jota kutsutaan myös nimellä React.js tai ReactJS, on avoimen lähdekoodin JavaScript-kirjasto, jonka tarkoitus on muuttaa ohjelmassa käytettävä data käyttä-jälle näkyvään muotoon. Reactia pidetään MVC-arkkitehtuurin näkymänä (view).