৩. Thinking in React

React এর মতো করে ভাবা

React দিয়ে কাজ করতে গেলে আপনাকে একটু আলাদা ভাবে চিন্তা করতে হবে।
এই টিউটোরিয়ালে আমি আপনাকে খুব সহজ ভাষায় দেখাবো, কীভাবে ছোট ছোট কম্পোনেন্ট বানিয়ে একটা প্রোডাক্ট টেবিল তৈরি করা যায়, যেখানে সার্চ করা যাবে।

React দিয়ে অ্যাপ বানাতে গেলে, শুরুতেই পুরো অ্যাপকে ছোট ছোট কম্পোনেন্টে ভাগ করে নিতে হয়।
তারপর ঠিক করতে হয়, কোন কম্পোনেন্টে কোন ডেটা থাকবে, আর কোন ডেটা কোথায় যাবে।

Step 1: UI আর ডেটা চিনে নিন

ধরুন, আপনার কাছে নিচের মতো একটা JSON ডেটা আছে—

[
  { "category": "Fruits", "price": "$1", "stocked": true, "name": "Apple" },
  {
    "category": "Fruits",
    "price": "$1",
    "stocked": true,
    "name": "Dragonfruit"
  },
  {
    "category": "Fruits",
    "price": "$2",
    "stocked": false,
    "name": "Passionfruit"
  },
  {
    "category": "Vegetables",
    "price": "$2",
    "stocked": true,
    "name": "Spinach"
  },
  {
    "category": "Vegetables",
    "price": "$4",
    "stocked": false,
    "name": "Pumpkin"
  },
  { "category": "Vegetables", "price": "$1", "stocked": true, "name": "Peas" }
]

আর UI দেখতে হবে এমন, যেখানে সার্চ বক্স থাকবে, টেবিল থাকবে, আর যেসব প্রোডাক্ট স্টকে নেই, সেগুলো লাল হয়ে থাকবে।

Step 2: পুরো UI-কে ছোট ছোট কম্পোনেন্টে ভাগ করুন

React-এ কাজ করতে গেলে, আপনি UI-কে ছোট ছোট কম্পোনেন্টে ভাগ করে নিন।
যেমন, এই টেবিলের জন্য আমরা নিচের মতো কম্পোনেন্ট বানাবো—

FilterableProductTable
├── SearchBar
└── ProductTable
    ├── ProductCategoryRow
    └── ProductRow

• FilterableProductTable: পুরো টেবিল ধরে রাখবে。
• SearchBar: ইউজার সার্চ করবে এখানে。
• ProductTable: সার্চ অনুযায়ী প্রোডাক্ট দেখাবে。
• ProductCategoryRow: ক্যাটাগরি দেখাবে。
• ProductRow: প্রতিটা প্রোডাক্ট দেখাবে।

Step 3: আগে একটা স্ট্যাটিক ভার্সন বানান

প্রথমে শুধু UI বানান, কোনো ইন্টারঅ্যাকশন ছাড়াই।
মানে, শুধু ডেটা দেখান, কোনো সার্চ বা ক্লিক কাজ করবে না।

এই সময় শুধু props দিয়ে ডেটা পাঠান।
State নিয়ে ভাবার দরকার নেই।

import FilterableProductTable from "./FilterableProductTable";
import PRODUCTS from "./products.json";
import "./style.css";

export default function App() {
  return <FilterableProductTable products={PRODUCTS} />;
}

এভাবে করলে UI-এর গঠন পরিষ্কার বোঝা যায়।
পরে ইন্টারঅ্যাকশন যোগ করা সহজ হয়।

Step 4: কোন ডেটা state হবে, সেটা ঠিক করুন

React-এ যেসব ডেটা ইউজার বদলাতে পারে, সেগুলো state হবে।
যেমন, সার্চ বক্সে লেখা, চেকবক্স টিক দেওয়া—এগুলো state।

Step 5: state কোথায় রাখবেন, সেটা ঠিক করুন

যেসব কম্পোনেন্ট state ব্যবহার করবে, তাদের সবচেয়ে কাছের কমন প্যারেন্টে state রাখুন।

এই উদাহরণে,

• সার্চ টেক্সট আর চেকবক্সের ভ্যালু দুইটাই FilterableProductTable-এ state হবে。
• তারপর সেগুলো props হিসেবে নিচে পাঠান।

import { useState } from "react";

function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState("");
  const [inStockOnly, setInStockOnly] = useState(false);

  return (
    <div>
      <SearchBar
        filterText={filterText}
        inStockOnly={inStockOnly}
        onFilterTextChange={setFilterText}
        onInStockOnlyChange={setInStockOnly}
      />
      <ProductTable
        products={products}
        filterText={filterText}
        inStockOnly={inStockOnly}
      />
    </div>
  );
}

Step 6: নিচ থেকে উপরে ডেটা পাঠানো (Inverse Data Flow)

এখন ইউজার যখন ইনপুটে কিছু লিখবে বা চেকবক্সে ক্লিক করবে,
তখন সেই ডেটা উপরের state-এ আপডেট করতে হবে।

এজন্য, state আপডেট করার ফাংশন (যেমন setFilterText) নিচে পাঠিয়ে দিন।
নিচের কম্পোনেন্টে ইউজার কিছু করলে ওই ফাংশন কল হবে।

function SearchBar({
  filterText,
  inStockOnly,
  onFilterTextChange,
  onInStockOnlyChange,
}) {
  return (
    <form>
      <input
        type="text"
        value={filterText}
        placeholder="Search..."
        onChange={(e) => onFilterTextChange(e.target.value)}
      />
      <label>
        <input
          type="checkbox"
          checked={inStockOnly}
          onChange={(e) => onInStockOnlyChange(e.target.checked)}
        />
        Only show products in stock
      </label>
    </form>
  );
}

এভাবে করলে ইউজার কিছু লিখলে বা চেকবক্সে টিক দিলে,
state আপডেট হবে, আর সেই অনুযায়ী টেবিল ফিল্টার হবে।

সংক্ষেপে

React-এ কাজ করতে গেলে,

• UI-কে ছোট ছোট কম্পোনেন্টে ভাগ করুন
• কোন ডেটা state হবে, সেটা ঠিক করুন
• state কোথায় রাখবেন, সেটা ঠিক করুন
• নিচ থেকে উপরে ডেটা পাঠাতে হলে ফাংশন props হিসেবে পাঠান

এভাবেই আপনি React-এ চিন্তা করতে শিখবেন।

শেষ কথা

React শেখা মানে শুধু কোড শেখা না।
React শেখা মানে—আপনি কীভাবে UI-কে ছোট ছোট ভাগে ভাঙবেন,
state কোথায় রাখবেন, আর ডেটা কীভাবে এক কম্পোনেন্ট থেকে আরেকটায় যাবে, সেটা বুঝে ফেলা।

আপনি যদি এইভাবে চিন্তা করেন,
React-এ যেকোনো UI বানানো আপনার জন্য অনেক সহজ হয়ে যাবে।