ReactJS JSX Sinhala Guide | React.createElement | Front-end Development | SC Guide

ReactJS වල JSX: මොකක්ද මේ, ඇයි මේක ඕනේ?

ආයුබෝවන් යාළුවනේ, කොහොමද ඉතින්? අද අපි කතා කරන්න යන්නේ ReactJS පාවිච්චි කරන ඕනෑම කෙනෙක්ට නැතුවම බැරි දෙයක් ගැන – ඒ තමයි JSX. ඔයා React අලුතින් ඉගෙන ගන්න කෙනෙක්ද, නැත්නම් ටිකක් විතර දන්න කෙනෙක්ද, මේ Article එක ඔයාට JSX ගැන පැහැදිලි අවබෝධයක් දෙයි කියලා මම හිතනවා. React කියන්නේ අද වෙද්දි Front-end Development වල Leader කෙනෙක් වගේ. ඒත්, ඒකේ ලොකුම අංගයක් වන JSX හරියට තේරුම් ගත්තේ නැත්තම් React Coding අපහසු වෙන්න පුළුවන්. එහෙනම්, අපි බලමු JSX කියන්නේ මොකක්ද කියලා.

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

සරලවම කිව්වොත්, JSX කියන්නේ JavaScript XML. ඒ කියන්නේ, JavaScript Code එක ඇතුළෙම HTML වගේ Code ලියන්න අපිට පුළුවන් වෙනවා. අපි සාමාන්‍යයෙන් වෙබ් පිටු හදනකොට HTML වෙනම ලියනවා, JavaScript වෙනම ලියනවානේ. ඒත් React එක්ක වැඩ කරනකොට, UI (User Interface) එකේ පෙනුමයි, ඒකේ Logic එකයි දෙකම එකම තැනක, එහෙමත් නැත්නම් එකම JavaScript File එක ඇතුළේ ලියන්න JSX අපිට ඉඩ දෙනවා. මුලින් මේක ටිකක් අමුතුයි වගේ දැනෙන්න පුළුවන්, මොකද මේක සාමාන්‍ය JavaScript නෙවෙයි. ඒත් මේකෙන් Code එක කියවන්න පහසු වෙනවා වගේම, සංකීර්ණ UI Components හදන එකත් ලේසි වෙනවා.

ඇයි JSX පාවිච්චි කරන්නේ? (Why is JSX used?)

React team එක JSX හදලා තියෙන්නේ ප්‍රධාන හේතු කීපයක් නිසා:

1. Readability (කියවන්න පහසුයි): අපි HTML වගේම Syntax එකක් පාවිච්චි කරන නිසා UI එක කොහොමද පේන්නේ කියලා Code එක බැලුවම ඉක්මනට තේරුම් ගන්න පුළුවන්.
2. Declarative UI (ප්‍රකාශනශීලී UI): JSX වලින් අපි කියන්නේ UI එක කොහොමද පේන්න ඕනේ කියලා මිසක්, ඒක කොහොමද හැදෙන්නේ කියලා නෙවෙයි. මේකෙන් Code එක Maintain කරන්න සහ Debug කරන්න ලේසි වෙනවා.
3. Error Prevention (දෝෂ අඩුයි): JSX Syntax එක Compile කරනකොටම (Transpile) Syntax errors අල්ල ගන්නවා. මේකෙන් Run-time errors අඩු වෙනවා.
4. Performance Optimization (කාර්ය සාධනය වැඩි දියුණු කිරීම): React Babel වගේ Tools එක්ක JSX Convert කරනකොට Performance Optimize කරන්න පුළුවන් විදියට Code Generate කරනවා.

JSX React.createElement() බවට හැරවීම (How JSX translates to React.createElement())

ගොඩක් අය හිතනවා JSX කියන්නේ Browser එකට තේරෙන දෙයක් කියලා. ඒත් ඇත්තටම එහෙම නෙවෙයි. Browser එකට තේරෙන්නේ සාමාන්‍ය JavaScript විතරයි. එහෙනම් JSX වැඩ කරන්නේ කොහොමද? අපි Project එක හදනකොට Babel වගේ Transpiler එකක් පාවිච්චි කරනවා. මේ Transpiler එකෙන් JSX Code එක සාමාන්‍ය JavaScript Code එකක් වෙන React.createElement() Calls බවට Convert කරනවා. උදාහරණයක් විදියට බලමුකෝ:

// JSX Code එකක්const myElement = <h1>Hello, React!</h1>;// මේක Babel වලින් Convert වෙන්නේ මෙහෙමයිconst myElement = React.createElement('h1', null, 'Hello, React!');

තව පොඩ්ඩක් සංකීර්ණ උදාහරණයක් ගමු:

// JSX Code එකක්const greeting = <div>  <p>Welcome to JSX!</p>  <p>This is a paragraph.</p></div>;// මේක Babel වලින් Convert වෙන්නේ මෙහෙමයිconst greeting = React.createElement(  'div',  null,  React.createElement('p', null, 'Welcome to JSX!'),  React.createElement('p', null, 'This is a paragraph.'));

