রিয়েক্ট

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

function App() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="আপনার নাম"
      />
      <p>স্বাগতম {name}</p>
    </div>
  );
}

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

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

function reducer(count, action) {
  if (action.type === "increment") {
    return count + 1;
  }
  if (action.type === "decrement") {
    return count - 1;
  }
  return count;
}

function App() {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <button onClick={() => dispatch({type: "decrement"})}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch({type: "increment"})}>+</button>
    </div>
  );
}

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

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

const text = createContext();

function Profile() {
  const user = useContext(text);
  return <h1>স্বাগতম {user}</h1>;
}

function App() {
  return (
    <text.Provider value="রিয়েক্ট">
      <Profile/>
    </text.Provider>
  );
}

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

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

function App() {
  const input = useRef(null);

  function execute() {
    input.current.focus();
  }

  return (
    <div>
      <input ref={input} />
      <button onClick={execute}>সাবমিট</button>
    </div>
  );
}

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

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

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = "Count: " + count;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      কাউন্ট: {count}
    </button>
  );
}

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

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

function App() {
  const box = useRef(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    setWidth(box.current.offsetWidth);
  }, []);

  return (
    <div>
      <div ref={box}>উইথ</div>
      <p>{width}px</p>
    </div>
  );
}

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

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

function App() {
  useInsertionEffect(() => {
    const style = document.createElement("style");
    style.textContent = ".title {color: red}";
    document.head.appendChild(style);

    return () => style.remove();
  }, []);

  return <h1 className="title">প্রোগ্রামিং শিখুন</h1>;
}

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

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

function App() {
  const [count, setCount] = useState(0);

  const show = useEffectEvent(() => {
    console.log("Current count:", count);
  });

  useEffect(() => {
    const timer = setInterval(() => {
      show();
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <button onClick={() => setCount(count + 1)}>
      কাউন্ট: {count}
    </button>
  );
}

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

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

function App() {
  const [number, setNumber] = useState(1);
  const [name, setName] = useState("");

  const result = useMemo(() => {
    return number * number;
  }, [number]);

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={() => setNumber(number + 1)}>
        বৃদ্ধি
      </button>
      <p>স্কয়ার: {result}</p>
    </div>
  );
}

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

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

function App() {
  const [count, setCount] = useState(0);

  const increase = useCallback(() => {
    setCount(value => value + 1);
  }, []);

  return (
    <div>
      <button onClick={increase}>বৃদ্ধি</button>
      <p>কাউন্ট: {count}</p>
    </div>
  );
}

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

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

function App() {
  const [text, setText] = useState("");
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  function changeText(e) {
    setText(e.target.value);
    startTransition(() => {
      setList(Array.from({length: 1000}, (_, i) =>
        e.target.value + " " + i
      ));
    });
  }

  return (
    <div>
      <input value={text} onChange={changeText} placeholder="সার্চ"/>
      <p>{isPending ? "লোডিং" : ""}</p>
      {list.slice(0, 5).map((item, i) => (
        <div key={i}>{item}</div>
      ))}
    </div>
  );
}

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

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

function App() {
  const [text, setText] = useState("");
  const deferredText = useDeferredValue(text);

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="সার্চ"
      />
      <p>{deferredText}</p>
    </div>
  );
}

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

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

function useOnlineStatus() {
  const [online] = useState(true);

  useDebugValue(online ? "অনলাইন" : "অফলাইন");

  return online;
}

function App() {
  const online = useOnlineStatus();

  return <p>{online ? "অনলাইন" : "অফলাইন"}</p>;
}

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

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

function App() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>আপনার নাম</label>
      <input id={id}/>
    </div>
  );
}

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

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

const store = {
  value: 0,
  listeners: new Set(),
  subscribe(listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  },
  getSnapshot() {
    return this.value;
  },
  increment() {
    this.value++;
    this.listeners.forEach(listener => listener());
  }
};

function App() {
  const value = useSyncExternalStore(
    store.subscribe.bind(store),
    store.getSnapshot.bind(store)
  );

  return (
    <div>
      <button onClick={() => store.increment()}>বৃদ্ধি</button>
      <p>ভ্যালু: {value}</p>
    </div>
  );
}

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

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

async function updateName(previousState, formData) {
  const name = formData.get("name");
  return " " + name;
}

function App() {
  const [message, formAction, isPending] = useActionState(
    updateName,
    ""
  );

  return (
    <form action={formAction}>
      <input name="name" placeholder="আপনার নাম"/>
      <button disabled={isPending}>সেভ করুন</button>
      <p>{message}</p>
    </form>
  );
}

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

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

function SubmitButton() {
  const {pending} = useFormStatus();

  return (
    <button disabled={pending}>
      {pending ? "" : "সেভ করুন"}
    </button>
  );
}

function App() {
  async function submitForm(formData) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log(formData.get("name"));
  }

  return (
    <form action={submitForm}>
      <input name="name" placeholder="আপনার নাম"/>
      <SubmitButton/>
    </form>
  );
}

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