අපි මීට පෙර පාඩම් වලින් PHP, Laravel, Django වැනි server-side තාක්ෂණයන් ගැන ඉගෙන ගත්තෙමු. ඒවා වෙබ් යෙදුමක "මොළය" සහ "කොඳු නාරටිය" ලෙස ක්‍රියා කරයි. නමුත්, පරිශීලකයා සෘජුවම දකින සහ ගනුදෙනු කරන, වෙබ් අඩවියේ "මුහුණ" (front-end) නිර්මාණය කරන්නේ කෙසේද? Facebook, Instagram, Netflix වැනි යෙදුම් වල ඇති වේගවත්, සුමට, සහ අන්තර්ක්‍රියාකාරී අත්දැකීම ලබා දෙන්නේ කෙසේද?

පිළිතුර **React** ය. React යනු Facebook (Meta) සමාගම විසින් නිර්මාණය කර, නඩත්තු කරන, පරිශීලක අතුරුමුහුණත් (User Interfaces - UI) ගොඩනැගීම සඳහා වූ JavaScript **පුස්තකාලයකි (Library)**. එය සම්පූර්ණ framework එකක් නොව, UI එක ගොඩනැගීමේ කාර්යය සඳහාම විශේෂිත වූ මෙවලමකි.

ඇයි React මෙතරම් ජනප්‍රිය?

• Component-Based Architecture (කොටස්-පදනම් වූ ගෘහ නිර්මාණ ශිල්පය): React හිදී, සම්පූර්ණ UI එක, ස්වාධීන, නැවත භාවිතා කළ හැකි "කොටස්" (Components) වලට කඩනු ලැබේ. මෙය හරියට LEGO වලින් නිර්මාණයක් කරනවා වැනිය. ඔබට බොත්තමක්, සෙවුම් තීරුවක්, හෝ පරිශීලක පැතිකඩක් වැනි සෑම දෙයක්ම වෙන වෙනම components ලෙස නිර්මාණය කර, ඒවා එකට එකතු කර සංකීර්ණ UI එකක් ගොඩනැගිය හැක.
• Declarative UI (ප්‍රකාශනීය අතුරුමුහුණත): ඔබගේ යෙදුමේ දත්ත (state) වෙනස් වන විට, UI එක පෙනිය යුත්තේ කෙසේදැයි ඔබ React ට "ප්‍රකාශ" කරයි. එම වෙනස්කම් කාර්යක්ෂමව තිරය මත යාවත්කාලීන කිරීම React විසින්ම බලා ගනී.
• Virtual DOM: React, සැබෑ DOM (Document Object Model - වෙබ් පිටුවේ ව්‍යුහය) එකේ අනුරුවක් මතකයේ (in-memory cache) තබා ගනී. දත්ත වෙනස් වූ විට, මෙම Virtual DOM එක යාවත්කාලීන කර, සැබෑ DOM එක සමඟ සසඳා, වෙනස් වූ කොටස් **පමණක්** යාවත්කාලීන කරයි. මේ නිසා React යෙදුම් ඉතා වේගවත් වේ.

මෙම නිබන්ධනයෙන්, අපි React හි මෙම මූලික සංකල්ප ඉගෙන ගනිමින්, සම්භාව්‍ය **"කළ යුතු දේ ලැයිස්තුවක්" (To-Do App)** මුල සිටම නිර්මාණය කරමු.

පූර්ව අවශ්‍යතා: මෙම පාඩම සඳහා HTML, CSS, සහ නූතන JavaScript (ES6+), විශේෂයෙන් functions, arrays (`.map`, `.filter`), සහ objects පිළිබඳව හොඳ අවබෝධයක් තිබීම ඉතා වැදගත් වේ.

1 වන කොටස: React සංවර්ධන පරිසරය සකසා ගැනීම (Setting Up the Environment) ⚛️

React යෙදුමක් නිර්මාණය කිරීමට, අපගේ පරිගණකයේ Node.js සහ npm ස්ථාපනය කර තිබිය යුතුය.

1.1 Node.js සහ npm ස්ථාපනය කිරීම

