တုံ့ပြန် ကျူတိုရီရယ်

React Home React Intro React စတင်လိုက်ပါ။ ES6 ကို တုံ့ပြန်ပါ။ Render HTML ကို တုံ့ပြန်ပါ။ JSX ကို တုံ့ပြန်ပါ။ အစိတ်အပိုင်းများကို တုံ့ပြန်ပါ။ React Class React Props အဖြစ်အပျက်များကို တုံ့ပြန်ပါ။ အခြေအနေများကို တုံ့ပြန်ပါ။ တုံ့ပြန်မှုစာရင်းများ တုံ့ပြန်မှုပုံစံများ Router ကို တုံ့ပြန်ပါ။ တုံ့ပြန်မှတ်စု CSS Styling ကို တုံ့ပြန်ပါ။ Sass Styling ကို တုံ့ပြန်ပါ။

React Hooks

Hook ဆိုတာဘာလဲ။ ပြည်နယ်ကိုအသုံးပြုပါ။ အသုံးပြုမှုအကျိုးသက်ရောက်မှု အသုံးအနှုန်း အသုံးပြုရန် Ref Reducer ကိုအသုံးပြုပါ။ ဖုန်းခေါ်ဆိုမှုကို အသုံးပြုပါ။ Memo ကိုအသုံးပြုပါ။ စိတ်ကြိုက်ချိတ်

တုံ့ပြန်လေ့ကျင့်မှုများ

တုံ့ပြန်မေးခွန်း တုံ့ပြန်လေ့ကျင့်မှုများ တုံ့ပြန်လက်မှတ်

React useStateHook


React useStateHook သည် ကျွန်ုပ်တို့အား လုပ်ဆောင်ချက် အစိတ်အပိုင်းတစ်ခုတွင် အခြေအနေကို ခြေရာခံနိုင်စေပါသည်။

State သည် ယေဘုယျအားဖြင့် အက်ပလီကေးရှင်းတစ်ခုတွင် ခြေရာခံရန် လိုအပ်သည့် အချက်အလက် သို့မဟုတ် ပိုင်ဆိုင်မှုများကို ရည်ညွှန်းသည်။


သွင်းကုန်useState

useStateHook ကိုအသုံးပြုရန်၊ ကျွန်ုပ်တို့သည် ၎င်းကို ကျွန်ုပ်တို့၏ importအစိတ်အပိုင်းတွင် ဦးစွာပြုလုပ်ရန် လိုအပ်ပါသည်။

ဥပမာ-

သင်၏အစိတ်အပိုင်း၏ထိပ်တွင်၊ importHook useState

import { useState } from "react";

ကျွန်ုပ်တို့သည် အမည်ပေးထားသော ပို့ကုန်တစ်ခုဖြစ်သောကြောင့် ပျက်ပြားသွားကြောင်း သတိပြုပါ useStatereact

ပျက်စီးခြင်းအကြောင်းပိုမိုလေ့လာရန်၊ ES6 ကဏ္ဍကို ကြည့်ရှုပါ ။


စတင်လိုက်ပါ။ useState

useStateကျွန်ုပ်တို့၏ လုပ်ဆောင်ချက်အစိတ်အပိုင်းကို ခေါ်ဆိုခြင်းဖြင့် ကျွန်ုပ်တို့၏အခြေအနေကို စတင် လုပ်ဆောင်ပါသည်။

useState ကနဦးအခြေအနေတစ်ခုကို လက်ခံပြီး တန်ဖိုးနှစ်ခုကို ပြန်ပေးသည်-

  • လက်ရှိအခြေအနေ။
  • ပြည်နယ်ကို အပ်ဒိတ်လုပ်သည့် လုပ်ဆောင်ချက်။

ဥပမာ-

လုပ်ဆောင်ချက်အစိတ်အပိုင်း၏ထိပ်တွင် အခြေအနေကို စတင်ပါ။

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

ကျွန်ုပ်တို့သည် ပြန်လာသောတန်ဖိုးများကို ဖျက်ပစ်နေသည်ကိုလည်း ထပ်မံသတိပြုပါ useState

ပထမတန်ဖိုး colorသည် ကျွန်ုပ်တို့၏လက်ရှိအခြေအနေဖြစ်သည်။

ဒုတိယတန်ဖိုး၊ setColor၊ သည် ကျွန်ုပ်တို့၏ပြည်နယ်ကို မွမ်းမံရန်အတွက် အသုံးပြုသည့် fuction ဖြစ်သည်။

ဤအမည်များသည် သင်နှစ်သက်သလို အမည်ပေးနိုင်သော ကိန်းရှင်များဖြစ်သည်။

နောက်ဆုံးအနေဖြင့်၊ ကျွန်ုပ်တို့သည် ကနဦးအခြေအနေအား ဗလာစာကြောင်းအဖြစ် သတ်မှတ်သည်- useState("")


w3schools CERTIFIED . 2022

လက်မှတ်ရယူပါ။

React modules များကိုဖြည့်ပါ၊ လေ့ကျင့်ခန်းများလုပ်ပါ၊ စာမေးပွဲကိုဖြေဆိုပြီး w3schools မှ certified ဖြစ်လာပါ။

