Home » React JS

How to use events in React JS?

React JS | Using Events in React JS Application: In this tutorial, we are going to learn how to use events in React JS?
Submitted by Godwill Tetah, on November 16, 2019

Today, we will talk about how to use events in React JS? In this article, we will look at a simple example of how to implement events in React JS?

At times, we look at React JS to be too difficult and equally difficult to debug because of its rules and conventions. The truth is if you can master the rules/syntax or conventions, React JS will be at your fingertip.

You should have a basic understanding of Node.js and React JS to understand this article.

Events help the user interact with the web page. The events used in React JS are JavaScript events (Vanilla JS).

Rules:

• Event handlers in React JS are enclosed in curly braces when writing with the event.
• Events in React JS are written in camel case. For example (onClick, onMouseOver).

In your "src" folder from your create react app template, open the App.js file and type the following,

import React from "react"
import Giphy from './giphy.gif'

function go () {
	alert ('please stop crying baby');
}

class App extends React.Component{
	render() {
		return (
			<div> 
				<center>
				<img src= {Giphy} alt="crying you" onMouseOver = {go} />
				</center>
			</div>
		)
	}
}
export default App

Output:

Conclusion:

The code above creates a React JS app as seen above and uses the onMouseOver event which pops an alert on the browser when the mouse pointer hovers over the image.

Take note of the camel case notation of events in React JS and the curly braces around the event handlers.

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question.