Node.js යනු JavaScript, වෙබ් බ්‍රව්සරයෙන් පිටත (ඔබගේ පරිගණකයේ) ක්‍රියාත්මක කිරීමට ඉඩ සලසන runtime environment එකකි. npm (Node Package Manager) යනු React වැනි JavaScript පුස්තකාල (packages) බාගත කිරීමට සහ කළමනාකරණය කිරීමට ඇති මෙවලමකි. ඔබ Node.js ස්ථාපනය කරන විට, npm ස්වයංක්‍රීයවම ස්ථාපනය වේ.

1. nodejs.org වෙබ් අඩවියට පිවිසෙන්න.
2. **LTS (Long-Term Support)** සංස්කරණය බාගත කර, සාමාන්‍ය මෘදුකාංගයක් මෙන් ස්ථාපනය කරගන්න.
3. Command Prompt හෝ Terminal එක විවෘත කර, `node -v` සහ `npm -v` යන විධාන ක්‍රියාත්මක කිරීමෙන් ස්ථාපනය සාර්ථකදැයි පරීක්ෂා කරන්න.

1.2 Vite සමඟ නව React App එකක් සෑදීම

පැරණි `create-react-app` මෙවලම වෙනුවට, අද React ව්‍යාපෘති ආරම්භ කිරීමට ඇති වේගවත්ම සහ නවීනතම ක්‍රමය වන්නේ **Vite** (වීට් ලෙස උච්චාරණය කරයි) භාවිතා කිරීමයි.

1. ඔබගේ Terminal එකේ, ඔබ ව්‍යාපෘතිය සෑදීමට කැමති ෆෝල්ඩරයට පිවිසෙන්න.
2. පහත විධානය ක්‍රියාත්මක කරන්න:

   npm create vite@latest

3. Vite මගින් අසන ප්‍රශ්න වලට පිළිතුරු දෙන්න:
   • Project name: `react-todo-app`
   • Select a framework: `React` (arrow keys වලින් තෝරන්න)
   • Select a variant: `JavaScript`
4. දැන්, Vite මගින් පෙන්වන උපදෙස් අනුගමනය කරන්න:

   cd react-todo-app
   npm install
   npm run dev

   • `npm install`: ව්‍යාපෘතියට අවශ්‍ය සියලුම packages (React ඇතුළුව) බාගත කරයි.
   • `npm run dev`: සංවර්ධන සර්වරය (development server) පණ ගන්වයි.

දැන් ඔබගේ වෙබ් බ්‍රව්සරයෙන්, terminal එකේ පෙන්වන `localhost` ලිපිනයට (උදා: `http://localhost:5173/`) පිවිසෙන්න. ඔබට React + Vite හි පිළිගැනීමේ පිටුව දිස්වනු ඇත!

2 වන කොටස: React හි මූලිකාංග - Components සහ JSX 🧱

ඔබගේ `react-todo-app` ෆෝල්ඩරය VS Code එකෙන් විවෘත කරගන්න. අපගේ සියලුම කේත ලිවීම් සිදුවන්නේ `src` ෆෝල්ඩරය තුළය.

2.1 JSX යනු කුමක්ද?

React හි ඇති සුවිශේෂී ලක්ෂණයක් නම් **JSX (JavaScript XML)** යි. JSX මගින් අපට JavaScript ගොනු තුළම, HTML වලට බෙහෙවින් සමාන syntax එකක් ලිවීමට ඉඩ සලසයි. මෙය කේතය වඩාත් දෘශ්‍යමාන සහ තේරුම් ගැනීමට පහසු කරයි.

// මෙය JSX වේ
const element = <h1>Hello, Egotechworld!</h1>;

මෙය බ්‍රව්සරයට කෙලින්ම තේරුම් ගත නොහැක. Vite වැනි මෙවලම් මගින්, මෙම JSX කේතය, බ්‍රව්සරයට තේරුම්ගත හැකි සාමාන්‍ය JavaScript බවට පරිවර්තනය (compile) කරයි.

HTML සහ JSX අතර ප්‍රධාන වෙනස්කම් කිහිපයක්:

• HTML හි `class` attribute එක වෙනුවට, JSX හි `className` භාවිතා කරයි.
• JSX තුළ JavaScript ප්‍රකාශන (expressions) යෙදීමට, වරහන් `{}` භාවිතා කරයි. (උදා: `

  {user.name}

  `).

2.2 Components (කොටස්)

