Title: A graphical front-end interface for React.js considering state-transition diagrams

Authors: Shotaro Naiki; Masaki Kohana; Michitoshi Niibori; Shusuke Okamoto; Yasuhiro Ohtaki; Masaru Kamada

Addresses: Graduate School of Science and Engineering, Ibaraki University, Hitachi, Ibaraki, Japan ' Faculty of Global Informatics, Chuo University, Ichigayatamachi, Shinjuku-ku, Tokyo, Japan ' Learning-i, Co., Ltd., Hitachi, Ibaraki, Japan ' Faculty of Science and Technology, Seikei University, Musashino, Tokyo, Japan ' Centre for Information Technology, Ibaraki University, Hitachi, Ibaraki, Japan ' Department of Computer and Information Sciences, Ibaraki University, Hitachi, Ibaraki, Japan

Abstract: We present a graphical front-end interface for creating dynamical web pages by means of React.js. Its user does not have to write JavaScript codes for specifying the dynamical behaviour of the web components but has only to draw state-transition diagrams graphically on the developed graphical editor. Using the graphical editor, the user draws a state-transition diagram that specifies the dynamical behaviour of each web component in terms of circles representing the states of the component and arrows representing the conditional transitions among the states. Then, the developed translator converts the state-transition diagrams into web components of React.js in JavaScript that constitute the target web page. This system of the graphical editor and the translator enables general users without knowledge and experiences in programming to create dynamical web pages. Aspiring programmers may start learning JavaScript and React.js by comparing their diagrams and the translated JavaScript codes.

Keywords: React.js; graphical programming; JavaScript.

DOI: 10.1504/IJGUC.2022.126169

International Journal of Grid and Utility Computing, 2022 Vol.13 No.5, pp.482 - 494

Received: 04 Mar 2020
Accepted: 23 Dec 2020
Published online: 14 Oct 2022 *

Full-text access for editors Full-text access for subscribers Purchase this article Comment on this article