A graphical front-end interface for React.js considering state-transition diagrams
Shotaro Naiki, Masaki Kohana, Michitoshi Niibori, Shusuke Okamoto, Yasuhiro Ohtaki, Masaru Kamada · International Journal of Grid and Utility Computing · 2022
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.