ReactJS Components: Functional සහ Class - SC Guide

මචන්ලා, ReactJS Components කියන්නේ මොනවද?

ReactJS ඉගෙන ගන්න ඔයාට, මේක පටන් ගන්න තියෙන හොඳම තැන තමයි Components කියන සංකල්පය තේරුම් ගැනීම. සරලවම කිව්වොත්, React කියන්නේ ගොඩක් දුරට Lego කෑලි වගේ. මේ කෑලි තමයි Components. ඔයාගේ වෙබ් ඇප්ලිකේෂන් එකේ තියෙන Navbar එක, Sidebar එක, Button එකක්, Card එකක් – මේ හැම එකක්ම Component එකක් වෙන්න පුළුවන්.

Components කියන්නේ අපේ User Interface (UI) එකේ තියෙන වෙන වෙනම, ස්වාධීන, නැවත නැවත පාවිච්චි කරන්න පුළුවන් (reusable) කොටස්. මේවා එකට එකතු කරලා තමයි අපි ලොකු සහ සංකීර්ණ UI එකක් හදන්නේ. මේ විදියට Components වලට කඩලා වැඩ කරන එකෙන් අපේ කෝඩ් එක maintain කරන්න, debug කරන්න සහ reusable කරන්න හරිම පහසු වෙනවා.

React වල ප්‍රධාන වශයෙන් Component වර්ග දෙකක් තියෙනවා:

1. Functional Components
2. Class Components

අද අපි මේ දෙකම ගැන ගැඹුරින් කතා කරමු. ඒ වගේම, කවදාද මොන Component වර්ගය පාවිච්චි කරන්නේ කියලා බලමු. ඔයා අලුතින් React ඉගෙන ගන්න කෙනෙක්නම්, මේක ඔයාට ගොඩක් වැදගත් වෙයි!

Functional Components - සරල බවේ බලය (The Power of Simplicity)

Functional Components කියන්නේ සරල JavaScript functions විතරයි. මේවාට `props` විදියට දත්ත (data) ලබා ගන්න පුළුවන්. ඒ දත්ත පාවිච්චි කරලා, මේ function එකෙන් JSX (JavaScript XML) එකක් return කරනවා. JSX කියන්නේ HTML වගේ ලියන්න පුළුවන් JavaScript syntax එකක්. මුලින් මේවාට state එකක් manage කරන්න හෝ lifecycle methods පාවිච්චි කරන්න හැකියාවක් තිබ්බේ නැහැ. ඒත් React Hooks (React version 16.8 එක්ක හඳුන්වා දුන්නා) ආවට පස්සේ, Functional Components වලටත් මේ හැම හැකියාවක්ම ලැබුණා.

Functional Component එකක් ලියන විදිය:

import React from 'react';

// Functional Component එකක්. මේක props විදියට 'name' එකක් ගන්නවා.
function HelloMessage(props) {
  return <h2>ආයුබෝවන්, {props.name}!</h2>; // JSX return කරනවා
}

export default HelloMessage;

Functional Component එකක් පාවිච්චි කරන විදිය:

ඔයාගේ `App.js` වගේ ෆයිල් එකක මේක මේ විදියට පාවිච්චි කරන්න පුළුවන්:

import React from 'react';
import HelloMessage from './HelloMessage'; // HelloMessage Component එක import කරනවා

function App() {
  return (
    <div>
      <h1>මගේ React ඇප් එක</h1>
      <HelloMessage name="ලෝකය" /> {/* HelloMessage Component එක පාවිච්චි කරනවා */}
      <HelloMessage name="React Dev" />
    </div>
  );
}

export default App;

මේකේ තියෙන සරල බව නිසා, කෝඩ් එක කියවන්න සහ තේරුම් ගන්න හරිම ලේසියි. ඒ වගේම, Hooks එක්ක මේවා දැන් ගොඩක් බලවත්.

Class Components - ඉතිහාසය සහ සම්ප්‍රදාය (History and Tradition)

