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

React এমন একটা জিনিস, যেটা একবার বুঝে গেলে তোমার UI ডিজাইনের চিন্তাভাবনাই বদলে যাবে।

এই টিউটোরিয়ালে, আমরা একটা প্রোডাক্ট টেবিল বানাব – যেটা সার্চ করা যাবে। আর পুরো প্রক্রিয়াটা ধাপে ধাপে শেখাব। React দিয়ে যখন আমরা অ্যাপ বানাই, তখন শুরুতেই সেই অ্যাপকে ছোট ছোট Component-এ ভাগ করে ফেলি। এরপর প্রতিটা Component কোন অবস্থায় কেমন দেখাবে সেটা প্ল্যান করি। তারপর ঠিক করি কোন Component-এর মধ্যে কোন data (state) থাকবে এবং কীভাবে সেই data এক component থেকে আরেকটায় যাবে।

এই লেখায় আমরা একটা মজার UI বানিয়ে এই চিন্তা-প্রক্রিয়া শিখবো — একটা প্রোডাক্ট টেবিল যেখানে সার্চ করা যাবে।

React এর মতো করে চিন্তা করা শিখি

React-এ কোনো UI তৈরি করতে, তুমি সাধারণত নিচের পাঁচটি ধাপ অনুসরণ করবে।

✅ Step 1: UI স্ক্রিনশট এবং JSON ডেটা

ধরো, তোমার হাতে একটা JSON API থেকে ডেটা আসবে এরকম—

