පාඩම 7: React Components: කේතය කුඩා කොටස් වලට වෙන් කිරීම 🧱

React හි ප්‍රධානතම ශක්තියක් වන Components භාවිතයෙන්, අපගේ app එකේ කේතය වඩාත් පිළිවෙලට සහ නැවත භාවිතා කළ හැකි ලෙස සකස් කරමු.

---

Components යනු කුමක්ද?

සරලවම කිවහොත්, Components යනු ඔබගේ UI (User Interface) එකේ ස්වාධීන, නැවත භාවිතා කළ හැකි කොටස් වේ. LEGO කෑලි වලින් විවිධ දේ සෑදීම මෙන්, React වලදී අප Components එකලස් කර සම්පූර්ණ UI එකක් නිර්මාණය කරයි. මෙහි ප්‍රධාන වාසි කිහිපයකි:

• කේතය පිළිවෙලට තබා ගැනීම (Organization): එක් එක් component එකට අදාළ logic සහ පෙනුම (JSX) එම component එක තුලම තබාගත හැක.
• නැවත භාවිතා කිරීම (Reusability): එකම component එක, app එකේ විවිධ ස්ථාන වල, විවිධ දත්ත සමඟ නැවත නැවත භාවිතා කළ හැක.
• කළමනාකරණය පහසු වීම (Maintainability): යම් කොටසක වෙනසක් කිරීමට අවශ්‍ය වූ විට, සම්පූර්ණ app එකම වෙනස් නොකර, අදාළ component එක පමණක් වෙනස් කිරීම ප්‍රමාණවත් වේ.

---

නව ෆෝල්ඩර් ව්‍යුහය

අපගේ Counter Card එක, තවත් කුඩා components තුනකට (Header, Display, Actions) වෙන් කරමු. ඒ සඳහා, `components` ෆෝල්ඩරය තුල තවත් අලුත් ගොනු 3ක් සාදමු.

counter-app/
└── src/
    ├── components/
    │   ├── Counter.jsx          <-- Parent Component
    │   ├── CounterDisplay.jsx   <-- අලුත් Component
    │   ├── CounterActions.jsx   <-- අලුත් Component
    │   └── CounterHeader.jsx    <-- අලුත් Component
    ├── App.jsx
    └── main.jsx

Props යනු කුමක්ද?

Props (properties என்பதன் சுருக்கம்) යනු parent component එකක සිට child component එකකට දත්ත ගෙන යාමට භාවිතා කරන ක්‍රමයයි. HTML attributes මෙන්, අපට component tags වලට props ලබා දිය හැක. Child component එක තුල, මෙම props, function එකේ argument එකක් ලෙස ලබාගෙන භාවිතා කළ හැක.

---

1. කුඩා UI Components නිර්මාණය කිරීම (Child Components)

`CounterHeader.jsx` (මාතෘකාව සඳහා)

මෙය සරලවම Card Header එක පෙන්වන component එකයි. `src/components/` තුල `CounterHeader.jsx` නමින් ගොනුවක් සාදා මෙම කේතය ඇතුළත් කරන්න.

// src/components/CounterHeader.jsx

function CounterHeader() {
  return (
    <div className="card-header">
      React Counter App
    </div>
  );
}

export default CounterHeader;

`CounterDisplay.jsx` (අගය පෙන්වීමට)

මෙම component එකට `count` අගය පෙන්වීමට අවශ්‍යයි. එම අගය parent component එකෙන් `prop` එකක් ලෙස ලබා ගනිමු. `src/components/` තුල `CounterDisplay.jsx` නමින් ගොනුවක් සාදන්න.

// src/components/CounterDisplay.jsx

function CounterDisplay({ count }) { // count අගය prop එකක් ලෙස ලබා ගැනීම
  return (
    <div className="card-body">
      <h1 className="display-1">{count}</h1>
    </div>
  );
}

export default CounterDisplay;

`CounterActions.jsx` (බොත්තම් සඳහා)

මෙම component එකට බොත්තම් click කළ විට ක්‍රියාත්මක විය යුතු functions අවශ්‍යයි. ඒවාද props ලෙස ලබා ගනිමු. `src/components/` තුල `CounterActions.jsx` නමින් ගොනුවක් සාදන්න.

// src/components/CounterActions.jsx

// Functions, props ලෙස ලබා ගැනීම
function CounterActions({ onIncrement, onDecrement, onReset }) {
  return (
    <div className="card-footer">
      <button className="btn btn-success me-2" onClick={onIncrement}>Plus (+)</button>
      <button className="btn btn-warning me-2" onClick={onReset}>Reset</button>
      <button className="btn btn-danger" onClick={onDecrement}>Minus (-)</button>
    </div>
  );
}

export default CounterActions;

---

2. `Counter.jsx` Component එක එකලස් කිරීම (Parent Component)

දැන්, අපගේ `Counter.jsx` ගොනුව, state සහ logic තබාගෙන, ඉහත සෑදූ child components තුන එකලස් කරන parent component එක ලෙස ක්‍රියා කරයි. අවශ්‍ය දත්ත සහ functions, props හරහා child components වලට ලබා දෙනු ඇත.

// src/components/Counter.jsx

import { useState } from 'react';
// 1. Child components import කර ගැනීම
import CounterHeader from './CounterHeader';
import CounterDisplay from './CounterDisplay';
import CounterActions from './CounterActions';

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

  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => { if (count > 0) setCount(count - 1); };
  const handleReset = () => setCount(0);

  return (
    <div className="card text-center">
      {/* 2. Child components භාවිතා කර props ලබා දීම */}
      <CounterHeader />
      <CounterDisplay count={count} />
      <CounterActions 
        onIncrement={handleIncrement} 
        onDecrement={handleDecrement} 
        onReset={handleReset} 
      />
    </div>
  );
}

export default Counter;

3. `App.jsx` Component එක (වෙනසක් නැත)

මෙම සියලු වෙනස්කම් `components` ෆෝල්ඩරය තුල සිදු කළ නිසා, අපගේ ප්‍රධාන `App.jsx` ගොනුවේ කිසිදු වෙනසක් සිදු කිරීමට අවශ්‍ය නැත! එය තවමත් පෙර පරිදිම `Counter` component එක render කරයි.

// src/App.jsx

import Counter from './components/Counter';

function App() {
  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <Counter />
        </div>
      </div>
    </div>
  );
}

export default App;

ප්‍රතිඵලය (Result)

මෙම සියලු වෙනස්කම් save කළ විට, ඔබගේ browser එකේ පෙනුමේ කිසිදු වෙනසක් සිදු නොවේ. නමුත් දැන්, අපගේ කේතය ඉතාමත් පිළිවෙලට, එක් එක් කොටසට අදාළ වගකීම් සහිතව, කුඩා components වලට වෙන් කර ඇත.

සාරාංශය: අපි අපගේ UI එක කුඩා, නැවත භාවිතා කළ හැකි components (`CounterHeader`, `CounterDisplay`, `CounterActions`) වලට කැඩුවා. State සහ Logic, parent component එක වන `Counter.jsx` හි තබාගෙන, අවශ්‍ය දත්ත සහ functions, props හරහා child components වලට ලබා දුන්නා.

⬅️ මුල් පිටුවට