Hooks එන්න කලින්, state manage කරන්න සහ lifecycle methods පාවිච්චි කරන්න අපි Class Components තමයි පාවිච්චි කළේ. මේවා ES6 JavaScript classes. ඒවා `React.Component` කියන class එක extend කරනවා.

Class Component එකකදී, Component එක render කරන්න නම්, අනිවාර්යයෙන්ම `render()` කියලා method එකක් තියෙන්න ඕනේ. ඒ `render()` method එක JSX එකක් return කරනවා. `props` වලට access කරන්න `this.props` පාවිච්චි කරනවා, state වලට access කරන්න `this.state` පාවිච්චි කරනවා.

Class Component එකක් ලියන විදිය:

import React, { Component } from 'react';

// Class Component එකක්. React.Component extend කරනවා.
class HelloMessageClass extends Component {
  // render() method එක අනිවාර්යයි. මේක JSX return කරනවා.
  render() {
    return <h2>ආයුබෝවන්, {this.props.name}!</h2>;
  }
}

export default HelloMessageClass;

Class Component එකක් පාවිච්චි කරන විදිය:

import React from 'react';
import HelloMessageClass from './HelloMessageClass'; // Class Component එක import කරනවා

function App() {
  return (
    <div>
      <h1>මගේ React ඇප් එක</h1>
      <HelloMessageClass name="ලෝකය" />
      <HelloMessageClass name="Class Dev" />
    </div>
  );
}

export default App;

Class Components වලදී `this` Context එක:

Class Components වලදී `this` කියන එක ගැන අවධානයෙන් ඉන්න ඕනේ. JavaScript වල `this` context එක වෙනස් වෙන්න පුළුවන්, විශේෂයෙන්ම event handlers වගේ තැන් වලදී. ඒ නිසා, සමහර වෙලාවට `this` එක bind කරන්න වෙනවා. මේක Functional Components වලදී එන ප්‍රශ්නයක් නෙවෙයි, මොකද ඒවාට තමන්ගේම `this` context එකක් නැති නිසා.

Functional vs. Class - කවදාද මොනවාද? (When to Use Which?)

මේ ප්‍රශ්නය ගොඩක් දෙනෙක්ට තියෙනවා. මුලින්ම මතක තියාගන්න, React Hooks (useState, useEffect වගේ) ආවට පස්සේ Functional Components වලටත් state සහ lifecycle features එකතු වුණා. ඒ කියන්නේ, කලින් Class Components වලින් විතරක් කරන්න පුළුවන් හැම දෙයක්ම දැන් Functional Components වලින් කරන්න පුළුවන්.

• නව සංවර්ධන කටයුතු (New Development): අලුත් project එකක් පටන් ගන්නවනම්, හැම වෙලේම Functional Components සහ Hooks පාවිච්චි කරන්න පුරුදු වෙන්න. ඒක තමයි දැන් industry standard එක. මේවා කෝඩ් එක සරල කරනවා, කියවන්න ලේසියි, සහ test කරන්න පහසුයි. ඒ වගේම React community එකේ විශාල සහයෝගයක් Functional Components වලට තියෙනවා.
• පැරණි Codebase නඩත්තු කිරීම (Maintaining Legacy Code): ඔයා Class Components පාවිච්චි කරලා හදපු පරණ project එකක වැඩ කරනවනම්, ඒකේ තියෙන Class Components Class Components විදියටම තියාගෙන වැඩ කරන්න. හැබැයි අලුතින් Component එකක් හදනවනම්, ඒක Functional Component එකක් විදියට හදන්න පුළුවන්. පරණ Class Components Functional Components වලට convert කරන්න ඉක්මන් වෙන්න එපා. ඒක අවශ්‍ය වෙන්නේ නැහැ හැම වෙලේම, ඒ වගේම වෙලාව නාස්ති කරන වැඩක් වෙන්න පුළුවන්.

