By Thisara Priyamal — 20 Jul 2025

React.js අත්පොත: මුල සිටම ආරම්භ කරන්න | SC Guide

React.js Beginner's Blueprint: Your First App SC Guide

ආයුබෝවන්, Tech ලෝලී යාළුවනේ!

මේ ඩිජිටල් යුගයේ, වෙබ් අඩවි කියන්නේ හුදෙක් තොරතුරු පුවරු විතරක් නෙවෙයි. ඒවා අද ජීවමාන, අන්තර්ක්‍රියාකාරී (interactive) අත්දැකීම් ලබා දෙනවා. Facebook, Instagram, Netflix වගේ විශාල Platform ගැන හිතුවොත්, ඒ හැම එකක්ම User-friendly, වේගවත් අත්දැකීමක් දෙනවා නේද? මේ වගේ අතිනවීන වෙබ් Application හදන්න පාවිච්චි කරන ප්‍රධානම JavaScript Library එකක් තමයි React.js. සමහර විට ඔබ React ගැන අහලා ඇති, නැත්නම් මේක ඔබගේ පළමු හඳුන්වාදීම වෙන්නත් පුළුවන්.

මේ Blog Post එකෙන් අපි React.js කියන්නේ මොකක්ද, ඇයි ඒක වැදගත් වෙන්නේ, ඒ වගේම මුල සිටම (from scratch) ඔබේ පළමු React Application එක හදාගෙන Run කරන්නේ කොහොමද කියලා කතා කරනවා. ඔබේ පරිගණකයේ Node.js සහ npm (Node Package Manager) Install කරලා තියෙනවා නම්, අපි දැන්මම පටන් ගමු!

1. React කියන්නේ මොකක්ද? ඇයි React?

1.1. React.js කියන්නේ මොකක්ද?

සරලවම කිව්වොත්, React.js කියන්නේ Facebook එක විසින් නිර්මාණය කරපු, User Interfaces (UI) හදන්න පාවිච්චි කරන JavaScript Library එකක්. මේක Framework එකක් නෙවෙයි, Library එකක් කියන්නේ UI එකට විතරයි මේක අවධානය යොමු කරන්නේ කියන එකයි. ඒත් ගොඩක් වෙලාවට මේක Framework එකක් විදියටත් සැලකෙනවා මොකද මේකත් එක්ක තව tools ගොඩක් එකතු කරලා full-fledged application හදන්න පුලුවන් නිසා.

React වල ප්‍රධාන සංකල්ප දෙකක් තියෙනවා:

Declarative UI (ප්‍රකාශනශීලී UI): සාමාන්‍යයෙන් UI එකක් හදනකොට අපි පියවරෙන් පියවර (step-by-step) බ්‍රවුසරයට කියනවා, 'මේ Element එක හදන්න, මේකට මේ විදියට Style කරන්න, මේ Event එක ආවම මේක කරන්න' වගේ. ඒකට කියන්නේ Imperative ක්‍රමය කියලා. ඒත් React වලදී අපි කරන්නේ Declarative විදියට. අපි කියන්නේ 'අපිට ඕනේ මේ වගේ UI එකක්' කියලා විතරයි. React ඒක බ්‍රවුසරයේ පෙන්නන්න ඕන කරන දේවල් තනියම බලාගන්නවා. මේකෙන් අපේ කේතය (code) ලියන එක ගොඩක් පහසු වෙනවා, මොකද අපිට අවශ්‍ය ප්‍රතිඵලය (desired outcome) ගැන විතරක් හිතන්න පුළුවන් නිසා.
Component-Based: React වලදී අපි Application එක හදන්නේ පොඩි පොඩි, ස්වාධීන කොටස් වලට කඩලා. මේ කොටස් වලට කියන්නේ Components කියලා. උදාහරණයක් විදියට, Facebook Feed එකක් ගත්තොත්, Post එකක්, Comment එකක්, Like Button එකක් වගේ දේවල් Components විදියට හිතන්න පුළුවන්. මේ Components එකිනෙකට ස්වාධීන නිසා, අපිට ඒවා වෙන වෙනම හදලා, ඕනෑම තැනකදී නැවත නැවත (re-use) පාවිච්චි කරන්න පුළුවන්. මේකෙන් Code එක manage කරන එකත්, හදන එකත් වේගවත් වෙනවා.

