Data Driven User Interfaces with React

Abstract

Tämän opinnäytetyön pääasiallisena tarkoituksena oli opiskella Reactia, JavaScriptiä sekä Reduxia. React on yksi suosituimmista ja nopeimmin kasvavista käyttöliittymien ohjelmoimiseen käytettävistä kirjastoista.

React on Facebookin, joka vaihtoin juuri nimensä Metaksi, kehittämä käyttöliittymien ohjelmointiin kehittämä kirjasto. Alunperin React kehitettiin Facebookin omaan sisäiseen käyttöön, mutta myöhemmin se muutettiin avoimeksi lähdekoodiksi, jolloin siihen pääsi käsiksi kaikki halukkaat. Muutoksen jälkeen Reactin kehittämiseen on osallistunut Facebookin lisäksi useita muita, jopa itsenäisiä, kehittäjiä ja toiminnallisuuksien määrä on kasvanut. Useat ohjelmoijat ja asiantuntijat pitävät Reactia yhtenä parhaista kirjastoista, jos kehitettävän käyttöliittymän tarvitsee käsitellä suuria määriä tietoa ja käyttäjiä kerrallaan.

Tässä opinnäytettyössä käydään läpi monia tärkeitä osa-alueita teknologioista kuten React, Redux ja JavaScript. Näiden läpikäynnin jälkeen opinnäytettyön lopussa on yksinkertainen esimerkki applikaatio, jossa pyritään käyttämään näitä ominaisuuksia.

Esimerkki applikaatiossa on perineinen React-applikaation rakenne, jossa luodaan erilaisia komponentteja joiden tulee toimia yhdessä ja esittää käyttäjän sille syöttämät asiat selaimessa. Applikaation ideana on toimia ostoslistana.

The main purpose of the research was to study JavaScript and React. React is one of the most popular and fastest growing front-end programming libraries.

React is developed by Facebook, which recently became to be known as Meta, originally to be used in their internal front-end developing. Later it was made into open source, so everybody gained access and its popularity started growing rapidly. It also made it possible for more people to take part in developing it further and produce more features to it. React is currently considered by many to be the go-to library when creating a user interface that needs to deal with a lot of data and users.

This thesis investigates many of the fundamental aspects of technologies such as React, Redux and JavaScript. After going through these features there is an example application introduced that is meant to be making use of most if not all these fundamental aspects.

The example application has a typical React-application structure with different components meant to be working together to display the intended result in the browser. The application is a shopping list that takes in the items that are to be put on the list as input and then shows it in the browser.