React এ যেভাবে চিন্তা ভাবনা করবেন

React Developer-এর মতো ভাবতে শিখুন

React শেখার সবচেয়ে বড় চ্যালেঞ্জ — কোড লেখা না, বরং চিন্তার ধরন বদলানো।

আপনি যদি আগে jQuery বা vanilla JavaScript দিয়ে কাজ করে থাকেন, আপনি জানেন DOM manipulate মানে সরাসরি HTML element খুঁজে বের করে বদলানো। React-এ সেটা হয় না।

React-এ আপনি বলবেন না "এই button-টা hide করো" — আপনি বলবেন "এই data এখন false, তাই button দেখাবে না।"

এটাই React-এর core philosophy। DOM আপনার দায়িত্ব না — data আপনার দায়িত্ব।

React আসলে কীভাবে কাজ করে?

React বোঝার জন্য একটা সূত্র মাথায় রাখুন —

UI = f(state)

আপনার UI হলো আপনার state-এর একটা pure function-এর output। State বদলালে UI বদলায় — automatically, predictably।

পর্দার আড়ালে কী হয়?

আপনি যখন useState দিয়ে state update করেন, React তিনটি ধাপে কাজ করে:

১. Component re-render — React আপনার component function আবার call করে, নতুন state নিয়ে নতুন JSX তৈরি হয়।

২. Virtual DOM diff — React নতুন JSX-কে আগের Virtual DOM-এর সাথে compare করে। Virtual DOM হলো একটা lightweight JavaScript object যা real DOM-এর প্রতিচ্ছবি।

৩. Minimal DOM update — শুধু যে অংশটুকু বদলেছে, সেটাই real DOM-এ update করে। পুরো page reload হয় না।

state পরিবর্তন হলো
        ↓
Component function আবার run হলো
        ↓
নতুন Virtual DOM তৈরি হলো
        ↓
React পুরনো vs নতুন Virtual DOM compare করলো (diffing)
        ↓
শুধু পরিবর্তিত অংশ real DOM-এ update হলো

এই process-কে বলে Reconciliation — এবং এটাই React-কে এত fast করে।

একজন React Developer কীভাবে চিন্তা করেন?

যেকোনো নতুন UI দেখলে একজন React developer-এর মাথায় চারটি প্রশ্ন আসে —

1. এই UI-কে কোন কোন component-এ ভাগ করা যায়?
2. কোন data সময়ের সাথে বদলাবে? (সেটাই state)
3. সেই state কোন component-এ থাকবে?
4. Data কোথা থেকে কোথায় যাবে?

এই চারটি প্রশ্নের উত্তর দিতে পারলেই যেকোনো UI বানানো সম্ভব।

হাতে-কলমে উদাহরণ: Product Inventory App

এটি এমন একটি অ্যাপ যার মাধ্যমে একটি দোকান বা ব্যবসার কোন পণ্য কতটি আছে, কতটি বিক্রি হয়েছে, কতটি নতুন এসেছে এবং কোন পণ্য শেষ হয়ে যাচ্ছে—এসব তথ্য সহজে পরিচালনা করা যায়।

একটা product inventory app বানাবো যেখানে —

• সব product দেখা যাবে category অনুযায়ী
• search করে product খোঁজা যাবে
• শুধু "in stock" product filter করা যাবে
• out of stock product আলাদাভাবে চিহ্নিত থাকবে

প্রথমে Data দেখুন

React developer সবার আগে data দেখে, তারপর UI।

[
  { "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" }
]

এই data দেখেই বোঝা যাচ্ছে —

• Products category অনুযায়ী group হবে
• stocked: false মানে out of stock — আলাদাভাবে দেখাতে হবে
• name আর price display হবে

Step 1 — UI ভেঙে Component Tree বানান

UI দেখে component tree তৈরি করা React developer-এর প্রথম কাজ।

Rule: একটা component শুধু একটাই কাজ করবে। যদি দেখেন একটা component অনেক কিছু করছে — ভাঙুন।

FilterableProductTable   ← পুরো app ধরে রাখে, state মালিক
  ├── SearchBar           ← user input (search + filter) নেয়
  └── ProductTable        ← filtered products render করে
        ├── ProductCategoryRow   ← category header দেখায়
        └── ProductRow           ← একটি product দেখায়

