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;