සාරාංශයක් විදියට, Class Components තාම තිබුණට, ඒවා පරණ codebase maintain කරන්න විතරක් පාවිච්චි කරන එක තමයි හොඳම දේ. අලුත් සංවර්ධන කටයුතු සඳහා Functional Components සහ Hooks තමයි හොඳම තේරීම.

ප්‍රායෝගික උදාහරණ: ඔබේ App.js එක සහ Button Component එකක් (Practical Examples: Your App.js and a Button Component)

අපි දැන් අපි ඉගෙන ගත්ත දේවල් ප්‍රායෝගිකව කරලා බලමු. මුලින්ම, අපේ `App.js` Component එක Functional සහ Class විදියට කොහොමද ලියන්නේ කියලා බලමු. ඊට පස්සේ, නැවත පාවිච්චි කරන්න පුළුවන් (reusable) Button Component එකක් හදමු.

1. Functional App.js Component එකක්:

අද කාලේ React project එකක් පටන් ගත්තම `App.js` එක default Functional Component එකක් විදියට තමයි එන්නේ.

// src/App.js
import React from 'react';
import './App.css'; // අවශ්‍යනම් CSS import කරන්න පුළුවන්

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>ආයුබෝවන්, Functional App!</h1>
        <p>මේක ඔයාගේ පළමු Functional React Component එක.</p>
      </header>
    </div>
  );
}

export default App;

2. Class App.js Component එකක් (තේරුම් ගැනීම සඳහා පමණි):

අලුත් project වලට මේක නිර්දේශ කරන්නේ නැහැ. හැබැයි, Class Components ගැන හොඳ අවබෝධයක් ගන්න මේක වැදගත්.

// src/App.js (Class Component version)
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>ආයුබෝවන්, Class App!</h1>
          <p>මේක ඔයාගේ පළමු Class React Component එක.</p>
        </header>
      </div>
    );
  }
}

export default App;

3. නැවත පාවිච්චි කළ හැකි Functional Button Component එකක්:

දැන් අපි `props` පාවිච්චි කරලා, විවිධ තැන් වල පාවිච්චි කරන්න පුළුවන් Button Component එකක් හදමු.

මුලින්ම, `src` folder එක ඇතුළේ `components` කියලා අලුත් folder එකක් හදලා, ඒක ඇතුළේ `Button.js` කියලා ෆයිල් එකක් හදන්න.

src/components/Button.js

import React from 'react';

function Button(props) {
  const buttonStyle = {
    padding: '10px 20px',
    backgroundColor: props.bgColor || '#007bff',
    color: props.textColor || 'white',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    fontSize: '16px',
    margin: '5px'
  };

  return (
    <button onClick={props.onClick} style={buttonStyle}>
      {props.text || 'Click Me'}
    </button>
  );
}

export default Button;

Button Component එක `App.js` එකේ පාවිච්චි කරන විදිය:

දැන් අපි මේ `Button` Component එක අපේ `App.js` Component එකේ පාවිච්චි කරමු. `onClick` event එක සහ `text` prop එක මේකෙදි පාවිච්චි වෙනවා.

src/App.js (නැවත Functional Component එකට මාරු කරන්න)

import React from 'react';
import './App.css';
import Button from './components/Button'; // Button Component එක import කරනවා

function App() {
  const handlePrimaryClick = () => {
    alert('ප්‍රාථමික බොත්තම ක්ලික් කළා!'); // Primary button clicked!
  };

  const handleSecondaryClick = () => {
    console.log('දෙවනික බොත්තම ක්ලික් කළා!'); // Secondary button clicked!
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Custom Button Components</h1>
        <p>නැවත පාවිච්චි කළ හැකි Components සාදමු.</p>

        <Button 
          text="මාව ක්ලික් කරන්න" 
          onClick={handlePrimaryClick} 
        />

        <Button 
          text="තවත් බටන් එකක්" 
          onClick={handleSecondaryClick} 
          bgColor="#6c757d" 
          textColor="#fff" 
        />

        <Button 
          text="අවලංගු කරන්න" 
          onClick={() => alert('අවලංගු කළා!')} 
          bgColor="#dc3545" 
        />

      </header>
    </div>
  );
}