දැන් තේරෙනවා නේද JSX කියන්නේ ඇත්තටම JavaScript වලට ලේසියෙන් HTML වගේ ලියන්න තියෙන Shortcut එකක් වගේ දෙයක් කියලා!

ප්‍රායෝගිකව JSX පාවිච්චි කරමු: Code උදාහරණ

දැන් අපි බලමු JSX ඇතුළට JavaScript Expressions කොහොමද දාන්නේ කියලා, ඒ වගේම Attributes සහ Props ගැනත් කතා කරමු.

JavaScript Expressions JSX එකට දාමු! ({}) (Embedding JavaScript Expressions in JSX)

JSX එකේ ලොකුම පහසුවක් තමයි JavaScript Code කෙලින්ම HTML වගේ Syntax එක ඇතුළටම දාන්න පුළුවන් වීම. මේකට අපි curly braces {} පාවිච්චි කරනවා. මේක ඇතුළට අපිට Variables, Functions, Arithmetic Operations වගේ ඕනෑම JavaScript Expression එකක් දාන්න පුළුවන්. ඒත් Statements (if/else, for loops) කෙලින්ම දාන්න බෑ. Expressions (යම් අගයක් දෙන දෙයක්) විතරයි දාන්න පුළුවන්.

Variables පාවිච්චි කිරීම

