Module 10 – React හි මීළඟ පියවර

සුභ පැතුම්! ඔබ React.js ආරම්භක පාඨමාලාව සාර්ථකව නිම කර ඇත. මෙම අවසන් කොටසේදී, අපි ඉගෙනගත් දේ සාරාංශ කර, ඔබගේ React ගමනේ මීළඟ පියවර කුමක්දැයි බලමු.

100% සම්පූර්ණයි!
1. සාරාංශය: Props vs State

මෙම පාඨමාලාවේදී අප ඉගෙනගත් වැදගත්ම සංකල්ප දෙකේ වෙනස තේරුම් ගැනීම ඉතා වැදගත් වේ:

Feature Props (Properties) State
කාර්යය Parent component එකක සිට Child component එකකට දත්ත යැවීම. Component එකක් තුළ දත්ත කළමනාකරණය කිරීම (මතකය).
වෙනස් කළ හැකිද? නැත. Child component එකට props වෙනස් කළ නොහැක (Read-only). ඔව්. Setter function එක (උදා: setCount) මගින් වෙනස් කළ හැක.
උදාහරණය <Button label="Add" /> const [count, setCount] = useState(0);
2. නව සංකල්පය: Conditional Rendering

Conditional Rendering යනු යම් කොන්දේසියක් (condition) මත පදනම්ව UI එකේ කොටස් පෙන්වීම හෝ සැඟවීමයි. මෙය React වල ඉතා සුලභව භාවිතා වේ.

උදාහරණයක් ලෙස, පරිශීලකයෙක් login වී ඇත්නම් "Logout" button එකක් පෙන්වීම සහ login වී නොමැතිනම් "Login" button එකක් පෙන්වීම.

JavaScript හි ඇති ternary operator (condition ? exprIfTrue : exprIfFalse) එක මේ සඳහා බහුලව භාවිතා වේ.

function MyComponent() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

Final Task: අවසාන කාර්යය

අපගේ Counter App එකේ, count අගය 10ට වඩා වැඩි වූ විට "You clicked a lot!" යනුවෙන් පණිවිඩයක් පෙන්වන්න. මේ සඳහා conditional rendering භාවිතා කරන්න.

App.jsx file එකේ return statement එකට පහත කොටස එක් කරන්න:

// ... inside the counter-container div, after the 
 tag
{count > 10 ? <p style={{ color: 'green' }}>You clicked a lot!</p> : null}

// The full div would look like this:
<div className="counter-container">
  <h2>React Counter App</h2>
  <p className="count-display">{count}</p>
  
  {/* Add the conditional message here */}
  {count > 10 ? <p style={{ color: 'green' }}>You clicked a lot!</p> : null}

  <div className="button-group">
    {/* ... your buttons */}
  </div>
</div>
{condition ? <JSX /> : null} යනු "if condition is true, show JSX, otherwise show nothing" යන්න පැවසීමට පොදු ක්‍රමයකි.
3. ඔබගේ React ගමනේ මීළඟ පියවර

ඔබ දැන් React හි මූලික කරුණු සාර්ථකව ඉගෙනගෙන ඇත. ඔබගේ දැනුම තවදුරටත් පුළුල් කරගැනීමට ඔබට ඉගෙන ගත හැකි දේවල් කිහිපයක් මෙන්න:

  • React Router: පිටු කිහිපයක් සහිත (multi-page) Single-Page Applications (SPAs) නිර්මාණය කිරීමට.
  • Fetching APIs: External servers වලින් (උදා: කාලගුණ දත්ත, පුවත්) දත්ත ලබාගෙන ඔබගේ යෙදුමේ පෙන්වීමට (useEffect hook).
  • State Management Libraries: විශාල යෙදුම් වල state කළමනාකරණයට Context API හෝ Redux වැනි මෙවලම්.
  • Component Libraries: Material-UI (MUI) හෝ Ant Design වැනි පෙර-නිर्मित UI component libraries භාවිතයෙන් ඉක්මනින් ලස්සන UI නිර්මාණය කිරීමට.
පෙර කොටස පාඨමාලාව අවසන්! මුල් පිටුවට යන්න