1.2. Single Page Applications (SPAs) vs. Multi-Page Applications (MPAs)

React වල වැදගත්කම තේරුම් ගන්න කලින්, අපි Web Application වර්ග දෙකක් ගැන පොඩ්ඩක් බලමු:

Multi-Page Applications (MPAs): සාමාන්‍ය වෙබ් අඩවි ගොඩක් MPA තමයි. මෙහිදී, ඔබ වෙබ් අඩවියේ පිටුවකින් පිටුවකට (page to page) යනකොට, මුළු පිටුවම server එකෙන් නැවත Load වෙනවා. මේක වෙලාවකට ටිකක් හෙමින් වෙන්න පුළුවන්, මොකද හැම පාරම server එකට request එකක් ගිහින් අලුත් HTML, CSS, JavaScript files ටිකක් එන්න ඕන නිසා.
Single Page Applications (SPAs): මේවා තමයි අද දවසේ ගොඩක් ජනප්‍රිය Application වර්ගය. SPA එකකදී, බ්‍රවුසරයට එක පාරක් HTML, CSS, JavaScript files Load වෙනවා. ඊට පස්සේ, ඔබ Application එකේ වෙනස් කොටස් වලට යනකොට (උදාහරණයක් විදියට Facebook එකේ Feed එකෙන් Profile එකට යනකොට), මුළු පිටුවම නැවත Load වෙන්නේ නැහැ. JavaScript භාවිතයෙන් අවශ්‍ය දත්ත විතරක් Server එකෙන් අරන්, UI එකේ අවශ්‍ය කොටස විතරක් Update කරනවා. මේක නිසා Application එක ගොඩක් වේගවත්, සුමට (smooth) අත්දැකීමක් ලබා දෙනවා. React වගේ Library එකක් මේ වගේ SPAs හදන්න අතිශයින්ම සුදුසුයි.

2. React පටන් ගමු! අවශ්‍ය දේවල් සකසා ගනිමු.

React Application එකක් හදන්න කලින් අපිට අවශ්‍ය මූලිකම දේ තමයි Node.js සහ ඒකත් එක්ක එන npm (Node Package Manager). මේවා Install කරලා නැත්නම්, Node.js නිල වෙබ් අඩවියට ගිහින් ඔබේ පරිගණකයට සුදුසු Version එක Download කරලා Install කරන්න. Install කරාට පස්සේ, Command Prompt (Windows) හෝ Terminal (macOS/Linux) එක open කරලා පහත විධානයන් (commands) Type කරලා බලන්න, ඒක හරියට Install වෙලාද කියලා:

node -v
npm -v

Output එකේ Versions ටිකක් පෙන්නුවොත්, ඒ කියන්නේ සියල්ල සාර්ථකයි!

2.1. Create React App (CRA) - අපේ වැඩේ පහසු කරන tool එකක්

React Application එකක් මුල සිටම හදන එකට ගොඩක් Configuration කරන්න වෙනවා. ඒක ආරම්භක කෙනෙක්ට හරිම අමාරු දෙයක්. මේක පහසු කරන්න තමයි Facebook එකෙන් Create React App (CRA) කියන Command Line Tool එක හදලා තියෙන්නේ. මේකෙන් අපිට අවශ්‍ය සියලුම Configuration එක්ක අලුත්ම React Project එකක් තත්පර කීපයකින් හදාගන්න පුළුවන්.

අපි CRA පාවිච්චි කරලා අලුත් React Project එකක් හදමු. ඔබ කැමති folder එකකට ගිහින් (cd command එක පාවිච්චි කරලා) පහත command එක Run කරන්න:

