මෙම module එකේදී, අපි ප්‍රධාන වශයෙන් App.jsx file එක සමඟ වැඩ කරමු. ඔබගේ project folder ව්‍යුහය මේ වන විට මෙසේ දිස්විය යුතුය:

/src
├── /components
│   └── Header.jsx
├── App.css
├── App.jsx          <-- අපි සියලුම කේතය යොදන්නේ මෙතන
├── index.css
└── main.jsx

අපගේ ඉලක්කය සරලයි: count අගයක් පෙන්වන, සහ button එකක් click කළ විට එම අගය 1කින් වැඩි කරන app එකක් සෑදීම.

මෙම app එක සෑදීමට අපට පෙර modules වලින් ඉගෙනගත් කරුණු 3ක් අවශ්‍ය වේ:

• Components: අපගේ යෙදුමේ UI ව්‍යුහය සෑදීමට (`App.jsx`).
• State: count අගය "මතක තබා ගැනීමට" (`useState`).
• Events: button click එකට "ප්‍රතිචාර දැක්වීමට" (`onClick`).

පළමුව, App.jsx file එකේ ඇති සියලුම default කේතය ඉවත් කර, මෙම සරල සැකිල්ල (template) යොදන්න.

import './App.css';
import Header from './components/Header.jsx'; // Don't forget to import the Header

function App() {
  // අපේ state සහ functions මෙතනට එනවා

  return (
    <>
      <Header />
      <main>
        {/* අපේ UI එක මෙතනට එනවා */}
      </main>
    </>
  );
}

export default App;

දැන්, count අගය මතක තබා ගැනීමට state variable එකක් සාදමු.

1. useState hook එක React වෙතින් import කරන්න.
2. App function එක තුළ, useState call කර count සහ setCount සාදාගන්න.

import { useState } from 'react'; // Step 1
import './App.css';
import Header from './components/Header.jsx';

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

  return (
    //...
  );
}

export default App;

return statement එක තුළ, අපට අවශ්‍ය UI එක JSX භාවිතයෙන් ලියමු. {count} මගින් state අගය පෙන්වන බව සලකන්න.

return (
  <>
    <Header />
    <main style={{ padding: '30px', textAlign: 'center' }}>
      <h2>React Counter App</h2>
      <p style={{ fontSize: '3rem', fontWeight: 'bold' }}>
        {count}
      </p>
      <button>+ Add</button>
    </main>
  </>
);

දැන් button එක click කළ විට state එක update කළ යුතුය. ඒ සඳහා අපි onClick event එක භාවිතා කරමු.

<button onClick={ ... }>+ Add</button>

onClick එකට ලබා දීමට function එකක් අවශ්‍යයි. මෙම function එක, setCount call කර, පවතින count අගයට 1ක් එකතු කරයි.

function handleAdd() {
  setCount(count + 1);
}

දැන්, අප සෑදූ handleAdd function එක, button එකේ onClick event එකට ලබා දෙමු.

// ... inside the App component
function handleAdd() {
  setCount(count + 1);
}

return (
  <main style={{ padding: '30px', textAlign: 'center' }}>
    {/* ... other elements */}
    <button onClick={handleAdd}>+ Add</button>
  </main>
);

වෙනම function එකක් නිර්මාණය කරනවා වෙනුවට, සරල ක්‍රියාවන් සඳහා onClick එක තුළම arrow function එකක් ලිවීම ඉතා සුලභ වේ.

<button onClick={() => setCount(count + 1)}>+ Add</button>