An event is an action or occurrence recognized by a software. To make an event more clear let's use the daily activities we do when we use a computer such as clicking on a button, hover on an image, pressing a keyboard, scrolling the mouse wheel and etc. In this section, we will focus only some of the mouse and keyboard events. The react documentation has already a detail note about [events](https://reactjs.org/docs/handling-events.html).
Handling events in React is very similar to handling elements on DOM elements using pure JavaScript. Some of the syntax difference between handling event in React and pure JavaScript:
- React events are named using camelCase, rather than lowercase.
- With JSX you pass a function as the event handler, rather than a string.
Let's see some examples to understand event handling.
Another difference between HTML and React event is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
Plain HTML
```html
<ahref="#"onclick="console.log('The link was clicked.'); return false">
Click me
</a>
```
However, in React it could be as follows:
```js
import React, { Component } from 'react'
// if it is functional components
class App extends Component {
handleClick = () => {
alert('Welcome to 30 Days Of React Challenge')
}
render() {
return (
<ahref='#'onClick={this.handleClick}>
Click me
</a>
)
}
}
```
Event handling is a very vast topic and in this challenge we will focus on the most common event types. We may use the following mouse and keyboard events.