npx create-react-app my-first-react-app

මේ my-first-react-app කියන එක වෙනුවට ඔබට ඕනෑම නමක් දෙන්න පුළුවන්. npx කියන්නේ npm 5.2+ වලින් එන tool එකක්. ඒකෙන් පුළුවන් packages install නොකරම ඒවා run කරන්න. මේ command එක run කරාම ටික වෙලාවක් යනවා අවශ්‍ය dependencies install වෙන්න. ඒක Internet speed එක අනුව වෙනස් වෙන්න පුළුවන්.

Dependencies ටික install වෙලා ඉවර වුණාම, ඔබේ Command Prompt/Terminal එකේ මෙවැනි message එකක් පෙන්වාවි:

Success! Created my-first-react-app at /path/to/your/folder/my-first-react-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-first-react-app
  npm start

ඒ අනුව අපි දැන් හදපු project folder එකට යමු, ඊට පස්සේ project එක run කරමු:

cd my-first-react-app
npm start

මේ npm start command එක Run කරාම, ඔබේ Default Web Browser එකේ http://localhost:3000 කියන URL එක Open වෙලා, React Application එකේ Default Page එක පෙන්වයි. ඒකෙන් කියවෙන්නේ ඔබේ පළමු React Application එක සාර්ථකව Run වෙනවා කියන එකයි! 🎉

සටහන: සමහර වෙලාවට localhost:3000 port එක busy වෙලා තිබුණොත්, වෙනත් port එකක් (උදා: 3001) පාවිච්චි කරන්න කියලා System එකෙන් අහයි. ඒකට Y කියලා enter කරන්න.

3. React Project එකේ ව්‍යුහය (Project Structure)

දැන් අපි හදපු my-first-react-app folder එකේ ඇතුළත ව්‍යුහය (structure) ගැන පොඩ්ඩක් බලමු. ඔබේ Favorite Code Editor (VS Code වගේ එකක්) එකෙන් මේ folder එක open කරන්න.

ප්‍රධාන වශයෙන්ම, ඔබට මේ folder දෙක සහ files ටික දැකගන්න පුළුවන්:

node_modules/: මේකේ තියෙන්නේ ඔබේ Project එකට අවශ්‍ය සියලුම Library files සහ dependencies. සාමාන්‍යයෙන් මේ folder එකට අත තියන්න අවශ්‍ය වෙන්නේ නැහැ.
public/: මේ folder එකේ තියෙන්නේ ඔබේ Web Application එකේ Root files.
- index.html: මේක තමයි ඔබේ SPA එකේ Single Page එක. React Application එකේ සියලුම UI elements මෙහි <div id="root"></div> එක ඇතුළට තමයි JavaScript මගින් Inject කරන්නේ.
- favicon.ico, logo192.png, etc.: Application එකේ icons සහ images.
src/: මේක තමයි ඔබ වැඩ කරන ප්‍රධානම folder එක. ඔබේ React Components, JavaScript code, CSS files මේකේ තමයි තියෙන්නේ.
- index.js: මේක තමයි Application එකේ entry point එක. මේ file එකේ තමයි React Library එක load කරලා, අපේ ප්‍රධානම React Component එක (App.js) public/index.html එකේ තියෙන <div id="root"> එකට render කරන්නේ.
- App.js: මේක තමයි අපේ ප්‍රධානම React Component එක. ඔබ ලියන ගොඩක් code මේ file එකේ නැත්නම් මේකෙන් import කරන වෙනත් files වල තියෙයි.
- index.css, App.css: ඔබේ Components වලට අදාළ CSS Styles මෙහිදී define කරලා තියෙනවා.
- reportWebVitals.js, setupTests.js, logo.svg: මේවා අමතර files, දැනට මේවා ගැන හිතන්න අවශ්‍ය නැහැ.
package.json: මේ file එකේ ඔබේ Project එකට අවශ්‍ය dependencies මොනවද, script commands මොනවද වගේ දේවල් define කරලා තියෙනවා.
README.md: Project එක ගැන විස්තර තියෙන file එකක්.

