রিয়েক্ট

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <button onClick={() => setMessage("ক্লিক করা হয়েছে")}>
        ক্লিক করুন
      </button>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <button onDoubleClick={() => setMessage("double clicked")}>
        double click
      </button>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <button onMouseDown={() => setMessage("mouse down")}>
        press the button
      </button>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <button onMouseUp={() => setMessage("mouse up")}>
        release the button
      </button>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <div
        onMouseMove={() => setMessage("mouse moving")}
        style={{
          padding: "40px",
          border: "1px solid black"
        }}
      >
        মাউস এখানে নিয়ে আসুন
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <div
        onMouseEnter={() => setMessage("mouse entered")}
        style={{
          padding: "40px",
          border: "1px solid black"
        }}
      >
        move into this area
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <div
        onMouseLeave={() => setMessage("mouse left")}
        style={{
          padding: "40px",
          border: "1px solid black"
        }}
      >
        move outside this area
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <div
        onMouseOver={() => setMessage("mouse over")}
        style={{
          padding: "40px",
          border: "1px solid black"
        }}
      >
        move over this area
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <div
        onMouseOut={() => setMessage("mouse out")}
        style={{
          padding: "40px",
          border: "1px solid black"
        }}
      >
        move outside this area
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  function handleContextMenu(event) {
    event.preventDefault();
    setMessage("context menu opened");
  }

  return (
    <>
      <div
        onContextMenu={handleContextMenu}
        style={{
          padding: "40px",
          border: "1px solid black"
        }}
      >
        এখানে রাইট ক্লিক করুন
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  function handleKeyDown(event) {
    setMessage(event.key);
  }

  return (
    <>
      <input
        onKeyDown={handleKeyDown}
        placeholder="press a key"
      />

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  function handleKeyUp(event) {
    setMessage(event.key);
  }

  return (
    <>
      <input
        onKeyUp={handleKeyUp}
        placeholder="একটি কী ছেড়ে দিন"
      />

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <input
        onFocus={() => setMessage("")}
        placeholder="focus here"
      />

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <input
        onBlur={() => setMessage("")}
        placeholder="leave this field"
      />

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  function handleChange(event) {
    setMessage(event.target.value);
  }

  return (
    <>
      <select onChange={handleChange}>
        <option value="">সিলেক্ট</option>
        <option value="one"></option>
        <option value="two"></option>
      </select>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

function App() {
  const [value, setValue] = useState("");

  return (
    <>
      <input
        onInput={(event) => setValue(event.target.value)}
        placeholder="কিছু লিখুন"
      />

      <p>{value}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  function handleSubmit(event) {
    event.preventDefault();
    setMessage("ফর্ম জমা দেওয়া হয়েছে");
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input placeholder="enter value"/>
        <button type="submit">সাবমিট</button>
      </form>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  function handleReset() {
    setMessage("ফর্ম রিসেট হয়েছে");
  }

  return (
    <>
      <form onReset={handleReset}>
        <input defaultValue="ভ্যালু"/>
        <button type="reset">রিসেট</button>
      </form>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <p onCopy={() => setMessage("লেখা কপি হয়েছে")}>
        এই লেখাটি কপি করুন
      </p>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <input
        defaultValue="এই লেখাটি কাটুন"
        onCut={() => setMessage("লেখা কাটা হয়েছে")}
      />

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <input
        onPaste={() => setMessage("লেখা পেস্ট হয়েছে")}
        placeholder="এখানে পেস্ট করুন"
      />

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <div
        draggable={true}
        onDragStart={() => setMessage("টেনে নেওয়া শুরু হয়েছে")}
        style={{
          padding: "30px",
          border: "1px solid black"
        }}
      >
        আমাকে টেনে নিন
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <div
        draggable={true}
        onDragEnd={() => setMessage("টেনে নেওয়া শেষ হয়েছে")}
        style={{
          padding: "30px",
          border: "1px solid black"
        }}
      >
        আমাকে টেনে নিন
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  function handleDragOver(event) {
    event.preventDefault();
    setMessage("dragging over");
  }

  return (
    <>
      <div
        onDragOver={handleDragOver}
        style={{
          padding: "40px",
          border: "1px solid black"
        }}
      >
        drag over here
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  function handleDrop(event) {
    event.preventDefault();
    setMessage("");
  }

  function handleDragOver(event) {
    event.preventDefault();
  }

  return (
    <>
      <div
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        style={{
          padding: "40px",
          border: "1px solid black"
        }}
      >
        এখানে ছেড়ে দিন
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <div
        onScroll={() => setMessage("")}
        style={{
          height: "100px",
          overflow: "auto",
          border: "1px solid black"
        }}
      >
        <div style={{height: "300px"}}>
          scroll this area
        </div>
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);

import {createRoot} from "react-dom/client";
import React, {useState} from "react";

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

  return (
    <>
      <div
        onWheel={() => setMessage("wheel moved")}
        style={{
          padding: "40px",
          border: "1px solid black"
        }}
      >
        move the wheel here
      </div>

      <p>{message}</p>
    </>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);