[
  { "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-কে Component হায়ারার্কিতে (hierarchy) ভাগ করো

React শিখতে হলে একটা UI দেখেই চিন্তা করতে হবে—"এখানে কয়টা Component হবে?"

UI স্ক্রিনশর্টের প্রতিটি কম্পোনেন্ট এবং সাব-কম্পোনেন্টের চারপাশে বক্স এঁকে তাদের নাম দেওয়া। যদি তুমি কোনো ডিজাইনারের সাথে কাজ করো, তাহলে হয়তো তিনি তার ডিজাইন টুলে এই নামগুলো আগেই দিয়ে রেখেছেন। তাকে জিজ্ঞেস করে নিতে পারো!

একটি UI ডিজাইনকে কম্পোনেন্টে ভাগ করার জন্য তুমি বিভিন্ন কৌশল ব্যবহার করতে পারো:

• প্রোগ্রামিং-এর দৃষ্টিকোণ থেকে: নতুন ফাংশন বা অবজেক্ট তৈরির সময় যে নীতি ব্যবহার করো, এখানেও তাই করবে। যেমন, সিঙ্গেল রেসপন্সিবিলিটি প্রিন্সিপল (single responsibility principle) অনুযায়ী, প্রত্যেকটা কম্পোনেন্টের উচিত শুধু একটা কাজ করা। যদি কোনো কম্পোনেন্ট বেশি বড় হয়ে যায়, তবে তাকে আরও ছোট ছোট সাব-কম্পোনেন্টে ভাগ করে ফেলা উচিত।
• CSS-এর দৃষ্টিকোণ থেকে: তুমি কোন অংশগুলোর জন্য আলাদা CSS ক্লাস লিখতে, তা চিন্তা করতে পারো।
• ডিজাইন-এর দৃষ্টিকোণ থেকে: ডিজাইনের লেয়ারগুলোকে কীভাবে সাজানো হয়েছে, তা দেখতে পারো।

এই UI এর ধরো এমন Component structure হতে পারে:

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

এই স্ক্রিনে আমরা পাঁচটি কম্পোনেন্ট দেখতে পাচ্ছি:

1. FilterableProductTable (ধূসর): পুরো অ্যাপটিকে ধারণ করে।
2. SearchBar (নীল): ইউজারের ইনপুট গ্রহণ করে।
3. ProductTable (ল্যাভেন্ডার): ইউজারের ইনপুট অনুযায়ী তালিকাটি দেখায় এবং ফিল্টার করে।
4. ProductCategoryRow (সবুজ): প্রতিটি ক্যাটাগরির জন্য একটি হেডিং দেখায়।
5. ProductRow (হলুদ): প্রতিটি প্রোডাক্টের জন্য একটি সারি দেখায়।

সব কম্পোনেন্ট চিহ্নিত করার পর, সেগুলোকে একটি হায়ারার্কি বা ফ্যামিলি ট্রি-এর মতো করে সাজিয়ে নাও। যে কম্পোনেন্ট যার ভেতরে থাকবে, সে তার চাইল্ড হিসেবে বিবেচিত হবে:

✅ Step 3: প্রথমে একটা static version বানাও (ইন্টারেক্টিভ না)

এই স্টেপে আমরা শুধু UI বানাবো। কোন ইন্টারঅ্যাকশন থাকবে না। কোন ক্লিক করলে কিছু হবে না।

➡️ এই সময়ে শুধু props দিয়ে data পাঠাও, কোন state ইউজ করো না।

এইভাবে করার মানে হলো – একবার UI টা structure করে নাও, তারপর ইন্টারঅ্যাকশন যোগ করো।

STEP-2 তে তোমার কম্পোনেন্ট হায়ারার্কি তৈরি করা শেষ হয়েছে, এবার অ্যাপটি বানানোর পালা। সবচেয়ে সহজ উপায় হলো, কোনো ধরনের ইন্টারেক্টিভিটি যোগ না করে প্রথমে একটি স্ট্যাটিক সংস্করণ তৈরি করা যা শুধু ডেটা দেখাবে। আগে কাঠামো বানিয়ে নিলে, পরে ইন্টারেক্টিভিটি যোগ করা অনেক সহজ হয়।

একটা সহজ নীতি ফলো করো: স্ট্যাটিক সংস্করণ বানাতে অনেক টাইপিং লাগে কিন্তু চিন্তা কম; আর ইন্টারেক্টিভিটি যোগ করতে চিন্তা বেশি লাগে কিন্তু টাইপিং কম।

এই ধাপে তুমি শুধু ডেটা পাস করার জন্য props (opens in a new tab) ব্যবহার করবে। State (opens in a new tab) এখন একদমই ব্যবহার করবে না। State শুধুমাত্র সেই ডেটার জন্য যা সময়ের সাথে পরিবর্তিত হয়।

তুমি উপর থেকে নিচে (FilterableProductTable থেকে শুরু করে) অথবা নিচ থেকে উপরে (ProductRow থেকে শুরু করে)—যেকোনো দিক থেকে কাজ শুরু করতে পারো।

এই ধাপ শেষে, তোমার কাছে ডেটা রেন্ডার করার জন্য একটি পুনঃব্যবহারযোগ্য কম্পোনেন্ট লাইব্রেরি থাকবে। ডেটা উপর থেকে নিচের দিকে পাঠাবে, যাকে one-way data flow বলে।

✅ Step 4: কোন data state হবে চিন্তা করো

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

State হলো- নুন্যতম পরিবর্তনশীল ডেটা যা তোমার অ্যাপকে মনে রাখতে হবে। State তৈরির সবচেয়ে গুরুত্বপূর্ণ নীতি হলো DRY (Don't Repeat Yourself)

আমাদের এই UI-তে:

এখন আমাদের অ্যাপের ডেটাগুলো নিয়ে ভাবা যাক: ১. প্রোডাক্টের মূল তালিকা। ২. ইউজারের লেখা সার্চ টেক্সট। ৩. চেকবক্সের ভ্যালু (টিক দেওয়া আছে কি নেই)। ৪. ফিল্টার করা প্রোডাক্টের তালিকা।

এদের মধ্যে কোনটি state? চলো, যেগুলো state নয়, সেগুলো চিহ্নিত করি:

• সময়ের সাথে কি এটি অপরিবর্তিত থাকে? যদি তাই হয়, তবে এটি state নয়।
• এটি কি প্যারেন্ট থেকে props হিসেবে আসে? যদি তাই হয়, তবে এটি state নয়। (যেমন, প্রোডাক্টের মূল তালিকা)
• তুমি কি এটিকে বিদ্যমান স্টেট বা props থেকে গণনা করতে পারো? যদি পারো, তবে এটি অবশ্যই state নয়! (যেমন, ফিল্টার করা তালিকা)

এই প্রশ্নগুলোর পর যা অবশিষ্ট থাকবে, সম্ভবত সেটাই state।

তাহলে দেখা যাচ্ছে, শুধুমাত্র সার্চ টেক্সট এবং চেকবক্সের ভ্যালু হলো আমাদের state!

কোথায় রাখবে?

✅ Step 5: State কোথায় রাখতে হবে বুঝে নাও

এখন তোমাকে ঠিক করতে হবে কোন কম্পোনেন্টে state রাখবে — অর্থাৎ কোন কম্পোনেন্ট সেই ডেটা সংরক্ষণ করবে এবং পরিবর্তন করবে।

প্রতিটি state-এর জন্য নিচের ৩টি ধাপ অনুসরণ করো:

১. কোন কোন কম্পোনেন্ট এই state ব্যবহার করে, সেটা খুঁজে বের করো। ২. এই কম্পোনেন্টগুলোর সবচেয়ে কাছের কমন প্যারেন্ট (common parent) কোনটি, সেটা বের করো। ৩. সেই কমন প্যারেন্টে state রাখো। দরকার হলে তারও ওপরের কোনো কম্পোনেন্টে রাখতে পারো।

আমাদের উদাহরণে:

• কোন কম্পোনেন্টগুলো state ব্যবহার করছে?

  • ProductTable: প্রোডাক্ট ফিল্টার করতে state দরকার
  • SearchBar: ইউজারের ইনপুট (টেক্সট আর চেকবক্স) দেখাতে state দরকার

• এদের কমন প্যারেন্ট কম্পোনেন্ট কে?

  • FilterableProductTable

• তাই, আমরা filterText আর inStockOnly এই দুইটি state FilterableProductTable-এ রাখব।

এখন আমরা FilterableProductTable কম্পোনেন্টে useState() দিয়ে 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} />
      <ProductTable
        products={products}
        filterText={filterText}
        inStockOnly={inStockOnly}
      />
    </div>
  );
}

