පාඩම 9: අවසන් කේතය සහ සාරාංශය 📋

අප මෙතෙක් නිර්මාණය කළ Counter App එකේ සියලුම ගොනු වල අවසන් කේතය සහ අප ඉගෙනගත් ප්‍රධාන සංකල්ප පිළිබඳ සාරාංශයක් මෙම පාඩමේ අඩංගු වේ.

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

අපගේ project එකේ අවසන් ෆෝල්ඩර් ව්‍යුහය පහත පරිදි වේ. එක් එක් ගොනුවේ සම්පූර්ණ කේතය පහතින් දක්වා ඇත.

counter-app/
└── src/
    ├── components/
    │   ├── Counter.jsx
    │   ├── CounterActions.jsx
    │   ├── CounterDisplay.jsx
    │   ├── CounterDisplay.module.css
    │   └── CounterHeader.jsx
    ├── App.jsx
    └── main.jsx

සම්පූර්ණ කේතය

1. `CounterDisplay.module.css`

Counter අගය සඳහා වන styles.

/* src/components/CounterDisplay.module.css */

.counterValue {
  font-weight: 700;
  color: #212529;
  transition: color 0.3s ease-in-out;
}

.positiveValue {
  color: #198754;
}

.zeroValue {
  color: #6c757d;
}

2. `CounterHeader.jsx`

Card එකේ මාතෘකාව පෙන්වන component එක.

// src/components/CounterHeader.jsx

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

export default CounterHeader;

3. `CounterDisplay.jsx`

Counter අගය සහ ඊට අදාළ style එක පෙන්වන component එක.

// src/components/CounterDisplay.jsx

import styles from './CounterDisplay.module.css';

function CounterDisplay({ count }) {
  let valueStyle = count > 0 ? styles.positiveValue : styles.zeroValue;

  return (
    <div className="card-body">
      <h1 className={`display-1 ${styles.counterValue} ${valueStyle}`}>
        {count}
      </h1>
    </div>
  );
}

export default CounterDisplay;

4. `CounterActions.jsx`

බොත්තම් තුන සහ ඒවායේ `onClick` events අඩංගු component එක.

// src/components/CounterActions.jsx

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;

5. `Counter.jsx` (Parent Component)

State සහ logic අඩංගු, අනෙකුත් කුඩා components එකලස් කරන ප්‍රධාන component එක.

// src/components/Counter.jsx

import { useState } from 'react';
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">
      <CounterHeader />
      <CounterDisplay count={count} />
      <CounterActions 
        onIncrement={handleIncrement} 
        onDecrement={handleDecrement} 
        onReset={handleReset} 
      />
    </div>
  );
}

export default Counter;

6. `App.jsx`

අපගේ application එකේ ප්‍රධානතම component එක. මෙහිදී `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;

අප ඉගෙනගත් ප්‍රධාන සංකල්ප (Key Concepts Learned)

ඔබ දැන් React හි මෙම මූලික සහ ඉතා වැදගත් සංකල්ප පිළිබඳව හොඳ අවබෝධයක් ලබා ඇත! ඊළඟ සහ අවසන් පාඩමේදී, අපගේ දැනුම තවදුරටත් වර්ධනය කරගන්නේ කෙසේදැයි බලමු.

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