ReactJS-kirjasto front-endkehityksessä
Taipale, Mikko (2020)
Taipale, Mikko
2020
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2020060216189
https://urn.fi/URN:NBN:fi:amk-2020060216189
Tiivistelmä
Opinnäytetyön tavoitteena oli tutkia ReactJS JavaScript-kirjaston komponenttipohjaista kehitystapaa ja sen etuja tiimiprojektin näkökulmasta. Tavoitteena oli myös ymmärtää mitä komponenttipohjainen web-kehitys mahdollistaa applikaation koodirakenteessa ja kuinka uudelleenkäytettävät komponentit suoraviivaistavat web-sivun rakentamista.
Opinnäytetyössä käytiin läpi ReactJS yleiset ominaisuudet ja sisältävät teknologiat. ReactJSkirjastoa myös vertailtiin AngularJS ja Vue.js, jotka ovat toisia suosittuja JavaScriptohjelmistokehyksiä. Opinnäytetyössä tutkittiin käyttötarkoitusta ohjelmistokehysten välillä ja miten eri ominaisuudet voivat vaikuttavat ohjelmistokehyksen valintaan.
Opinnäytetyössä myös tutkittiin ReactJS-applikaation koodirakennetta ja kuinka rakentaa web-applikaatio käyttäen ReactJS. Käytiin läpi geneerisen React-komponentin luonti ja sen käyttö. Opinnäytetyössä käytiin myös esimerkkien avulla läpi React-projektin potentiaalista rakennemallia ja web-sivun rakentamisen aloittamista.
Opinnäytetyön lopputuloksena todettiin ReactJS-applikaation komponenttimaisen rakenteen antavan etuja projektityölle tiimissä, jos projekti luodaan sen ympärille. Todettiin myös, että erilaiset ReactJS-kirjaston ominaisuudet vaikuttavat tiimiprojektin ominaisuuksien suunnitteluun, työnjakoon ja versionhallintaan. The goal of the thesis was to research ReactJS JavaScript library’s component-based development methods and its benefits from a team project’s perspective. The goal was to understand what component-based web design enables for the application’s code structure and how recyclable components streamline web-site building.
The thesis goes through ReactJS’s basic features and technologies. ReactJS library is also compared to AngularJS and Vue.js, which are other popular JavaScript frameworks. The thesis studies the use cases between the frameworks and how different features can affect the selection of a framework.
The thesis went through the ReactJS application’s code structure in detail and how to build a web-application with ReactJS. It was also discussed how to create a generic React component and how to use it. The thesis showed examples of the potential structure and how to start building a web site with ReactJS.
The result of the thesis was that the component-based structure of a ReactJS application benefits team projects if the projects are created around it. It was also concluded that different ReactJS features affect team project’s feature planning, work distribution and version control.
Opinnäytetyössä käytiin läpi ReactJS yleiset ominaisuudet ja sisältävät teknologiat. ReactJSkirjastoa myös vertailtiin AngularJS ja Vue.js, jotka ovat toisia suosittuja JavaScriptohjelmistokehyksiä. Opinnäytetyössä tutkittiin käyttötarkoitusta ohjelmistokehysten välillä ja miten eri ominaisuudet voivat vaikuttavat ohjelmistokehyksen valintaan.
Opinnäytetyössä myös tutkittiin ReactJS-applikaation koodirakennetta ja kuinka rakentaa web-applikaatio käyttäen ReactJS. Käytiin läpi geneerisen React-komponentin luonti ja sen käyttö. Opinnäytetyössä käytiin myös esimerkkien avulla läpi React-projektin potentiaalista rakennemallia ja web-sivun rakentamisen aloittamista.
Opinnäytetyön lopputuloksena todettiin ReactJS-applikaation komponenttimaisen rakenteen antavan etuja projektityölle tiimissä, jos projekti luodaan sen ympärille. Todettiin myös, että erilaiset ReactJS-kirjaston ominaisuudet vaikuttavat tiimiprojektin ominaisuuksien suunnitteluun, työnjakoon ja versionhallintaan.
The thesis goes through ReactJS’s basic features and technologies. ReactJS library is also compared to AngularJS and Vue.js, which are other popular JavaScript frameworks. The thesis studies the use cases between the frameworks and how different features can affect the selection of a framework.
The thesis went through the ReactJS application’s code structure in detail and how to build a web-application with ReactJS. It was also discussed how to create a generic React component and how to use it. The thesis showed examples of the potential structure and how to start building a web site with ReactJS.
The result of the thesis was that the component-based structure of a ReactJS application benefits team projects if the projects are created around it. It was also concluded that different ReactJS features affect team project’s feature planning, work distribution and version control.