সংক্ষেপে বললে: যেসব কম্পোনেন্ট state ব্যবহার করে, তাদের সবচেয়ে কাছের কমন প্যারেন্ট খুঁজে নিয়ে সেখানেই state রাখো। এতে ডেটা ম্যানেজ করা সহজ হয়।

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

এখন পর্যন্ত তোমার অ্যাপের ডেটা উপরে থেকে নিচে যাচ্ছে — অর্থাৎ FilterableProductTable থেকে SearchBar আর ProductTable-এ props পাঠিয়ে সব ঠিকমতো দেখাচ্ছে।

কিন্তু এখন দরকার নিচের দিক থেকে উপরের দিকে ডেটা পাঠানো। কেন? কারণ, ইউজার যখন ইনপুট ফিল্ডে কিছু লিখবে বা চেকবক্স ক্লিক করবে, তখন তোমার অ্যাপের state আপডেট হওয়া দরকার।

তাহলে সমাধান কী?

1. FilterableProductTable-এ যে দুইটা state আছে (filterText, inStockOnly), সেগুলোর update ফাংশন (setFilterText, setInStockOnly) নিচে পাঠিয়ে দাও — ঠিক যেভাবে ডেটা পাঠাও।
2. নিচে, SearchBar-এ ওই ফাংশনগুলো ব্যবহার করে ইনপুট পরিবর্তন হলে state আপডেট করো।

Step-by-step সহজ ভাষায়:

🔼 ১. উপরের কম্পোনেন্ট FilterableProductTable:

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>
  );
}

🔽 ২. নিচের কম্পোনেন্ট SearchBar:

function SearchBar({
  filterText,
  inStockOnly,
  onFilterTextChange,
  onInStockOnlyChange,
}) {
  return (
    <form>
      <input
        type="text"
        value={filterText}
        placeholder="Search..."
        onChange={(e) => onFilterTextChange(e.target.value)} // ইউজার লিখলে state আপডেট
      />
      <label>
        <input
          type="checkbox"
          checked={inStockOnly}
          onChange={(e) => onInStockOnlyChange(e.target.checked)} // চেকবক্স বদলালে state আপডেট
        />
        Only show products in stock
      </label>
    </form>
  );
}

✅ এখন কী হচ্ছে?

• ইউজার কিছু লিখলে onChange ট্রিগার হয়।
• সেটা setFilterText বা setInStockOnly ফাংশন কল করে।
• ফলে উপরের state আপডেট হয়।
• তারপর সেই নতুন state আবার নিচে প্রপস হিসেবে যায়।
• ফলে ফিল্টার করা প্রোডাক্ট দেখায় ✅

এভাবে নিচ থেকে উপরের দিকে ডেটা পাঠানোর এই সিস্টেমকেই বলে Inverse Data Flow। React-এ state সবসময় উপরে থাকে, আর যেখান থেকে দরকার সেখানে props দিয়ে পাঠানো হয়।

🎯 React এর মতো করে ভাবা মানে কী?

তুমি একটা UI দেখলে মাথায় Component গুলো চিন্তা করে ফেলো।

তুমি বুঝে ফেলো কোন কোন data স্ট্যাটিক, কোনটা dynamic।

তুমি চিন্তা করো কে কার থেকে props নেবে, কে কাকে state পাঠাবে।

এটাই হচ্ছে Thinking in React.

❤️ শেষ কথা

React শেখা মানেই শুধু কোড করা না — চিন্তা করার স্টাইল বদলে ফেলা। ধাপে ধাপে প্রোজেক্ট স্কোপ, টার্গেট ইউজার, ফিচার লিস্ট, UI Design, Component Hierrerchy, State Planning, Routing Planning, Folder Structure বানিয়ে প্রজেক্ট শুরু করা।

এই টিউটোরিয়ালটি React দিয়ে কম্পোনেন্ট ও অ্যাপ্লিকেশন তৈরির চিন্তার প্রক্রিয়া সম্পর্কে একটি সংক্ষিপ্ত ধারণা দিল। এখন তুমি একটি React প্রজেক্ট শুরু করতে পারো (opens in a new tab)

React শেখা হোক তোমার জন্য আনন্দের, জটিলতা নয়।