Component එකක් යනු UI එකේ ස්වාධීන, නැවත භාවිතා කළ හැකි කොටසකි. නූතන React හිදී, Component එකක් යනු JSX return කරන සරල JavaScript function එකකි. අපගේ යෙදුමේ ප්‍රධාන component එක `src/App.jsx` ගොනුවේ ඇත.

පළමුව, `App.jsx` සහ `App.css` ගොනු වල ඇති අනවශ්‍ය කේත සියල්ල ඉවත් කර, එය මෙසේ සකස් කරගනිමු:

`src/App.jsx`:

import './App.css';

function App() {
  return (
    <div className="app-container">
      <h1>My React To-Do List</h1>
    </div>
  );
}

export default App;

දැන් ඔබගේ බ්‍රව්සරය දෙස බැලුවහොත්, ඔබට පෙනෙන්නේ මෙම සරල මාතෘකාව පමණි.

3 වන කොටස: React හි හදවත - State සහ Props ❤️

React යෙදුම් ගතික (dynamic) වන්නේ State සහ Props නිසාය.

3.1 State - Component එකේ මතකය (`useState` Hook)

State යනු component එකක් තුළ පවතින, කාලයත් සමඟ වෙනස් විය හැකි දත්ත වේ. Component එකක State එක වෙනස් වූ විට, React ස්වයංක්‍රීයව එම component එක නැවත render කර, UI එක යාවත්කාලීන කරයි.

Functional components වලට state එක් කිරීමට, අපි **Hooks** නම් විශේෂ functions භාවිතා කරමු. ඒ අතරින් ප්‍රධානම Hook එක තමයි `useState`.

අපි අපගේ `App.jsx` එකට state එක් කර, To-Do ලැයිස්තුවක් පෙන්වමු.

`src/App.jsx`:

import { useState } from 'react'; // useState import කරන්න
import './App.css';

function App() {
  // State variables
  const [tasks, setTasks] = useState([
    { id: 1, title: "Learn React Basics", completed: false },
    { id: 2, title: "Build a To-Do App", completed: false },
    { id: 3, title: "Deploy the App", completed: false },
  ]);

  return (
    <div className="app-container">
      <h1>My React To-Do List</h1>
      <div className="todo-list">
        <ul>
          {/* JavaScript .map() function එක භාවිතා කර tasks state එක loop කිරීම */}
          {tasks.map(task => (
            <li key={task.id}>{task.title}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

මෙහිදී, `{tasks.map(...)`}` මගින්, `tasks` array එකේ ඇති සෑම task object එකක් සඳහාම `

import { useState } from 'react';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, title: "Learn React Basics", completed: false },
    { id: 2, title: "Build a To-Do App", completed: false },
  ]);

  // Input field එක සඳහා නව state එකක්
  const [newTask, setNewTask] = useState('');

  const handleAddTask = (e) => {
    e.preventDefault(); // Form එක submit වන විට පිටුව refresh වීම වැළැක්වීම
    if (newTask.trim() === '') return; // හිස් කාර්යයන් ඇතුළත් කිරීම නැවැත්වීම

    const newTodo = {
      id: Date.now(), // අනන්‍ය id එකක් ලබා දීම
      title: newTask,
      completed: false,
    };

    setTasks([...tasks, newTodo]); // පවතින tasks ලැයිස්තුවට නව task එක එක් කිරීම
    setNewTask(''); // Input field එක හිස් කිරීම
  };

  return (
    <div className="app-container">
      <h1>My React To-Do List</h1>

      <!-- Add Task Form -->
      <form onSubmit={handleAddTask} className="todo-form">
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="Add a new task..."
        />
        <button type="submit">Add Task</button>
      </form>

      <!-- The rest of the list rendering code -->
      ...
    </div>
  );
}

export default App;

  const handleDeleteTask = (taskId) => {
    // මැකිය යුතු task එක හැර, අනෙක් සියලුම tasks අඩංගු නව array එකක් සෑදීම
    const updatedTasks = tasks.filter(task => task.id !== taskId);
    setTasks(updatedTasks);
  };

          {tasks.map(task => (
            <li key={task.id}>
              <span>{task.title}</span>
              <button onClick={() => handleDeleteTask(task.id)}>Delete</button>
            </li>
          ))}