function GreetUser() {  const userName = "සුපුරුදු යාලුවා"; // සිංහල නමක් දැම්මා අපි  const welcomeMessage = <h2>ආයුබෝවන්, {userName}!</h2>;  return welcomeMessage;}ReactDOM.render(<GreetUser />, document.getElementById('root'));

Arithmetic Operations

function ProductPrice() {  const price = 1500;  const tax = 0.10;  const finalPrice = price + (price * tax);  return <p>මුළු මිල: රුපියල් {finalPrice} යි.</p>;}ReactDOM.render(<ProductPrice />, document.getElementById('root'));

Function Calls

function calculateSum(a, b) {  return a + b;}function DisplaySum() {  return <p>10 සහ 20 එකතුව: {calculateSum(10, 20)}</p>;}ReactDOM.render(<DisplaySum />, document.getElementById('root'));

JSX Elements වලට තනි Root Element එකක් තිබිය යුතුයි (Single Root Element Rule)

මේක JSX වල වැදගත්ම රීතියක්. JSX වලින් Component එකක් Return කරනකොට හැම වෙලාවෙම තනි Root Element එකක් තියෙන්න ඕනේ. ඒ කියන්නේ, එකට යාබදව තියෙන Elements කිහිපයක් එකපාර Return කරන්න බෑ. ඒවා div එකක්, span එකක් වගේ Parent Element එකක් ඇතුළේ Wrap කරන්න ඕනේ.

// වැරදි විදිය (Error දෙනවා!)function BadComponent() {  return (    <h1>පළවෙනි Heading එක</h1>    <p>පළවෙනි Paragraph එක</p>  );}// නිවැරදි විදිය (තනි Root Element එකක් එක්ක)function GoodComponent() {  return (    <div>      <h1>පළවෙනි Heading එක</h1>      <p>පළවෙනි Paragraph එක</p>    </div>  );}// React Fragments පාවිච්චි කිරීම (<> හෝ <React.Fragment>)// මේකෙන් DOM එකට අමතර <div> එකක් එකතු වෙන්නේ නෑ.function FragmentComponent() {  return (    <>      <h1>Fragment එකක් එක්ක</h1>      <p>මේක DOM එකට <div> එකක් add කරන්නේ නෑ.</p>    </>  );}

<></> කියන්නේ Short-hand Syntax එක. ඒක <React.Fragment></React.Fragment> වගේමයි වැඩ කරන්නේ. මේකෙන් DOM එකට අමතර Node එකක් එකතු වෙන්නේ නැති නිසා Performance වලටත් හොඳයි.

Attributes vs. Props

HTML Tags වලට Attributes තියෙනවා වගේම, JSX Elements වලටත් Attributes තියෙනවා. ඒ වගේම React Components වලට Props (Properties) කියලා විශේෂ Attributes තියෙනවා. අපි මේ දෙක ගැන පොඩ්ඩක් බලමු.

Standard HTML Attributes

JSX එකේදී HTML Attributes පාවිච්චි කරනකොට පොඩි වෙනස්කම් කීපයක් තියෙනවා. උදාහරණයක් විදියට, HTML වල class කියලා CSS Class එකක් දානවනේ, ඒත් JSX එකේදී අපි className කියලා පාවිච්චි කරන්න ඕනේ. ඒ වගේම for වෙනුවට htmlFor පාවිච්චි කරන්න ඕනේ. මේවා JavaScript Keywords එක්ක ගැටෙන නිසා ඇතිවුණු වෙනස්කම්.

function ButtonComponent() {  return (    <button className="my-button" onClick={() => alert('Button Clicked!')}>      Click Me    </button>  );}ReactDOM.render(<ButtonComponent />, document.getElementById('root'));

Custom Component Props

React වලදී Components අතර Data Passing කරන්න අපි Props පාවිච්චි කරනවා. මේවා Custom Attributes වගේ ක්‍රියා කරනවා.

function Greeting(props) {  return <h2>හලෝ, {props.name}!</h2>;}function App() {  return (    <div>      <Greeting name="දසුන්" />      <Greeting name="අයේෂා" />    </div>  );}ReactDOM.render(<App />, document.getElementById('root'));

මෙතනදී name="දසුන්" කියන්නේ Greeting Component එකට අපි name කියන Prop එක Pass කරන විදියයි. Component එක ඇතුළේ props.name විදියට ඒකට Access කරන්න පුළුවන්.

Troubleshooting සහ Best Practices

JSX එක්ක වැඩ කරනකොට මුලින් මුලින් පොඩි පොඩි වැරදි වෙන්න පුළුවන්. ඒ වගේම හොඳට Code කරන්න නම් Best Practices ටිකක් දැනගෙන ඉන්න එක වැදගත්.

නිතරම වෙන වැරදි (Common Syntax Errors)

1. Unclosed Tags: HTML වල වගේම JSX වලත් හැම Tag එකක්ම වහන්න ඕනේ (<img> වගේ Self-closing Tags වලට <img /> විදියට / එක දාන්න).
   <p>Hello!<p> <-- වැරදි!
   <p>Hello!</p> <-- නිවැරදි!
2. class වෙනුවට className: මේක අලුතින් React කරන අයට නිතරම වෙන වැරැද්දක්. JavaScript වල class කියන්නේ Keyword එකක් නිසා JSX වලදී CSS Class එකක් දාන්න className පාවිච්චි කරන්න ඕනේ.
   <div class="container"> <-- වැරදි!
   <div className="container"> <-- නිවැරදි!
3. Objects are not valid as a React child: මේ Error එක එන්නේ අපි JSX ඇතුළට Object එකක් කෙලින්ම Render කරන්න හැදුවොත්. JSX එකට Expressions දාන්න පුළුවන් වුණාට, ඒකෙන් Return වෙන්නේ String, Number, Element, Array වගේ Render කරන්න පුළුවන් දෙයක් වෙන්න ඕනේ. Object එකක් කෙලින්ම Render කරන්න බෑ.
   const myObject = { name: "John" };
<p>My Name: {myObject}</p> <-- වැරදි! (Error දෙනවා!)
   <p>My Name: {myObject.name}</p> <-- නිවැරදි! (Object එකේ Property එකක් Access කරන නිසා)

Best Practices

1. Curly Braces {} නිතරම පාවිච්චි කරන්න: JavaScript expressions, variables, function calls, conditional rendering (Ternary Operator) වගේ දේවල් JSX ඇතුළට දාන්න මේක පාවිච්චි කරන්න.
2. Single Root Element: හැම Components එකක්ම Return කරනකොට එකම Root Element එකක් ඇතුළේ Wrap කරන්න. <div> එකක් හෝ <> (Fragment) එකක් පාවිච්චි කරන්න පුළුවන්.
3. Self-closing Tags: <img />, <input /> වගේ Tags වහන්න / එක පාවිච්චි කරන්න. HTML වල <img> විදියට තිබ්බට JSX වලදී මේක අත්‍යවශ්‍යයි.
4. Proper Indentation: Code එක කියවන්න පහසු වෙන්න Indentation හරියට පාවිච්චි කරන්න. Prettier වගේ Code Formatter එකක් පාවිච්චි කරන එක මේකට හොඳ විසඳුමක්.
5. CamelCase for Attributes/Props: JSX වල Attributes සහ Props දානකොට CamelCase පාවිච්චි කරන්න (උදා: onClick, className).

නිගමනය (Conclusion)

ඉතින් යාළුවනේ, මේ Article එකෙන් අපි ReactJS වල JSX ගැන මුල ඉදන්ම කතා කළා. JSX කියන්නේ JavaScript සහ HTML දෙකම එකට එකතු කරලා, අපිට Components ලියන්න පහසුවක් සලසන බලගතු Tool එකක්. මේක හරියට තේරුම් අරගෙන පාවිච්චි කරන එකෙන් ඔයාගේ React Development Journey එක ගොඩක් පහසු වෙනවා. මුලින් අමාරු වුණාට, Practice කරනකොට ඔයාට මේක හුරු වෙයි.

දැන් ඔයාට JSX ගැන හොඳ අදහසක් ඇති කියලා මම හිතනවා. මේක තවත් හොඳින් තේරුම් ගන්න නම්, ඔයාගේම React Project එකක් පටන් අරගෙන මේ Concepts ටික Try කරලා බලන්න. Code ලියන තරමට තමයි ඕනෑම දෙයක් හොඳින් ඉගෙන ගන්න පුළුවන්.

මේ Article එක ගැන ඔයාගේ අදහස් Comment Section එකේ දාලා යන්න අමතක කරන්න එපා. මොකද ඔයාගේ Feedback මට ගොඩක් වටිනවා. මේ වගේ තවත් Article ඕනේ නම් ඒකත් කියන්න. එහෙනම්, ඊළඟ Article එකෙන් හම්බවෙමු! React එක්ක වැඩ කරද්දී සුභ පතනවා!