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.
[Link]
import React, { useState } from "react";
function App() {
const [inputValue, setInputValue] = useState("");
const [keyPressed, setKeyPressed] = useState("");
const [message, setMessage] = useState("");
const handleInputChange = (event) => {
setInputValue([Link]);
};
const handleKeyUp = (event) => {
setKeyPressed([Link]);
};
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;
[Link]
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./[Link]";
[Link](
<[Link]>
<App />
</[Link]>,
[Link]("root")
);
[Link]
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
