If you’re in the middle of building an IoT project, and you’re setting up all your sensors to collect data, you have already planned out how you’re going to connect them to the Cloud, then you’re just about to enter the last step – creating the user interface.

Of course, depending on your IoT application and its needs there are many different options in regard to the UI. Today, we’re here to offer some helpful knowledge. Enrico Neri, our Software Developer just finished presenting his Zerynth Continuous Learning webinar – “Philosophy of State – Thinking about GUI with React and Redux“.

The way that people interact with machines is advancing and changing every day. So, why not jump on the learning bandwagon, and see what Enrico has to say about creating a graphical user interface with React and Redux.

React and Redux

React and Redux slides Zerynth

Enrico’s presentation starts with an explanation of React, so we’re going to start from there as well. First of all, let’s explain what it is.

React is an open-source JavaScript library designed for building user interfaces and components. It was created by Jordan Walke, a software engineer at Facebook. In 2011 Facebook used it in its News Feed, and then it was used on Instagram in 2012. The current version of React is 16.13.1, released in March this year. You can learn more about React, and access tutorials and documentation here.

React allows you to handle dynamic content for web applications, so it is ideal for developing single-page applications using components. Its main benefits are:

  • Each element of a UI can be a component, with its own behavior
  • Each component is a piece of reusable code
  • A component may contain children components
  • It allows easier building of single-page applications that simulate multi-paging

Now, let’s move on to the second topic of the webinar – Redux.

Redux is an open-source JavaScript library for managing application state. So, in simple terms, it manages the inner workings of the application. It was created by Dan Abramov around in 2015.

Many developers are aware that Redux goes hand in hand with React but they are not sure what it actually is. Here’s what Enrico had to say about it:

We have to note that Redux is not React. Redux is an independent package and it could be used stand-alone, with NodeJS, or something else. But its use with React is the most common one, because it helps a lot with building user interfaces with a centralized state.

Watch the video to learn more.

Webinar agenda

Here’s a short webinar agenda, with time stamps of the video, so that you can view the content you’re most interested in faster:

What is Zerynth Continuous Learning?

We designed the Zerynth Continuous Learning series so that every member of our development team gets to present a topic he’s most passionate about. A topic, he wants to see others excel at too. This way, each month the whole Zerynth team has the opportunity to learn something new. Of course, this is also an excellent opportunity to share knowledge with all of you each month, over our YouTube channel.

Let us know what you think about this series on social media. If you want to keep track of what’s happening just search for #zcl or #zerynthlearning.

Subscribe to the Zerynth YouTube channel

Zerynth YouTube channel

If you’re not subscribed to our YouTube channel yet, now is a great time! As you can see, we regularly post new content. Most of it is educational and directed towards learning more about IoT and embedded development.