ၼႂ်းလိၵ်ႈပွင်ႈၵႂၢမ်း(article) ဢၼ်ၼႆႉ ၶႃႈတေၵပ်းသိုပ်ႇလၢတ်ႈၼႄလွင်ႈ React.js ပွတ်းပွတ်းဢွၼ်ႇ သေႁဝ်းၶႃႈ ဢွၼ်ႇၵၼ်သိုပ်ႇၶဝ်းတၢင်းလဵပ်ႈႁဵၼ်း React.js ၸွမ်းၵၼ်ၵႂႃႇၶႃႈ။

React.js ၼႆႉပဵၼ်သင်?

ပဵၼ် JavaScript Library ဢၼ်သၢင်ႈပၼ် ၽၢင်ႁၢင်ႈယူင်ႉမၼ်းပၼ်ႁဝ်းၶႃႈဢၼ် လူၸိုၼ်ႈႁၼ်လႆႈ(UI)ယဝ်ႉၶႃႈ ၶႂ်ႈလၢတ်ႈတေႉၵေႃႈဝႃႈ ႁဝ်းၶႃႈ ၸႂ်ႉ React.js သေ မႃးၶူင်သၢင်ႈပၼ် Web လႄႈ Mobile Application ၶိုၵ်ႉၶိုၵ်ႉၶႅမ်ႉၶႅမ်ႉပၼ်ႁဝ်းၶႃႈလႆႈၼႆၶႃႈ။ (UI) ဢၼ်ဝႃႈၼႆႉတေႉၵေႃႈတေလႆႈဝႃႈပဵၼ် ၽၢင်ႁၢင်ႈယူင်ႉ ပဵၼ် HTMLမၼ်း တႃႇ Front End (ဢၼ်ႁၼ်လႆႈၽၢႆႇတင်းၼႃႈမၼ်းၵူၺ်းၶႃႈ) မၼ်းယဝ်ႉၶႃႈ။

ပိုၼ်းပဵၼ်မႃး React.js

React.js ၼႆႉ လုၵ်ႉတီႈ Facebook Developer ၶူင်သၢင်ႈဢွၵ်ႇမႃးယဝ်ႉ မိူဝ်ႈတႄႇ မၼ်းပဵၼ် Project တၢင်းၼႂ်းၶွင် Facebook သေယဝ်ႉ တႄႇပိုၼ်ႁဵတ်းပဵၼ် Open Source မိူဝ်ႈပီ 2013.05

ၵွပ်ႈသင်ထုၵ်ႇလီႁဵၼ်း React.js?

• Functional (Declarative) ပိူင်လၢႆးပိုၼ်ၽၢဝ်ႇ

ဢဝ်ၶေႃႈပူင်ဢၼ်ဢၼ်သေပိုၼ်ၽၢဝ်ႇ ၸီႉသင် ႁႂ်ႈပဵၼ်ၵၢၼ်ယဝ်ႉလႄႈ ႁႂ်ႈႁဵတ်းၵၢၼ်လႆႈၶေႃႈတွပ်ႇမႃးလီ

// Declarative or Functional Programming
const Array = [1,2,8,9,12];
const lessThen8Filter = arr => arr.filter(item => item <8);
console.log(lessThen8Filter) // 1,2

ဢၼ်ပိၼ်ႈၽူၼ်ၵၼ်တၢင်း မၼ်းတႄႉႁွင်ႉဝႃႈ imperative ဢၼ်ဢမ်ႇၸႂ်ႈ functional Programming ယဝ်ႉၶႃႈ မၼ်းသမ်ႉတေႇဢဝ် ငဝ်ႈတေႃႇႁူဝ် ဢမ်ႇၸႂ်ႉၶေႃႈၸီႉ သင် ႁဵတ်းၵႂႃႇ ပဵၼ်ၶပ်ႉပဵၼ်တွၼ်ႈ ယဝ်ႉၶႃႈ မိူၼ်ၼင်ႇ

// imperative programming
const Array = [1,2,8,9,12];
const lessThen8Filter = arr => {
for (let i = 0; i < arr.length; i++) {
const lessThen8Array = [];
    if(Array[i] < 8) {
    lessThen8Array.push(Array[i]);
    }
  }
return lessThen8Array;
}
console.log(lessThen8Filter(Array)) // 1,2

• Component Base (ၶူင်သၢင်ႈၸႅၵ်ႇၽႄႁဵတ်းတွၼ်ႈလႂ်တွၼ်ႈၼၼ်ႉ)

Component Base ၼႆႉတေႉၵေႃႈ ပိူင်တႅၵ်ႈမၼ်း ႁဝ်းဝႃႈ ႁဝ်းၶႃႈ တေႁဵတ်း Website ဢၼ်ၼိုင်ႈၼႆၶႃႈၼေႃႈ Website ယူင်ႉမၼ်း UIမၼ်း တေမီး Header(ပွတ်းႁူဝ်)၊ Body (ပွတ်းၵၢင်) ယဝ်ႉၵေႃႈ Footer (ပွတ်းတိၼ်) မၼ်းၼႆၶႃႈ။ ၼႂ်းၼႆႉ တီႈ Header မၼ်း ႁဝ်းၶႃႈ တေသႂ်ႇ Logo ယဝ်ႉသေဢမ်ႇၵႃး တီႈ Footer ၵေႃႈ တေသႂ်ႇပႃး ၼႆ ပေႃးၸိူင်ႉၼႆၼႆ ႁဝ်း ၶႃႈ ႁဵတ်းဝႆႉ Logo Component ဢၼ်ၼိုင်ႈ ယဝ်ႉ တီႈ Header ဢၼ်ၼၼ်ႉ တီႈ Footer ႁဝ်းၶႃႈ ၵေႃႈ ၸႂ်ႉ Logo Component ဢၼ်ၼၼ်ႉၵူၺ်း ပေႃးႁဝ်းၶႃႈ ႁဵတ်းၼႆ ႁဝ်းၶႃႈ တေဢမ်ႇလႆႈ တႅမ်ႈသွင်ၵမ်းယဝ်ႉၶႃႈ ဢၼ်ၼႆႉပဵၼ် လႆႈ Component Base ၼႆ ၶႃႈ။ မိူၼ်ၼင် ၶႅပ်ႈႁၢင်ႈ ၼႆႉၶႃႈ

• Learn Once, Write Anywhere (ႁဵၼ်းပွၵ်ႈၼိုင်ႈ၊ တႅမ်ႈလႆႈၵူႈတီႈ)

ၵႂၢမ်းတႆးႁဝ်းၶႃႈ ၵေႃႈ မီးဝႆႉဝႃႈ ꧦလွင်ႈၼိုင်ႈ သွင်တၢင်း၊ ၶိုၼ်ႈမၢၵ်ႈလၢင်း လႆႈပႃးမၢၵ်ႇမူင်ႈꧦ ၼႆၶႃႈ ၼေႃႈ ၼႂ်းၵၢၼ်ၶူင်သၢင်ႈ Programming ၼႆႉၵေႃႈတေႃႈၼင်ႇၼၼ်ၶႃႈ မီးယူႇၶႃႈ မိူၼ်ၼင်ႇ React.js ၼၼ်ႉၶႃႈ ဢေႃႈ သင်ဝႃႈႁဝ်းၶႃႈ မေႃ React.js လီလီ ၼႆ ႁဝ်းၶႃႈ တႅမ်ႈလႆႈ Website ယဝ်ႉသေဢမ်ႇၵႃး ႁဝ်းၶႃႈ ၸႂ်ႉ React Native သေတႅမ်ႈ လႆႈ ပႃးထႅင်ႈ Mobile Application ၶႃႈ ဢေႃႈ။

Websites ဢၼ် ၸိုဝ်ႈယႂ်ႇၵမ်ႈၼမ်ၼမ် ၼွၵ်းမိူင်း (facebook, twitter, Instragam, etc)လႄႈ ၼႂ်းမိူင်း ႁဝ်းၶႃႈ ၵေႃႈၼမ်ယူႇၶႃႈ တေႃႈလဵဝ် website HaoHaa (ႁဝ်းႁႃး) www.haohaa.com ၶႃႈ ၵေႃႈ ၶူင်သၢင်ႈဝႆႉ တၢင်း React.js ၸွမ်းၵၢပ်ႈၸွမ်းပၼ်ယဝ်ႉၶႃႈ၊ ၵွပ်ႈၼႆ သင်ဝႃႈပုၼ်ႈတႃႇတေ ၶူင်သၢင်ႈ Web ဢမ်ႇၼၼ် Web Application သေလႅၵ်ႈလၢႆႈ ၵၢပ်ႈပၼ် Digital ၼႆ ႁဵၼ်းဝႆႉႁူႉဝႆႉ React.js (Front end library ) တေလီတီႈသုတ်းတႃႇလိူၵ်ႈၼႆၶႃႈ။ ယဝ်ႉၵေႃႈ ပုၼ်ႈတႃႇ တိုဝ်ႉတင်းၵၢၼ်ငၢၼ်းၼႆ သင်ဝႃႈႁဝ်းၶႃႈ ႁူႉဝႆႉ ႁဵၼ်းမေႃဝႆႉ တေဢမ်ႇၽိတ်းၶႃႈ။

ႁဵၼ်း React.js တေလႆႈႁူႉမေႃဝႆႉသင်?

• JavaScript (ES5, ES6+)
• HTML
• CSS
• JSX လႄႈ
• npm (node package manager ) ၸိူဝ်းၼၼ်ႉယဝ်ႉ။

ၽိုၼ်ဢိင်

https://reactjs.org/

https://dev.to/adnanbabakan/declarative-programming-with-javascript-2h97

Image from Internet

ငိၼ်းၸူမ်းၶွပ်ႈၸႂ်ၶႃႈ။ သင်ဝႃႈ မီးၶေႃႈထၢမ် ဢမ်ႇၼၼ် မီးတၢင်းႁၼ်ထိုင် ၼႆ တႅမ်ႈထၢမ်မႃးတီႈ comment တီႈတႂ်ႈ ၼႆႉ လႆႈယူႇၶႃႈ ။ တေသိုပ်ႇတႅမ်ႈထႅင်ႈ တွၼ်ႈ သွင်ၶႃႈ :D