React ဆိုတာ ဘာလဲ။ Non-developer များအတွက် ရိုးရှင်းသော လမ်းညွှန်

React သည် user interface တည်ဆောက်ရန် JavaScript library ဖြစ်သည် — လူများ မြင်ပြီး နှိပ်သော အက်ပ်၏ အပိုင်း။ ခလုတ်၊ ကုန်ပစ္စည်းကတ် သို့မဟုတ် စာမျက်နှာတစ်ခုလုံးကဲ့သို့ ပြန်သုံးနိုင်သော component များဖြင့် စခရင်များကို တည်ဆောက်သည်။ React က စခရင်ကို သင့်ဒေတာနှင့် တစ်ထပ်တည်း ထားသည် — ဒေတာ ပြောင်းလဲသောအခါ ထိုဒေတာပေါ် မူတည်သော စာမျက်နှာအပိုင်းများကို အပ်ဒိတ် လုပ်သည်။ Facebook (ယခု Meta) တွင် ဖန်တီးခဲ့ပြီး open source ဖြစ်သည်၊ web အက်ပ်များ တည်ဆောက်ရာတွင် အကျယ်ပြန့်ဆုံး နည်းလမ်းတစ်ခု ဖြစ်သည်။

AI ဖြင့် တည်ဆောက်သည့်အခါ ဘာကြောင့် အရေးကြီးသလဲ

AI tool ဖြင့် web အက်ပ်တည်ဆောက်လျှင် ၎င်းကို React ဖြင့် ရေးထားနိုင်ချေ များသည်။ AI app builder အများအပြားက ကျော်ကြားပြီး စာတမ်းကောင်းသည့်အတွက်၊ ကုဒ်အများအပြား AI model များ သင်ယူနိုင်သည့်အတွက် React ကို ပုံမှန် အသုံးပြုကြသည်။

React ရေးရန် မလိုပါ။ သို့သော် အနည်းငယ် သိထားခြင်းက အောက်ပါအတွက် ကူညီသည်:

• ပြောင်းလဲမှုများကို တိကျစွာ ဖော်ပြခြင်း။ "ProductCard component ရဲ့ ဈေးနှုန်းကို စာလုံးထူပါ" ဟု ပြောခြင်းက "တစ်နေရာရာ၌ ဈေးနှုန်းကို ထင်ရှားအောင် လုပ်ပါ" ထက် ရှင်းလင်းသည်။
• အမှားများကို နားလည်ခြင်း။ "Cannot read properties of undefined" သို့မဟုတ် "Too many re-renders" ကဲ့သို့ message များက ပိုနားလည်လာသည်။
• သင့်လျော်သော ရွေးချယ်မှုများ ပြုလုပ်ခြင်း။ Plain React အက်ပ်များသည် browser တွင် ရေးဆွဲသဖြင့် search မြင်ရမှုနှင့် ပထမ load အမြန်နှုန်းကို သက်ရောက်သည်။ ထိုအရာကို သိခြင်းက တခြား setup ကို မတောင်းရန် ဆုံးဖြတ်ရာတွင် ကူညီသည်။
• နောက်ပိုင်း developer များနှင့် အလုပ်လုပ်ခြင်း။ React သည် အသုံးများသော ကျွမ်းကျင်မှုဖြစ်သဖြင့် developer တစ်ဦးက React codebase ကို အလွယ်တကူ ယူနိုင်သည်။

နေ့စဉ်ဘဝမှ ဥပမာ

LEGO ကို စဉ်းစားပါ။ မော်ဒယ်တစ်ခုလုံးကို ကျောက်တုံးတစ်လုံးမှ ထွင်းမထုဘဲ စံ brick များဖြင့် တည်ဆောက်သည်။ Brick အနည်းငယ်က ဘီးတစ်ခု ဖြစ်စေသည်၊ ဘီးလေးခုနှင့် အခြားအပိုင်းများက ကား ဖြစ်စေသည်။ ကားတိုင်းမှာ အနီရောင်ဘီးရှိစေချင်ရင် ဘီးဒီဇိုင်းကို တစ်ကြိမ်ပြောင်းလျှင် လုံလောက်သည်။

React component များသည် brick များ ဖြစ်သည်။ Button component ကို ProductCard အတွင်း သုံးပြီး ProductCard ကို ProductGrid အတွင်း သုံးပြီး ProductGrid သည် ShopPage ၏ အစိတ်အပိုင်း ဖြစ်သည်။ Button ကို တစ်ကြိမ်ပြောင်းလျှင် အက်ပ်ရှိ ခလုတ်အားလုံး ပြောင်းသည်။

အခြား တစ်ဝက်မှာ ညွှန်ကြားချက်များ ပြောင်းသည်နှင့် LEGO မော်ဒယ်က ကိုယ်တိုင် ပြန်ဆောက်သည်ဟု စိတ်ကူးပါ။ React ၏ နောက်ထပ် နည်းလမ်းဖြစ်သည် — လက်ရှိဒေတာအတွက် စခရင်က ဘယ်လိုကြည့်ရမလဲဟု သင်ဖော်ပြပြီး React က စာမျက်နှာပေါ်တွင် ဘာပြောင်းရမလဲ ဆုံးဖြတ်သည်။

