A graphical front-end interface for React.js considering state-transition diagrams. (7th October 2022)

• Record Type: Journal Article
• Authors: Naiki, Shotaro; Kohana, Masaki; Niibori, Michitoshi; Okamoto, Shusuke; Ohtaki, Yasuhiro; Kamada, Masaru
• Is Part Of: International journal of grid and utility computing. Volume 13:Number 5(2022)
• Page Start: 482
• Page End: 494
• Publication Date: 2022-10-07
• Subjects: Reactjs -- graphical programming -- JavaScript; Electronic data processing -- Distributed processing -- Periodicals; Electronic commerce -- Management -- Computer programs -- Periodicals; 004.605
• Languages: English
• ISSNs: 1741-847X

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.