প্রতিটা component-এর একটাই দায়িত্ব —

Step 2 — আগে Static Version বানান

Expert tip: প্রথমে কোনো interactivity ছাড়াই শুধু UI বানান। State-এর কথা মাথায় আনবেন না।

Static version-এ শুধু props ব্যবহার করুন। Data উপর থেকে নিচে props হিসেবে যাবে।

ভাবুন — প্রথমে একটা screenshot বানাচ্ছেন, তারপর সেটাকে interactive করবেন।

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

export default function App() {
  return (
    <div className="app">
      <div className="app-header">
        <h1>🛒 Product Inventory</h1>
        <p>Browse and filter our available products</p>
      </div>
      <FilterableProductTable products={PRODUCTS} />
    </div>
  );
}

Step 3 — State চিনুন

এখন ভাবুন — এই app-এ কী কী বদলাতে পারে?

কোনো data state হবে কিনা সেটা বোঝার তিনটি প্রশ্ন —

• ইউজার কি এটা বদলাতে পারে?
• এটা কি অন্য কোনো data থেকে calculate করা যায়?
• সময়ের সাথে কি এটা বদলায়?

এই app-এ বিশ্লেষণ —

গুরুত্বপূর্ণ: Filtered list-কে আলাদা state হিসেবে রাখলে ভুল হবে — এটা derived value, তাই render-এর সময় calculate করুন।

Step 4 — State কোথায় রাখবেন?

Golden Rule: State রাখুন সেই component-এ যে সবার আগে সেটা ব্যবহার করে — অথবা তার সবচেয়ে কাছের common parent-এ।

এই app-এ —

• SearchBar — search text দেখায় ও update করে
• ProductTable — search text দিয়ে filter করে

দুটোরই common parent হলো FilterableProductTable। তাই state সেখানেই।

import { useState } from "react";

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

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

Step 5 — Inverse Data Flow (নিচ থেকে উপরে)

React-এ data সবসময় উপর থেকে নিচে যায় (props)। কিন্তু user interaction উপরের state বদলাতে হবে — এটা কীভাবে করবেন?

উত্তর: State update function-টাকে নিচে props হিসেবে পাঠিয়ে দিন।

FilterableProductTable
  └─ state: filterText, setFilterText
       ↓ props হিসেবে পাঠায়
     SearchBar
       └─ onChange → onFilterTextChange(value) call করে
            ↑ setFilterText রান হয়, state update
     FilterableProductTable re-renders
       ↓ নতুন filterText props হিসেবে নিচে যায়
     ProductTable
       └─ নতুন filter দিয়ে list দেখায়

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

User টাইপ করলে onChange fire হয় → setFilterText call হয় → React re-render করে → নতুন filtered list দেখায়। এই পুরো cycle milliseconds-এ শেষ।

পুরো Data Flow এক নজরে

User "ap" টাইপ করলো
        ↓
onChange event fire হলো
        ↓
setFilterText("ap") call হলো
        ↓
React re-render schedule করলো
        ↓
FilterableProductTable আবার run হলো (filterText = "ap")
        ↓
নতুন props SearchBar ও ProductTable-এ গেলো
        ↓
ProductTable filter করলো — শুধু "Apple" match করলো
        ↓
React Virtual DOM diff করলো
        ↓
Real DOM-এ শুধু table body update হলো
        ↓
User দেখলো filtered result

Expert-এর মতো ভাবুন

React শেখার সবচেয়ে বড় lesson —

আপনি DOM manipulate করেন না। আপনি state manage করেন।

DOM React-এর দায়িত্ব। আপনার দায়িত্ব শুধু বলা — "এখন data এটা।" React বাকি কাজ নিজেই করবে।

এই চিন্তাটা একবার মাথায় ঢুকে গেলে, React দিয়ে যেকোনো UI বানানো অনেক সহজ হয়ে যাবে।

সংক্ষেপে — Checklist

যেকোনো React app বানানোর আগে এই checklist follow করুন —

• UI দেখে component tree বানান
• প্রতিটা component-এর একটাই দায়িত্ব নিশ্চিত করুন
• কোন data state হবে চিহ্নিত করুন
• Derived data-কে আলাদা state হিসেবে রাখবেন না
• State সবচেয়ে কাছের common parent-এ রাখুন
• State update function নিচে props হিসেবে পাঠান