Open In App

Give an example of using Events

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

React provides its own cross-browser-compatible synthetic events that are a wrapper around the native browser events. These events are named using the camelCase convention. We need to pass a handler function to these event props which gets executed when the event is fired. We can pass the handler function to the event prop using the syntax shown below.

Syntax:

const handleClick = () => {
console.log("Hello");
}
<div onClick={handleClick}>Hello</div>

Prerequisites:

Approach:

Using an event in React JS is done by defining a function for that event. This function is called when the corresponding event is triggered and the code is executed.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Example: This example implements the defined eventHandler function linked to onClick event. When the click event is triggered it call the handler and shows the click alert on the UI.

Javascript




//  Filename - App.js
 
import "./App.css";
 
const App = () => {
    const handleClick = () => {
        alert("Hello Geek");
    };
    return (
        <div className="container">
            <button className="btn" onClick={handleClick}>
                Press Me
            </button>
        </div>
    );
};
 
export default App;


CSS




/* Filename - App.css */
 
.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
}
 
.btn {
    align-self: center;
    background-color: rgb(47, 173, 173);
    font-size: 50px;
    color: white;
    border-radius: 10px;
    border: none;
}
 
.btn:active {
    background-color: rgb(16, 88, 88);
}


Step to run the application: Use the following command on the command line to start the application.

npm start

Output: We can use our React app by visiting http://localhost:3000 on the browser.



Last Updated : 20 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads