ReactJS JSX Tutorial Sinhala - JavaScript XML | SC Guide

හැඳින්වීම: React වලට අත්‍යවශ්‍ය JSX!

ReactJS වලදී අපි UI එක හදන්න JSX කියන syntax එක පාවිච්චි කරනවා. මේක හරියට JavaScript ඇතුලට HTML ලියනවා වගේ දෙයක්. මුලින්ම JSX දැක්කම ටිකක් අමුතුයි වගේ පෙනුනත්, මේක තේරුම් ගත්තම React එක්ක වැඩ කරන එක හරිම ලේසියි. ඉතින්, මේ guide එකෙන් අපි JSX කියන්නේ මොකක්ද, ඇයි ඒක පාවිච්චි කරන්නේ, ඒක හරියට කොහොමද පාවිච්චි කරන්නේ කියලා විස්තරාත්මකව බලමු. ඔයා React අලුතින් පටන් ගන්න කෙනෙක් නම්, මේක ඔයාට ගොඩක් වැදගත් වෙයි. අපි දැන්ම පටන් ගමු!

1. JSX කියන්නේ මොකක්ද? (What is JSX?)

සරලව කිව්වොත්, JSX කියන්නේ JavaScript XML. ඒක JavaScript files ඇතුළේ HTML වගේ syntax එකක් ලියන්න පුළුවන් කරන extension එකක්. React වලදී User Interface (UI) එක විස්තර කරන්න අපි මේක පාවිච්චි කරනවා. මේක HTML නෙවෙයි, JavaScript. හැබැයි HTML වගේ පේන නිසා අපිට Components ලියන එක ගොඩක් ලේසි වෙනවා.

අපේ JSX code එක Browsers වලට කෙලින්ම තේරෙන්නේ නැහැ. ඒ නිසා, Babel වගේ Transpilers පාවිච්චි කරලා මේ JSX code එක සාමාන්‍ය JavaScript code බවට පත් කරනවා. උදාහරණයක් විදිහට, ඔයා මේ වගේ JSX code එකක් ලිව්වොත්:

const element = <h1>Hello, SC Guide!</h1>;

මේක Babel වලින් convert වුනාම මෙහෙම වෙනවා:

const element = React.createElement('h1', null, 'Hello, SC Guide!');

දැන් තේරෙනවා නේද JSX කියන්නේ ඇත්තටම React.createElement() calls වලට තියෙන Shortcut එකක් විතරයි කියලා. මේකෙන් අපේ Code එක කියවන්න සහ ලියන්න පහසු වෙනවා. හිතන්න හැම වෙලාවෙම React.createElement() කියලා ලියන්න වුනා නම් කොච්චර අමාරු වෙයිද කියලා!

2. JavaScript Expressions JSX එකට දාමු (Embedding JavaScript Expressions in JSX)

JSX එකේදී අපිට ඕන නම් JavaScript expressions කෙලින්ම JSX elements ඇතුලට දාන්න පුළුවන්. ඒකට අපි curly braces ({}) පාවිච්චි කරනවා. මේකෙන් Variables, Function calls, Arithmetic Operations වගේ ඕනම JavaScript expression එකක් JSX එක ඇතුලට දාන්න පුළුවන්.

Variables දාන විදිහ:

function App() {
  const name = 'සමීර';
  return <h1>Hello, {name}!</h1>;
}

මේකෙන් “Hello, සමීර!” කියලා output එකක් එනවා.

Function Calls දාන විදිහ:

function formatUser(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = { firstName: 'ඉසුරු', lastName: 'පෙරේරා' };

function App() {
  return (
    <h2>
      ආයුබෝවන්, {formatUser(user)}!
    </h2>
  );
}

මෙහිදී, formatUser(user) කියන function එකෙන් return වෙන String එක JSX එක ඇතුලට වැටෙනවා.

Arithmetic Operations දාන විදිහ:

function App() {
  const num1 = 10;
  const num2 = 5;
  return <p>එකතුව: {num1 + num2}</p>;
}

මේකෙන් “එකතුව: 15” කියලා පෙන්වයි. මේ විදිහට {} ඇතුළේ JavaScript expressions දාන්න පුළුවන් වීම නිසා අපිට Dynamic UI එකක් හදන්න පුළුවන් වෙනවා. මේක තමයි React වල තියෙන සුපිරිම feature එකක්!

3. JSX වල නීති රීති සහ Best Practices (JSX Rules and Best Practices)

JSX පාවිච්චි කරනකොට මතක තියාගන්න ඕන වැදගත් නීති රීති කිහිපයක් තියෙනවා:

තනි Root Element එකක් තිබිය යුතුයි (Single Root Element):

JSX elements ගොඩක් return කරනවා නම්, ඒවා හැම වෙලාවෙම තනි Parent element එකකින් wrap වෙලා තියෙන්න ඕනේ. මේකට <div> එකක් වගේ HTML tag එකක් හෝ React Fragments (<></> හෝ <React.Fragment></React.Fragment>) පාවිච්චි කරන්න පුළුවන්. Fragments වලින් DOM එකට අලුත් Node එකක් add වෙන්නේ නැහැ. ඒක ගොඩක් වෙලාවට හොඳ practice එකක්.

වැරදි විදිහ:

function App() {
  return (
    <h1>Hello!</h1>
    <p>Welcome to JSX.</p> // Error: Adjacent JSX elements must be wrapped in an enclosing tag
  );
}

නිවැරදි විදිහ (<div> පාවිච්චි කරලා):

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <p>Welcome to JSX.</p>
    </div>
  );
}

නිවැරදි විදිහ (Fragments පාවිච්චි කරලා - මේක ගොඩක් වෙලාවට නිර්දේශ කරනවා):

function App() {
  return (
    <>
      <h1>Hello!</h1>
      <p>Welcome to JSX.</p>
    </>
  );
}

Attributes vs. Props:

HTML වල Attributes වගේම JSX වලත් Properties (Props) තියෙනවා. හැබැයි ඒවා නම් කරන විදිහේ පොඩි වෙනස්කම් තියෙනවා. උදාහරණයක් විදිහට, HTML වල class කියලා පාවිච්චි කරන එක JSX වලදී className විදිහට පාවිච්චි වෙනවා. මොකද class කියන එක JavaScript වල Reserved keyword එකක් නිසා.

ඒ වගේම for කියන HTML attribute එක වෙනුවට JSX වල htmlFor පාවිච්චි කරනවා. අනික, JSX Attributes camelCase වලින් තමයි ලියන්නේ (e.g., tabIndex, onClick).

function MyButton() {
  const handleClick = () => alert('බොත්තම ක්ලික් කළා!');
  return (
    <button
      className="my-custom-button" 
      onClick={handleClick} 
      id="submitButton"
    >
      මාව ක්ලික් කරන්න!
    </button>
  );
}

මෙතන className, onClick, id කියන්නේ JSX Attributes (Props).

Self-closing Tags:

Image tags (<img>), input tags (<input>), break tags (<br>) වගේ HTML වල self-closing tags JSX වලදී අනිවාර්යයෙන්ම self-close කරන්න ඕනේ. ඒ කියන්නේ, <img />, <input />, <br /> විදිහට තමයි ලියන්න ඕනේ.

Common Issues (සුලබ ගැටලු):

`Objects are not valid as a React child` Error එක:

මේ error එක එන්නේ ඔයා JSX එක ඇතුලට Object එකක් කෙලින්ම render කරන්න හැදුවොත්. JSX එකට numbers, strings, arrays, booleans, null, undefined වගේ primitive values කෙලින්ම දාන්න පුළුවන් වුනාට Objects කෙලින්ම දාන්න බැහැ.

උදාහරණය (වැරදි):

const myObject = { id: 1, name: 'Test' };
function App() {
  return <p>{myObject}</p>; // Error! Objects are not valid as a React child
}

නිවැරදි විදිහ:

const myObject = { id: 1, name: 'Test' };
function App() {
  return <p>ID: {myObject.id}, Name: {myObject.name}</p>;
}

මතක තියාගන්න, object එකක් render කරන්න ඕන නම් ඒකේ properties අරගෙන, ඒවා string, number වගේ values විදිහට render කරන්න ඕනේ.

අවසන් වශයෙන් (Conclusion)

ඉතින්, JSX කියන්නේ React වල UI එක හදන්න පාවිච්චි කරන සුපිරිම Tool එකක්. මුලින් අමාරු වගේ පෙනුනත්, මේකෙන් අපේ Code එක ගොඩක් Clean සහ කියවන්න ලේසි වෙනවා. {} පාවිච්චි කරලා JavaScript expressions embed කරන එක, Single Root Element Rule එක, className වගේ Attributes හරියට පාවිච්චි කරන එක වගේ දේවල් මතක තියාගෙන Practice කරන්න. React එක්ක වැඩ කරනවා නම් JSX කියන්නේ නැතුවම බැරි දෙයක්!

ඔයාගේ React Project වලට මේ දේවල් add කරලා බලන්න. JSX ගැන තව මොනවා හරි දැනගන්න තියෙනවා නම්, පහලින් Comment කරන්න! අපි කතා කරමු! තව මොනවා ගැනද ඔයාලට දැනගන්න ඕනේ කියලා කියන්නත් පුළුවන්. ඊළඟ ලිපියෙන් හම්බවෙමු!