$95 စာရင်းသွင်းပါ။

ပြည်နယ်ဖတ်ပါ။

ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏အစိတ်အပိုင်းတွင် မည်သည့်နေရာတွင်မဆို ကျွန်ုပ်တို့၏ပြည်နယ်ကို ယခုထည့်သွင်းနိုင်ပြီဖြစ်သည်။

ဥပမာ-

ပြန်ဆိုထားသော အစိတ်အပိုင်းရှိ state variable ကိုသုံးပါ။

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));


ပြည်နယ်ကို အပ်ဒိတ်လုပ်ပါ။

ကျွန်ုပ်တို့၏ပြည်နယ်ကို အပ်ဒိတ်လုပ်ရန်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ပြည်နယ် အဆင့်မြှင့်တင်မှုလုပ်ဆောင်ချက်ကို အသုံးပြုပါသည်။

ကျွန်ုပ်တို့သည် အခြေအနေကို တိုက်ရိုက်မွမ်းမံခြင်းမပြုသင့်ပါ။ ဥပမာ- color = "red"ခွင့်မပြုပါ။

ဥပမာ-

အခြေအနေကို အပ်ဒိတ်လုပ်ရန် ခလုတ်ကို အသုံးပြုပါ-

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));


နိုင်ငံတော်က ဘယ်လိုထိန်းထားနိုင်မလဲ။

Hook သည် useStatestrings များ၊ နံပါတ်များ၊ booleans ၊ arrays ၊ objects နှင့် မည်သည့်ပေါင်းစပ်မှုကိုမဆို ခြေရာခံရန် အသုံးပြုနိုင်သည်။

တစ်ဦးချင်းတန်ဖိုးများကိုခြေရာခံရန် state Hooks အများအပြားကို ကျွန်ုပ်တို့ ဖန်တီးနိုင်သည်။

ဥပမာ-

များစွာသောပြည်နယ် Hooks ဖန်တီးပါ-

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

သို့မဟုတ်၊ ကျွန်ုပ်တို့သည် ပြည်နယ်တစ်ခုကိုသာ အသုံးပြုနိုင်ပြီး ၎င်းအစား အရာဝတ္ထုတစ်ခုကို ထည့်သွင်းနိုင်သည်။

ဥပမာ-

အရာဝတ္ထုတစ်ခုကို ကိုင်ဆောင်ထားသည့် Hook တစ်ခုတည်းကို ဖန်တီးပါ-

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

ယခု ကျွန်ုပ်တို့သည် အရာဝတ္ထုတစ်ခုတည်းကို ခြေရာခံနေသောကြောင့်၊ အစိတ်အပိုင်းကို တင်ဆက်သည့်အခါ ထိုအရာဝတ္တုကို ကိုးကားပြီး ထိုအရာဝတ္ထု၏ ပိုင်ဆိုင်မှုကို လိုအပ်ပါသည်။ (ဥပမာ car.brand)


ပြည်နယ်ရှိ အရာဝတ္ထုများနှင့် Array များကို အပ်ဒိတ်လုပ်ခြင်း။

ပြည်နယ်ကို အပ်ဒိတ်လုပ်သောအခါ၊ ပြည်နယ်တစ်ခုလုံးကို အစားထိုးရေးသားပါမည်။

ကျွန်ုပ်တို့၏ကား၏အရောင်ကိုသာ အပ်ဒိတ်လုပ်လိုလျှင်ကော။

အကယ်၍ ကျွန်ုပ်တို့သာခေါ်ဆို ပါက setCar({color: "blue"})၊ ၎င်းသည် အမှတ်တံဆိပ်၊ မော်ဒယ်နှင့် နှစ်တို့ကို ကျွန်ုပ်တို့နိုင်ငံမှ ဖယ်ရှားမည်ဖြစ်သည်။

ကျွန်ုပ်တို့ကိုကူညီရန် JavaScript ဖြန့်ကျက်အော်ပရေတာကို အသုံးပြုနိုင်သည်။

ဥပမာ-

ကား၏အရောင်ကိုသာ အပ်ဒိတ်လုပ်ရန် JavaScript ဖြန့်အော်ပရေတာကို သုံးပါ-

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

ကျွန်ုပ်တို့သည် နိုင်ငံတော်၏ လက်ရှိတန်ဖိုးကို လိုအပ်သောကြောင့်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏လုပ်ဆောင်ချက်သို့ setCarလုပ်ဆောင်ချက်တစ်ခုကို ပေးပို့ပါသည်။ ဤလုပ်ဆောင်ချက်သည် ယခင်တန်ဖိုးကို ရရှိသည်။

ထို့နောက် ကျွန်ုပ်တို့သည် အရာဝတ္တုတစ်ခုကို ပြန်၍ ဖြန့် previousStateကာ အရောင်ကိုသာ ထပ်ရေးသည်။


လေ့ကျင့်ခန်းများဖြင့် သင့်ကိုယ်သင် စမ်းသပ်ပါ။

လေ့ကျင့်ခန်း

useState Hook ကို အသုံးပြု၍ "count" variable ကို ခြေရာခံရန် ဤထုတ်ပြန်ချက်ကို ဖြည့်စွက်ပါ။

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}