පාඩම 3: State සහ Events - React සිංහලෙන්

Component එකක මතකය: State 🧠

සරලවම කිවහොත්, **State** යනු component එකක් විසින් කළමනාකරණය කරන සහ "මතක තබා ගන්නා" දත්ත වේ. උදාහරණයක් ලෙස අපේ කවුන්ටරයේදී, මේ මොහොතේ ඇති ගණනය (count) එහි State එකයි.

React වල ඇති විශේෂත්වය නම්, component එකක **State එක වෙනස් වූ විට, React ස්වයංක්‍රීයව එම component එක නැවත render (re-render) කර, UI එකේ (පෙනුමේ) අවශ්‍ය වෙනස්කම් පමණක් සිදු කිරීමයි.** මේ නිසා අපට අතින් DOM එක manipulate කිරීමට අවශ්‍ය වන්නේ නැත.

`useState` Hook එක හඳුනාගැනීම

Function Components වලට state එකතු කිරීම සඳහා React මගින් අපට ලබා දෙන විශේෂ function එකක් තමයි `useState` Hook එක.

එය භාවිත කරන ආකාරය මෙසේය:

                        import { useState } from 'react';

const [count, setCount] = useState(0);

මෙම කේත පේළියෙන් සිදුවන්නේ කුමක්දැයි විමසා බලමු:

`useState(0)`: අපි මෙයින් React වලට කියන්නේ "මට state කෑල්ලක් අවශ්‍යයි, එහි ආරම්භක අගය 0 විය යුතුයි" කියාය.
`count`: මෙය අපේ state variable එකයි. `count` හි වත්මන් අගය මෙහි ගබඩා වී ඇත. අපට මෙය JSX තුල `
{count}
` ලෙස භාවිත කළ හැකිය.
`setCount`: මෙය අපේ state එක update කිරීමට භාවිත කරන විශේෂ function එකයි. වැදගත්: අපි කිසිවිටෙක `count = count + 1` ලෙස state එක කෙලින්ම වෙනස් නොකළ යුතුය. සෑම විටම state එක වෙනස් කිරීමට මෙම function එක (`setCount`) භාවිත කළ යුතුය.

Events හසුරුවමු (Handling Events) 🖱️

React වලදී, බොත්තමක් click කිරීම, form එකක් submit කිරීම වැනි පරිශීලක ක්‍රියාකාරකම් (user actions) හැසිරවීමට event handlers භාවිත කරයි. HTML වල `onclick` වැනි දේට සමානව, React වල `onClick` (camelCase) භාවිත කරයි.

අපි function එකක් `onClick` එකට ලබා දීමෙන්, බොත්තම click කළ විට එම function එක ක්‍රියාත්මක කරවා ගත හැක.

                        
function handleClick() {

  console.log('Button Clicked!');

}

<button onClick={handleClick}>Click Me</button>

අපේ කවුන්ටරයට පණ දෙමු! ✨

දැන් අපි `useState` සහ `onClick` භාවිත කර, අපේ `Counter.jsx` ගොනුව ක්‍රියාකාරී කරවමු. ඔබේ code editor එකෙන් `src/Counter.jsx` ගොනුව open කර, එහි ඇති සම්පූර්ණ කේතය වෙනුවට පහත කේතය copy-paste කරන්න.

                        
// src/Counter.jsx

import React, { useState } from 'react'; // 1. useState import කරගැනීම

export default function Counter() {
  // 2. count නමින් state variable එකක් 0 අගයෙන් ආරම්භ කිරීම
  const [count, setCount] = useState(0);

  // 3. අගය වැඩි කරන function එක
  const increment = () => {
    setCount(currentCount => currentCount + 1);
  };

  // 4. අගය අඩු කරන function එක
  const decrement = () => {
    setCount(currentCount => currentCount - 1);
  };
  
  // 5. අගය නැවත 0 කරන function එක
  const reset = () => {
    setCount(0);
  };

  return (
    <div className="counter">
      <div className="display">
        Count: <strong>{count}</strong> {/* 6. State එක මෙතන පෙන්වීම */}
      </div>
      <div className="controls">
        {/* 7. onClick events අදාළ functions වලට සම්බන්ධ කිරීම */}
        <button onClick={decrement}>-</button>
        <button onClick={increment}>+</button>
        <button onClick={reset}>Reset</button>
      </div>
    </div>
  );
}
                        
                    

නියමයි! 🎉

දැන් ඔබේ browser එකේ ඇති app එක බලන්න. `+`, `-`, සහ `Reset` බොත්තම් click කළ විට කවුන්ටරයේ අගය නිවැරදිව වෙනස් වන ආකාරය ඔබට දැකගත හැකි වනු ඇත. ඔබ React හි මූලිකම සහ වැදගත්ම කොටසක් සාර්ථකව ක්‍රියාවට නංවා ඇත!