Skip to main content
SpringerLink
Log in

A Graphical Front-End Interface for React.js

  • Conference paper
  • First Online:
Advances in Network-Based Information Systems (NBiS 2018)

Part of the book series: Lecture Notes on Data Engineering and Communications Technologies ((LNDECT,volume 22))

Included in the following conference series:

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 behavior of the web components but has only to draw state-transition diagrams graphically on the developed graphical editor. Using the graphical editor, the user composes a state transition diagram that specifies the dynamical behavior of each web component in terms of circles representing the states of the component and arrows representing the conditioned transitions among the states. Then the developed translator converts the state transition diagrams into web components of React.js in JavaScript that compose 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. Wanna-be programmers may start learning JavaScript and React.js by comparing their diagrams and the translated JavaScript codes.

This is a preview of subscription content, log in via an institution to check access.

Access this chapter

Log in via an institution
Chapter
USD 29.95
Price excludes VAT (USA)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
USD 169.00
Price excludes VAT (USA)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Softcover Book
USD 219.99
Price excludes VAT (USA)
  • Compact, lightweight edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

Institutional subscriptions

References

  1. React - A JavaScript library for building user interfaces. https://reactjs.org/. Accessed 23 Jan 2018

  2. Okamoto, S., Kamada, M., Nakao, T.: Proposal of an interactive animation tool based on state transition diagram. IPSJ Trans. Program. 46(SIG1(PRO24)), 19–27 (2005)

    Google Scholar 

  3. Suzuki, K., Niibori, M., Rashed, A.S., Okamoto, S., Kamada, M.: Development of IslayPub3.0 – educational programming environment based on state-transition diagrams. In: The 4th International Workshop on Web Service and Social Media (WSSM 2015), Proceedings of the 18th International Conference on Network-Based Information Systems, (NBiS 2015), pp. 702–705, Taipei (2015)

    Google Scholar 

Download references

Author information

Authors and Affiliations

  1. Ibaraki University, Hitachi, Ibaraki, 316-8511, Japan

    Shotaro Naiki, Masaki Kohana & Masaru Kamada

  2. Seikei University, Tokyo, 180-8633, Japan

    Shusuke Okamoto

Authors
  1. Shotaro Naiki
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. Masaki Kohana
    View author publications

    You can also search for this author in PubMed Google Scholar

  3. Shusuke Okamoto
    View author publications

    You can also search for this author in PubMed Google Scholar

  4. Masaru Kamada
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Masaru Kamada .

Editor information

Editors and Affiliations

  1. Department of Information and Communication Engineering, Faculty of Information Engineering, Fukuoka Institute of Technology, Fukuoka, Japan

    Leonard Barolli

  2. Faculty of Management, Comenius University in Bratislava, Bratislava, Slovakia

    Natalia Kryvinska

  3. Faculty of Business Administration, Rissho University, Tokyo, Japan

    Tomoya Enokido

  4. Department of Advanced Sciences, Hosei University, Tokyo, Japan

    Makoto Takizawa

Rights and permissions

Reprints and permissions

Copyright information

© 2019 Springer Nature Switzerland AG

About this paper

Check for updates. Verify currency and authenticity via CrossMark

Cite this paper

Naiki, S., Kohana, M., Okamoto, S., Kamada, M. (2019). A Graphical Front-End Interface for React.js. In: Barolli, L., Kryvinska, N., Enokido, T., Takizawa, M. (eds) Advances in Network-Based Information Systems. NBiS 2018. Lecture Notes on Data Engineering and Communications Technologies, vol 22. Springer, Cham. https://doi.org/10.1007/978-3-319-98530-5_79

Download citation

Publish with us

Policies and ethics

Search

Navigation