export default App;

මේ උදාහරණ වලින් පේනවා ඇති, Functional Components කොච්චර සරලද, ඒ වගේම කොච්චර ප්‍රායෝගිකද කියලා. Button Component එක පාවිච්චි කරලා අපි එකම කෝඩ් එකෙන් විවිධ buttons කීපයක් හදා ගත්තා. මේක තමයි Component-based Architecture වල තියෙන ලොකුම වාසිය.

Best Practices සහ පොදු ගැටළු (Best Practices & Common Issues)

• Component Naming Convention: Components වලට නමක් දානකොට හැම වෙලේම Capital Letter එකකින් පටන් ගන්න (PascalCase). උදාහරණ: MyComponent, UserCard, ProductList. මේක JavaScript functions වලින් වෙන් කරලා හඳුන ගන්න උදව් වෙනවා.
• Functional Components Prefer කරන්න: අලුත් project වලදී Functional Components එක්ක Hooks පාවිච්චි කරන්න පුරුදු වෙන්න. මේක කෝඩ් එක සරල කරනවා, maintain කරන්න ලේසියි, සහ අනාගතයට ගැළපෙනවා. React community එකත් මේක තමයි නිර්දේශ කරන්නේ.
• Class Components වල this Context: ඔයා Class Components පාවිච්චි කරනවනම්, this context එක ගැන සැලකිලිමත් වෙන්න. Event handlers වලදී this එක bind කරන්න අමතක කරන්න එපා. Functional Components වලට මේ ප්‍රශ්නය නැහැ.
• Prop Types සහ Default Props: Components වලට එන props වල data type එක ගැන වග බලා ගන්න prop-types library එක පාවිච්චි කරන්න පුළුවන්. ඒ වගේම, defaultProps පාවිච්චි කරලා, prop එකක් නොදුන්නොත් default value එකක් දෙන්න පුළුවන්. මේක Component එක sturdy කරනවා.

අවසන් වචන (Conclusion)

මචන්ලා, අපි අද React Components ගැන ගොඩක් දේවල් කතා කළා. Functional Components සහ Class Components කියන්නේ මොනවද, ඒවා කොහොමද ලියන්නේ, සහ කවදාද මොනවාද පාවිච්චි කරන්නේ කියලා අපි හොඳින් ඉගෙන ගත්තා. විශේෂයෙන්ම, Hooks ආවට පස්සේ Functional Components වලට ලැබුණු බලය සහ ඒවා දැන් React සංවර්ධනයේ ප්‍රධාන අංගය වෙලා තියෙන හැටි ඔයාට පැහැදිලි වෙන්න ඇති.

මතක තියාගන්න, Functional Components තමයි අනාගතය. ඒත් Class Components ගැන දැනගෙන ඉන්න එක ඔයාට වටිනවා, මොකද ඔයාට පරණ project වල වැඩ කරන්න වෙන්න පුළුවන්. ප්‍රායෝගිකව අපි Button Component එකක් හදලා, ඒක කොහොමද reusable විදියට පාවිච්චි කරන්නේ කියලා බැලුවා.

React Components කියන්නේ React වල හදවත. මේවා හොඳින් තේරුම් ගන්න එක ඔයාට සාර්ථක React developer කෙනෙක් වෙන්න ගොඩක් උදව් වෙයි. මේවා ඔයාගේ ඊළඟ project එකට add කරලා බලන්න! ඔයාට මේ ගැන අමතර ප්‍රශ්න තියෙනවා නම් හෝ ඔයාගේ අත්දැකීම් ගැන කියන්න ඕනෙ නම්, පහලින් comment කරන්න. අපි කතා කරමු!