Module 9 – Components වලට කේතය වෙන් කිරීම

අපගේ app එක දැන් හොඳින් ක්‍රියාත්මක වේ, නමුත් සියලුම කේතය `App.jsx` file එකේ ඇත. යෙදුම් විශාල වන විට, මෙය කළමනාකරණය කිරීමට අපහසු වේ. React හි සැබෑ බලය ඇත්තේ කේතය කුඩා, නැවත භාවිත කළ හැකි components වලට වෙන් කිරීමෙහිය.

90% සම්පූර්ණයි
1. "Props" යනු කුමක්ද? (Properties)

Props (properties යන්නෙහි කෙටි রূপය) යනු parent component එකක සිට child component එකකට දත්ත යැවීමට භාවිතා කරන ක්‍රමයයි. ඒවා function arguments වලට සමාන ය.

Props මගින් child component එකට එහි පෙනුම හෝ ක්‍රියාකාරීත්වය වෙනස් කරගැනීමට අවශ්‍ය තොරතුරු ලබා දේ. උදාහරණයක් ලෙස, අපගේ `Button` component එකට:

  • පෙන්විය යුතු පාඨය (label).
  • Click කළ විට ක්‍රියාත්මක විය යුතු function එක (`onClick` event).
  • එහි CSS class එක.

වැනි දේවල් props හරහා යැවිය හැක. Props යනු **read-only** වේ; child component එකකට තමන්ට ලැබුණු props වෙනස් කළ නොහැක.

2. නැවත භාවිත කළ හැකි `Button` Component එකක් සෑදීම

අපගේ Counter App එකේ ඇති buttons තුනම එකම ව්‍යුහයක් සහිතයි, වෙනස් වන්නේ ඒවායේ පාඨය, style එක සහ click event එක පමණි. එබැවින්, අපි මේ සඳහා නැවත භාවිත කළ හැකි `Button` component එකක් නිර්මාණය කරමු.

Folder ව්‍යුහය

පළමුව, `src/components` folder එක තුළ `Button.jsx` නමින් නව file එකක් සාදන්න.

/src
├── Counter.css
├── components
│   ├── Header.jsx
│   └── Button.jsx    <-- ඔබ අලුතින් සාදන file එක
├── App.jsx
├── index.css
└── main.jsx
`Button.jsx` කේතය

අලුතින් සෑදූ Button.jsx file එකට පහත කේතය ඇතුළත් කරන්න. මෙම component එක props ලෙස label, onClick, සහ className බලාපොරොත්තු වේ.

function Button({ label, onClick, className }) {
  return (
    <button 
      className={className} 
      onClick={onClick}
    >
      {label}
    </button>
  );
}

export default Button;
function Button({ label, onClick, className }) යනු JavaScript destructuring syntax එකයි. මෙය function Button(props) ලෙස ලියා, පසුව props.label, props.onClick ලෙස භාවිතා කිරීමට වඩා පහසු ක්‍රමයකි.

Module 9: කුඩා කාර්යය (Mini Task)

දැන් අපි අපගේ App.jsx file එක, මෙම නව Button component එක භාවිතා කරන ලෙස update කරමු (මෙය refactoring ලෙස හැඳින්වේ).

  1. App.jsx file එකේ ඉහළින්ම, අප සෑදූ Button.jsx file එක import කරන්න.
  2. පැරණි <button> tags තුනම ඉවත් කර, ඒ වෙනුවට අපගේ නව <Button /> component එක තුන් වරක් භාවිතා කරන්න.
  3. එක් එක් <Button /> එකට අදාළ label, onClick, සහ className props ලෙස ලබා දෙන්න.

අවසන් App.jsx කේතය මෙසේ, වඩාත් පිරිසිදු සහ කියවීමට පහසු ලෙස දිස්විය යුතුය:

import { useState } from 'react';
import Header from './components/Header.jsx';
import Button from './components/Button.jsx'; // Step 1: Import the new component
import './Counter.css';

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

  function handleSubtract() {
    if (count > 0) {
      setCount(count - 1);
    }
  }

  return (
    <>
      <Header />
      <div className="counter-container">
        <h2>React Counter App</h2>
        <p className="count-display">{count}</p>
        {/* Step 2 & 3: Use the new Button component */}
        <div className="button-group">
          <Button 
            label="+ Add" 
            onClick={() => setCount(count + 1)} 
            className="btn-add" 
          />
          <Button 
            label="- Subtract" 
            onClick={handleSubtract} 
            className="btn-subtract" 
          />
          <Button 
            label="Reset" 
            onClick={() => setCount(0)} 
            className="btn-reset" 
          />
        </div>
      </div>
    </>
  );
}

export default App;

File එක save කර browser එක බලන්න. App එකේ පෙනුම සහ ක්‍රියාකාරීත්වය පෙර පරිදිම තිබිය යුතුය. නමුත් දැන් අපගේ කේතය වඩාත් සංවිධානාත්මක සහ React හි හොඳම පුරුදු වලට අනුකූල වේ.

පෙර කොටස ඊළඟ කොටස: Next Steps