အဓိက အယူအဆများ

Component များ

Component ဆိုသည်မှာ interface အပိုင်းတစ်ခုကို ပြန်ပေးသော JavaScript function ဖြစ်သည်။ React ၏ စာတမ်းအရ component သည် ကိုယ်ပိုင် logic နှင့် ပုံပန်းရှိသော UI အပိုင်းတစ်ခု ဖြစ်သည်။ Component အမည်များသည် အက္ခရာကြီးဖြင့် စသည်။

JSX

Component များကို ပုံမှန်အားဖြင့် JSX ဖြင့် ရေးသည်။ JavaScript ထဲ ရောနှော ထားသော HTML နှင့် ဆင်တူသည်:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX သည် မလိုအပ်သော်လည်း React ၏ စာတမ်းက ပရောဂျက်အများစုက သုံးသည်ဟု ဖော်ပြသည်။ Browser တွင် run မီ ရိုးရိုး JavaScript သို့ ပြောင်းလဲသည်။

Props

Props ဆိုသည်မှာ component သို့ ထည့်ပေးသော input များ ဖြစ်ပြီး ပြန်သုံးနိုင်သော အစိတ်အပိုင်းပေါ်ရှိ ချိန်ညှိချက်များနှင့် ဆင်တူသည်:

<ProductCard name="Lavender Candle" price={24} />

တူညီသော ProductCard က ကုန်ပစ္စည်းမည်သည့်အရာမဆို ပြနိုင်သည်။

State

State ဆိုသည်မှာ အက်ပ် run နေစဉ် ပြောင်းလဲနိုင်သော component က မှတ်ထားသည့် အချက်အလက် ဖြစ်သည် — menu ဖွင့်ထားခြင်း ရှိ/မရှိ၊ search box တွင် ရိုက်ထားသည်၊ ခြင်းတောင်းထဲ ပစ္စည်းဘယ်နှစ်ခု ရှိသည်။ State ပြောင်းလဲသောအခါ React က component ကို ပြန်ရေးဆွဲပြီး စခရင်က ကိုက်ညီအောင် ပြုလုပ်သည်။

Hook များ

Hook ဆိုသည်မှာ use ဖြင့် စတင်သော function များ ဖြစ်သည်၊ ဥပမာ useState (တန်ဖိုးတစ်ခု မှတ်ရန်) နှင့် useEffect (render ပြီးနောက် code run ရန်၊ ဥပမာ ဒေတာ fetch လုပ်ရန်)။ AI ရေးသော React ကုဒ်တွင် ၎င်းတို့ကို အရာရာတွင် တွေ့ရသည်။

လက်တွေ့ ဥပမာ — ခြင်းတောင်းရေတွက်ကိရိယာ

သင့် online ဆိုင်တွင် "Add to cart" ခလုတ်နှင့် ပစ္စည်းအရေအတွက် ပြသော ခြင်းတောင်း icon ရှိသည် ဆိုပါစို့။ React တွင် အောက်ပါအတိုင်း ဖြစ်သည်:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

ဝယ်ယူသူက "Add to cart" ကို နှိပ်သောအခါ ဖြစ်ပျက်ပုံ:

1. ခလုတ်၏ onClick က onAdd ကို ခေါ်ပြီး setCartCount ကို ခေါ်သည်။
2. React က cartCount state ကို 0 မှ 1 သို့ ပြောင်းသည်။
3. React က Shop ကို ပြန်ရေးဆွဲပြီး count={1} ကို CartIcon သို့ ပေးသည်။
4. စာမျက်နှာတွင် "Cart (1)" ဟု ပြသည်။ "ခလုတ်ထဲရှိ စာသားကို ရှာပြီး ပြောင်းပါ" ဟု ဘယ်သူမှ ရေးစရာ မလိုပါ — စခရင်က ဒေတာကို လိုက်သည်။

ကန့်သတ်ချက်များကိုလည်း သတိပြုပါ။ ဤအရေအတွက်သည် browser ၏ memory တွင် ရှိသည်။ Page ကို refresh လုပ်လျှင် 0 သို့ ပြန်ရောက်သည်။ ခြင်းတောင်းကို ထိန်းသိမ်းလိုလျှင် ခဏမဟုတ်သော နေရာတစ်ခု — cookie၊ browser storage သို့မဟုတ် database ကို backend မှတစ်ဆင့် သိမ်းရမည်။ React က စခရင်ကို ကိုင်တွယ်သည်၊ သင့်ဒေတာကို သိမ်းခြင်း မဟုတ်ပါ။

React သည် web အက်ပ်တွင် နေရာ

"Vite + React" အက်ပ်သည် browser တွင် ရေးဆွဲသည် (single-page app)။ Next.js အက်ပ်သည် စာမျက်နှာများကို ဆာဗာပေါ်တွင် အရင် ရေးဆွဲနိုင်ပြီး search engine နှင့် ပထမ load အမြန်နှုန်းကို ကူညီသည်။

