Scribd
Upload
5 views

ReactJS DOM Events Application

ReactJs Application

Uploaded by

Firoza
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

ReactJS DOM Events Application

ReactJs Application

Uploaded by

Firoza
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

ReactJS Application Using DOM Events

This document provides the source code for a simple ReactJS application that demonstrates the use

of various DOM events such as onClick, onChange, and onKeyUp. The application captures user

input, displays dynamic changes, and handles button click events.

App.js
import React, { useState } from "react";

function App() {

const [inputValue, setInputValue] = useState("");

const [keyPressed, setKeyPressed] = useState("");

const [message, setMessage] = useState("");

const handleInputChange = (event) => {

setInputValue(event.target.value);

};

const handleKeyUp = (event) => {

setKeyPressed(event.key);

};

const handleButtonClick = () => {

setMessage(`Hello, ${inputValue}! Welcome to React.`);

};

return (
<div style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>

<h1>React DOM Events Example</h1>

<div style={{ marginBottom: "10px" }}>

<label>

Enter Your Name:{" "}

<input

type="text"

value={inputValue}

onChange={handleInputChange}

onKeyUp={handleKeyUp}

placeholder="Type your name"

style={{ padding: "5px", fontSize: "16px" }}

/>

</label>

</div>

{keyPressed && (

<p>You pressed: <strong>{keyPressed}</strong></p>

)}

<button

onClick={handleButtonClick}

style={{

padding: "10px 20px",

fontSize: "16px",

cursor: "pointer",

backgroundColor: "#007BFF",

color: "white",

border: "none",
borderRadius: "5px",

}}

>

Greet Me

</button>

{message && (

<p style={{ marginTop: "20px", fontSize: "18px", color: "#28a745" }}>

{message}

</p>

)}

</div>

);

export default App;

index.js
import React from "react";

import ReactDOM from "react-dom";

import App from "./App";

import "./index.css";

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById("root")
);

index.css
body {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

background-color: #f4f4f4;

You might also like