JSX යනු කුමක්ද? 📝
JSX (JavaScript XML) යනු JavaScript සඳහා වන syntax extension එකකි. සරලවම කිවහොත්, JSX මගින් අපට JavaScript ගොනු තුළ HTML වලට සමාන කේතයක් ලිවීමට ඉඩ සලසයි. මෙය React හි component එකකින් UI (පෙනුම) එක කෙබඳු විය යුතුද යන්න විස්තර කිරීමට යොදා ගනී.
උදාහරණයක් බලන්න:
const heading = <h1>හෙලෝ, React ලෝකය!</h1>;
මෙය HTML වගේ පෙනුනත්, මෙය ඇත්තටම JavaScript වේ. Browser එකට මෙය කෙලින්ම තේරුම් ගත නොහැක. Vite වැනි build tool එකක් මගින් මෙම JSX කේතය, browser එකට තේරුම් ගත හැකි සාමාන්ය JavaScript බවට පරිවර්තනය කරයි.
1. HTML වල `class` attribute එක වෙනුවට JSX වලදී `className` යන්න භාවිත කරයි.
2. JSX තුල JavaScript expressions (උදා: විචල්යයන්, ගණනය කිරීම්) ඇතුලත් කිරීමට, `{ }` (curly braces) භාවිත කරයි.
Components යනු මොනවාද? 🧱
Components යනු React app එකක මූලිකම ගොඩනැගුම් කොටස් ය. ඒවා UI එක කුඩා, ස්වාධීන, සහ නැවත භාවිත කළ හැකි කොටස් වලට කඩා වෙන් කරයි. Component එකක් යනු JSX return කරන සාමාන්ය JavaScript function එකකි.
React වල ප්රධාන වශයෙන් components වර්ග දෙකක් ඇතත්, අපි මේ පාඨමාලාවේදී නවීන සහ බහුලවම භාවිත වන **Function Components** ගැන පමණක් අවධානය යොමු කරමු.
සරල Function Component එකක උදාහරණයක්:
function Welcome() {
return <h1>Welcome to my App!</h1>;
}
Component එකක නමක් සෑමවිටම ලොකු අකුරකින් (Capital Letter) ආරම්භ විය යුතුය (උදා: `Welcome`, `Counter`).
අපේ Project එකේ ගොනු සකස් කරමු 💻
දැන් අපි අපේ `react-counter` project එකේ, Vite මගින් default ලෙස සෑදුණු ගොනු කිහිපයක් වෙනස් කර, අපේම Counter Component එකට අවශ්ය මූලික අඩිතාලම දමා ගනිමු. ඔබේ code editor එකෙන් `src` folder එක open කරගන්න.
පියවර 1: `Counter.jsx` ගොනුව නිර්මාණය කිරීම
`src` folder එක තුල `Counter.jsx` නමින් අලුත් ගොනුවක් සාදා, පහත කේතය അതിൽ copy-paste කරන්න.
// src/Counter.jsx
import React from 'react';
export default function Counter() {
return (
<div className="counter">
<div className="display">
Count: <strong>0</strong>
</div>
<div className="controls">
<button>-</button>
<button>+</button>
<button>Reset</button>
</div>
</div>
);
}
`export default function Counter()` මගින් මෙම component එක, වෙනත් ගොනු වල භාවිත කිරීමට (import කිරීමට) හැකි වන පරිදි export කරයි.
පියවර 2: `App.jsx` ගොනුව වෙනස් කිරීම
දැන්, `src` folder එකේ ඇති `App.jsx` ගොනුවේ තිබෙන සියලුම කේතය මකා දමා, ඒ වෙනුවට පහත කේතය ඇතුලත් කරන්න. මෙහිදී අපි අලුතින් සෑදූ `Counter` component එක import කර භාවිත කරනවා.
// src/App.jsx
import React from 'react';
import Counter from './Counter'; // Counter component එක import කිරීම
export default function App() {
return (
<div className="app">
<h1>React සජීවී කවුන්ටරය</h1>
<Counter /> {/* Counter component එක මෙහිදී භාවිත කිරීම */}
</div>
);
}
පියවර 3: `index.css` ගොනුවට Styles එකතු කිරීම
අවසාන වශයෙන්, අපේ app එකට සරල පෙනුමක් ලබා දීම සඳහා `src` folder එකේ ඇති `index.css` ගොනුවේ තිබෙන සියලුම කේතය මකා දමා, පහත CSS කේතය ඇතුලත් කරන්න.
/* src/index.css */
:root {
--bg: #f8f9fa;
--card: #ffffff;
--muted: #6c757d;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.app {
background: var(--card);
padding: 2rem;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 420px;
text-align: center;
}
.display {
font-size: 2.5rem;
margin-bottom: 1.5rem;
font-weight: 300;
}
.display strong {
font-weight: 700;
}
.controls button {
margin: 0 0.4rem;
padding: 0.5rem 1rem;
border-radius: 8px;
border: 1px solid #dee2e6;
background: white;
cursor: pointer;
font-size: 1.2rem;
min-width: 50px;
}