အသုံးများသော ဝေါဟာရများ

အများဆုံး ဖြစ်တတ်သော အမှားနှင့် အယူအဆမှားများ

• "React သည် programming language ဖြစ်သည်။" မဟုတ်ပါ။ JavaScript (သို့မဟုတ် TypeScript) တွင် ရေးပြီး ထိုဘာသာစကားမှ သုံးသော library ဖြစ်သည်။
• "React က ကျွန်ုပ်၏ ဒေတာကို သိမ်းသည်။" State သည် browser တွင် နေပြီး refresh တွင် ပျောက်သည်။ ခိုင်မာသော ဒေတာသည် backend နှင့် database လိုအပ်သည်။
• React ကုဒ်ထဲတွင် လျှို့ဝှက်ချက်များ ထည့်ခြင်း။ React အက်ပ်ရှိ အရာအားလုံးကို ကြည့်သူ၏ browser သို့ ပို့သည်။ ထိုနေရာရှိ API key များသည် အများပြည်သူ မြင်နိုင်သည်။ ဆာဗာပေါ်တွင်သာ ထားပါ။
• "React အက်ပ်များကို search တွင် rank လုပ်၍ မရ။" Client-only render သည် search အတွက် ညံ့သော်လည်း prerendering သို့မဟုတ် server rendering က အများစုကို ပြင်ပေးသည်။
• Component ကြီးများ။ 1,000 စာကြောင်း component တစ်ခုကို လူနှင့် AI နှစ်ဦးစလုံးအတွက် ဘေးကင်းစွာ ပြောင်းရန် ခက်သည်။ သေးသော component များကို တောင်းပါ။
• React web အက်ပ်ကို ဖုန်းအက်ပ်ဟု ယူဆခြင်း။ Browser တွင် run သည် (ဖုန်းပေါ်တွင်ပါ) သော်လည်း App Store အက်ပ် မဟုတ်ပါ။

AI builder အား ဘာတောင်းရမလဲ

• "ဤစာမျက်နှာကို သေးငယ်ပြီး အမည်ပေးထားသော component များအဖြစ် ခွဲပါ၊ component တစ်ခုစီ ဘယ် file တွင် ရှိသလဲ ပြောပါ။"
• "ProductCard component ကို ပြန်သုံးနိုင်အောင် ပြုလုပ်ပါ၊ name၊ price နှင့် image ကို props အဖြစ် ထားပါ။"
• "ခြင်းတောင်းကို refresh လုပ်ပြီးနောက်ပါ ကျန်နေရန် database တွင် သိမ်းပါ။"
• "API key အားလုံးကို ဆာဗာပေါ်တွင် ထားပါ၊ React ကုဒ်က ကျွန်ုပ်တို့၏ ကိုယ်ပိုင် API ကို ခေါ်ရမည်။"
• "ဆာဗာမှ လာသော ဒေတာအတွက် loading နှင့် error state များ ထည့်ပါ။"
• "ဤစာမျက်နှာများအတွက် search မြင်ရမှု အရေးကြီးလျှင် prerender လုပ်ပါ သို့မဟုတ် server-rendered setup သုံးပါ။"
• "ဤအမှားက ဘာကို ဆိုလိုပြီး ဘယ် component မှ လာသလဲ ရိုးရှင်းသော စကားဖြင့် ရှင်းပြပါ။"

ပိုကျယ်သော ပုံရိပ်အတွက် frontend နှင့် backend ကို ကြည့်ပါ၊ AI ရေးထားသော အရာကို စစ်ဆေးရန် AI ရေးထားသော ကုဒ်ကို ပြန်စစ်နည်း ကို ကြည့်ပါ။

Mythex တွင် React

သင်အခြားအရာ မတောင်းလျှင် Mythex သည် ပရောဂျက်အသစ်များကို Vite + React + TypeScript + Tailwind ဖြင့် စတင်သည်၊ chat လုပ်နေစဉ် live preview ကို run ထားသည်။ ပထမ prompt တွင် အခြား setup ကို ဖော်ပြနိုင်သည် — ဥပမာ "Next.js ကို သုံးပါ" သို့မဟုတ် "plain static HTML landing page" — Mythex က သင်ရေးသည်ကို ကြည့်ပြီး ရွေးသည်၊ ထိုအတွက် settings စာမျက်နှာ မရှိပါ။ နည်းပညာ ဘယ်လိုရွေးသလဲ ဆိုသော docs စာမျက်နှာ တွင် ရွေးချယ်စရာများ ရှင်းပြထားသည်။ Free တွင် ကုဒ် editor သည် ဖတ်ရုံသာ ဖြစ်သည်၊ Pro တွင် React ကုဒ်ကို တိုက်ရိုက် တည်းဖြတ်နိုင်ပြီး ပရောဂျက်ကို တခြားနေရာတွင် ဆက်လုပ်ရန် export လုပ်နိုင်သည်။

မေးခွန်းများ