These days, we are bridging the communication gap between human and computer. The next big thing is a conversational interface — the era of natural language processing. To highlight the point, nowadays there are two kinds of a conversational interface — virtual assistants (Siri, Alexa) and chatbots (like Slackbot, Telegram), which through “human” experience help end user to complete the specific task.

When I was learning React there were a couple things that I couldn’t clearly understand and one of them was children prop. That is until I faced the problem similar to the following one.

Here we are! Due to my master thesis at the university, one of the requirements is the implementation of an interactive mockup for the university WebTV platform. So, I decided to make it with React.

The last days I am working on the project, which should include the state machine. Implementing this project with React, I decided to use the Redux framework to manage state in my React application. Moreover, thanks to redux store we can debug data (in one place) easily.

To make the application fancy, front-end web developers usually visualize it using animations or other effects. And now I am going to explain one of the methods how to apply the most famous floating label effect to the input field with React.