React State and Event Module Introduction

Back to: ReactJS Tutorials

Introduction to State and Event Module in React:

In this article, I am going to give you a brief introduction to State and Event Module in React. We have already learned some important basic concepts of React, most importantly, we have learned components and props. Now, it’s time to take the next step. So, in this module, we’re going to take a closer look at user interaction and handling user events like button clicks or input into the text fields and so on.

And we are also going to have a look at another very important concept of state in React application. Because, you might remember that we mentioned earlier that with React, we follow the declarative approach where we, in the end, define desired target states and react then takes care about reaching that state.

Well, that is correct and that is already something we are using but, at the moment, in the application that we built in the previous section with the knowledge we gained, up to that point, we can only build static applications where the state never changes. That is where the output will always be the same. And that’s typically not what we want. We want to have an application that is interactive so that you can react to clicks by the user and to data being entered by the user and which is reactive so that the application also changes when certain things happen.

And, therefore, in this module, we are going to take a look at handling events i.e. handling user events, like button clicks, user input into the text boxes, and so on. And we’ll see how that works in React applications, how we can add such event handlers and many more. And then, we’re going to take a look at how we can ensure that what’s visible on the screen changes, and that we reach a different target state. And for that, we’re going to take a closer look at the state concept in React and we’ll learn how we can manipulate the state and transition from state A to state B.

And, in general, in this module, we’re going to learn about a couple of key concepts. So, this is another fundamental module of ReactJS covering the core features of React.

In the next article, I am going to discuss Listening to Events and Working with Event Handlers in React with Examples. Here, in this article, I give a brief Introduction to State and Event in React. I hope you enjoy this Introduction to State and Event in React article.