4. අපේ පළමු React App එක modify කරමු!

දැන් අපි App.js file එක open කරලා, ඒකේ තියෙන code එක පොඩ්ඩක් modify කරලා බලමු.

ඔබේ Code Editor එකේ src/App.js file එක open කරන්න. ඔබට පහත වගේ code block එකක් දැකගන්න පුළුවන් වෙයි:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

මේ App කියන function එක තමයි අපේ Component එක. මේක return කරන්නේ HTML වගේ පෙනෙන JSX (JavaScript XML) code එකක්. React මේ JSX code එක සාමාන්‍ය JavaScript බවට convert කරලා බ්‍රවුසරයට පෙන්නනවා.

දැන් අපි මේ code එකෙන් <p> tag එක ඇතුළේ තියෙන Text එක වෙනස් කරමු, ඒ වගේම <a> tag එකත් අයින් කරලා, අපේම <h1> tag එකක් එකතු කරමු. logo එකත් දැනට අවශ්‍ය නැති නිසා, import logo from './logo.svg'; line එකත් <img> tag එකත් අයින් කරමු.

වෙනස්කම් කරාට පස්සේ ඔබේ App.js file එක මේ වගේ වෙයි:

import './App.css'; // logo import එක අයින් කරා

function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/* <img src={logo} className="App-logo" alt="logo" /> මේ line එක අයින් කරා */}
        <h1>ආයුබෝවන් React ලෝකය!</h1> {/* අලුතින් එකතු කරා */}
        <p>
          අපේ පළමු React Application එක!
        </p>
        {/* <a> tag එක අයින් කරා */}
      </header>
    </div>
  );
}

export default App;

දැන් මේ file එක Save කරන්න (Ctrl+S or Cmd+S). ඔබ දැකලා ඇති, ඔබ file එක Save කරපු ගමන්, Browser එක Refresh නොකරම (Hot Reloading) අලුත් වෙනස්කම් පෙන්නනවා. මේක තමයි React Development වල තියෙන තවත් ලොකු වාසියක්, මොකද ඔබට ඉක්මනින්ම ඔබේ වෙනස්කම් දැකගන්න පුළුවන්.

නිගමනය සහ ඊළඟ පියවර

මේ Blog Post එකෙන් අපි React.js වල මූලිකම දේවල් ගැන ඉගෙන ගත්තා. React කියන්නේ මොකක්ද, ඇයි මේක මේ තරම් ජනප්‍රිය වෙලා තියෙන්නේ, Single Page Applications කියන්නේ මොනවද කියලත් අපි කතා කළා. ඒ වගේම, Node.js සහ npm පාවිච්චි කරලා, Create React App එකෙන් ඔබේ පළමු React Application එක හදලා, ඒකේ Project Structure එක තේරුම් අරන්, ඒක modify කරන්නත් අපි ඉගෙන ගත්තා.

මේක React වල ආරම්භය විතරයි. React කියන්නේ විශාල ලෝකයක්. ඔබට තවත් ගොඩක් දේවල් ඉගෙන ගන්න තියෙනවා:

React Components වලට Data යැවීම (Props)
State Management
Hooks (useState, useEffect, etc.)
Routing
API Calls

මේවා ගැන අපි ඊළඟ Blog Posts වලින් කතා කරමු. ඒ වෙනකම්, මේ හදපු Project එකත් එක්ක පොඩ්ඩක් වැඩ කරලා බලන්න. App.js file එකේ වෙනස්කම් කරලා බලන්න, අලුත් HTML elements එකතු කරලා බලන්න. මතක තියාගන්න, හොඳම විදිය තමයි ප්‍රායෝගිකව පුහුණු වීම (practice).

ඔබේ අදහස්, ප්‍රශ්න හෝ අත්දැකීම් පහතින් Comment කරන්න! අපි එකිනෙකාට උදව් කරගෙන මේ React ගමන යමු!