ReactJS Events

In this tutorial you will learn about the ReactJS Events and its application with practical example.

ReactJS Events

An event is an action that occurs as a result of the user action or system generated event, such as clicking mouse, pressing a key, loading of webpage, or file being created or modified etc. An event handler is a callback function which is invoked when specified event occurs. An event handler allows programmers to control the execution of the program when specified event occurs. In React, event handling is same as handling events on DOM elements, but there are following syntactic differences –

Table Of Contents
  • Function is passed as event handler instead of a string.
  • Events are named in camel case instead lowercase.
  • In React, we must call preventDefault explicitly to prevent default behavior instead of return false.

Example:-

This is a simple example where we will only use one component. We are just adding onClick event that will trigger handleClick function when button is clicked, it will toggle the isToggle flag.

Step 1:- Let’s open src/App.js, delete the existing code and put the following code in it and save it.

Step 2:- Let’s open the terminal again, change directory to your project folder and type the following command in order to run the server.

Step 3:- Now open the following URL in browser to view the output

http://localhost:3000

Step 4:- You will see the following screen.

ReactJS Events

In this tutorial we have learn about the ReactJS Events and its application with practical example. I hope you will like this tutorial.