Module 1 – React.js වෙත හැඳින්වීමක්

සරලවම කිවහොත්, **React** යනු පරිශීලක අතුරුමුහුණත් **(User Interfaces - UI)** නිර්මාණය කිරීමට භාවිතා කරන ඉතා ජනප්‍රිය **JavaScript library** එකකි. මෙය Facebook (දැන් Meta) සමාගම විසින් නිර්මාණය කර නඩත්තු කරනු ලබයි. React හි ප්‍රධාන අරමුණ වන්නේ නැවත නැවත භාවිතා කළ හැකි කුඩා කොටස් (Components) මගින් සංකීර්ණ UI සරලව හා කාර්යක්ෂමව ගොඩනැගීමට ඉඩ දීමයි.

React හි ප්‍රධාන අරමුණ වන්නේ දත්ත වෙනස් වන විට ස්වයංක්‍රීයව update වන, වේගවත් සහ ගතික (dynamic) UI නිර්මාණය කිරීම පහසු කිරීමයි. මෙය විශේෂයෙන්ම **Single-Page Applications (SPAs)** සඳහා ඉතා යෝග්‍ය වේ. SPA එකකදී, වෙබ් අඩවියක පිටු මාරු කරන විට මුළු පිටුවම නැවත load නොවී, අවශ්‍ය කොටස පමණක් වෙනස් වේ. (Gmail, Facebook, Netflix වැනි ජනප්‍රිය යෙදුම් මේ සඳහා හොඳ උදාහරණ වේ).

සාමාන්‍ය JavaScript (Plain JS) වලින්ද මේ දේවල් කල හැකි වුවත්, React මගින් එය වඩාත් පහසු, ක්‍රමවත් සහ කාර්යක්ෂම කරයි. ප්‍රධාන වාසි කිහිපයක් මෙසේය:

1. Component-Based Architecture (කොටස් මත පදනම් වූ ව්‍යුහය)

වෙබ් පිටුවක ඇති navigation bar, button, image gallery වැනි සෑම කොටසක්ම වෙනම, ස්වාධීන **Component** එකක් ලෙස නිර්මාණය කළ හැක. මෙමගින් කේතය කළමනාකරණය කිරීම, නැවත භාවිතා කිරීම සහ දෝෂ නිරාකරණය කිරීම (debugging) ඉතා පහසු වේ.

උදාහරණයක් ලෙස, ඔබ button එකක පෙනුම වෙනස් කිරීමට අවශ්‍ය නම්, ඔබට වෙනස් කළ යුත්තේ එම button component එකේ කේතය පමණි. එය අනෙක් කිසිදු component එකකට බලපාන්නේ නැත.

---

2. The Virtual DOM (Virtual Document Object Model)

වෙබ් පිටුවක අන්තර්ගතය වෙනස් කරන විට, සාමාන්‍යයෙන් browser එකේ ඇති සැබෑ DOM එක update කිරීම ඉතා මන්දගාමී ක්‍රියාවලියකි. React මෙයට විසඳුමක් ලෙස **Virtual DOM** නමින් මතකයේ (in-memory) තබාගන්නා DOM එකක පිටපතක් භාවිතා කරයි.

වෙනසක් සිදු වූ විට, React විසින්:

1. යෙදුමේ නව තත්වය (state) මත පදනම්ව **නව Virtual DOM එකක්** නිර්මාණය කරයි.
2. මෙම නව Virtual DOM එක, **පැරණි Virtual DOM එක** සමඟ සංසන්දනය කර වෙනස් වූ කොටස් පමණක් (diffing) සොයාගනී.
3. අවසානයේ, එම වෙනස්කම් පමණක් සැබෑ DOM එකේ ඉතාමත් **කාර්යක්ෂමව යාවත්කාලීන කරයි.**

මෙම ක්‍රියාවලිය නිසා React යෙදුම් ඉතා වේගවත් වන අතර, පරිශීලකයාට සුමට අත්දැකීමක් ලබා දෙයි.

---

3. JSX (JavaScript XML)

React මගින් අපට JavaScript තුළම HTML වලට සමාන syntax එකක් ලිවීමට ඉඩ සලසයි. මෙය JSX ලෙස හඳුන්වයි. JSX නිසා components පෙනෙන්නේ කෙසේද සහ ක්‍රියාකරන්නේ කෙසේද යන්න එකම තැනකදී තේරුම් ගැනීම ඉතා පහසුය.

උදාහරණයක් ලෙස, සාමාන්‍ය JavaScript වල DOM element එකක් නිර්මාණය කිරීම:

const element = React.createElement('h1', {}, 'Hello, world!');

මෙය JSX සමඟ ලිවීමේදී වඩාත් පැහැදිලි වේ:

const element = <h1>Hello, world!</h1>;

JSX කේතය browser එකට තේරෙන JavaScript බවට පරිවර්තනය කිරීමට build tools (උදා: Babel) භාවිතා කරයි.

React සමඟ සාර්ථකව වැඩ කිරීමට පෙර, අපගේ පරිගණකයේ මූලික මෙවලම් කිහිපයක් ස්ථාපනය කරගත යුතුය. මේවා නොමැතිව React development ආරම්භ කිරීමට නොහැක.

1. Node.js (Node.js runtime)

Node.js යනු JavaScript, browser එකෙන් පිටත run කිරීමට ඉඩ සලසන පරිසරයකි. React development server එක, build tools (Webpack/Vite) සහ අනෙකුත් development tasks ක්‍රියාත්මක වීමට මෙය අත්‍යවශ්‍ය වේ.

2. npm (Node Package Manager)

npm යනු Node.js සමඟ ස්වයංක්‍රීයව ස්ථාපනය වන package manager එකකි. මෙය ඔබට React, Vite වැනි libraries සහ frameworks, මෙන්ම තවත් බොහෝ third-party JavaScript packages අපගේ project එකට download කර කළමනාකරණය කිරීමට භාවිතා කරයි. එය dependency management සඳහා ඉතා වැදගත් වේ.

3. Code Editor (Visual Studio Code)

කේත ලිවීම සඳහා හොඳ code editor එකක් අත්‍යවශ්‍ය වේ. **Visual Studio Code (VS Code)** නොමිලේ ලබාගත හැකි අතර, React development සඳහාම වූ extensions (syntax highlighting, auto-completion, debugging tools) රාශියක් සමඟින් පැමිණේ. මෙය developer ප්‍රජාව අතර ඉතා ජනප්‍රියයි.