පාඩම 3: React Component සහ JSX තේරුම් ගැනීම 🧩

React app එකක මූලිකම ගොඩනැගුම් ඒකකය වන Component එක සහ HTML වලට සමාන JSX syntax එක ගැන ඉගෙන ගනිමු.

---

Project Folder ව්‍යුහය (Project Folder Structure)

ඔබගේ `react-counter-app` folder එක code editor එකකින් open කළ විට, ඔබට ගොනු සහ ෆෝල්ඩර් කිහිපයක් දැකගත හැක. අපගේ අවධානය යොමු විය යුත්තේ `src` නම් ෆෝල්ඩරය වෙතයි. අපගේ app එකට අදාළ සියලුම React කේත ලියන්නේ මෙම `src` ෆෝල්ඩරය තුලය.

react-counter-app/
├── public/
├── src/
│   ├── App.jsx   <-- අපගේ ප්‍රධාන component එක
│   └── main.jsx  <-- React app එක ආරම්භ වන ස්ථානය
├── index.html
└── package.json

මෙහිදී, `src/main.jsx` ගොනුව මගින් React app එක ආරම්භ කර `index.html` ගොනුවට සම්බන්ධ කරන අතර, `src/App.jsx` යනු අපගේ app එකේ default component එකයි.

---

Component සහ JSX යනු කුමක්ද?

Component එකක් යනු වෙබ් පිටුවක ස්වාධීන, නැවත භාවිතා කළ හැකි කොටසකි. React වලදී, Component එකක් යනු UI කොටසක් return කරන JavaScript function එකකි. අපගේ project එකේ ප්‍රධාන component එක `src/App.jsx` ගොනුවේ ඇත.

JSX (JavaScript XML) යනු JavaScript තුල HTML වැනි කේත ලිවීමට ඉඩ සලසන syntax එකකි. මෙය UI එක කෙබඳු විය යුතුද යන්න පහසුවෙන් විස්තර කිරීමට උපකාරී වේ.

Bootstrap සම්බන්ධ කිරීම

අපගේ app එකට අලංකාර පෙනුමක් ලබා දීමට Bootstrap භාවිතා කරමු. ඒ සඳහා, `src/main.jsx` ගොනුව open කර, එහි ඉහළින්ම පහත `import` statement එක ඇතුළත් කරන්න.

// src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
// Bootstrap CSS මෙතනින් import කරන්න
import 'bootstrap/dist/css/bootstrap.min.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Counter App එකේ මූලික ව්‍යුහය සෑදීම

දැන්, අපගේ Counter App එකේ මූලika පෙනුම සකස් කරමු. `src/App.jsx` ගොනුවේ ඇති default කේතය සම්පූර්ණයෙන්ම ඉවත් කර, ඒ වෙනුවට Counter App එකේ JSX ව්‍යුහය ඇතුළත් කරන්න.

// src/App.jsx

function App() {
  // return() තුල අපගේ JSX කේතය ලියමු
  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <div className="card text-center">
            <div className="card-header">
              React Counter App
            </div>
            <div className="card-body">
              <h1 className="display-1">0</h1>
            </div>
            <div className="card-footer">
              <button className="btn btn-success me-2">Plus (+)</button>
              <button className="btn btn-warning me-2">Reset</button>
              <button className="btn btn-danger">Minus (-)</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

සැලකිය යුතුයි: JSX වලදී, HTML එකේ `class` attribute එක වෙනුවට `className` ලෙස භාවිතා කරයි. මෙය `class` යනු JavaScript වල reserved keyword එකක් වන බැවිනි.

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

ඉහත වෙනස්කම් save කළ විට, ඔබගේ browser එකේ `http://localhost:5173/` පිටුවෙහි දැන් මෙවැනි පෙනුමක් දැකගත හැකි වනු ඇත. අපි දැන් අපගේ app එකේ ක්‍රියාකාරීත්වය රහිත මූලික පෙනුම සකසාගෙන අවසන්!

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