Why we need to use React?

যখন আমরা শুধু জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েবসাইট তৈরি করি, তখন ডোম (DOM - Document Object Model) ম্যানিপুলেট করা বেশ কঠিন হয়ে পড়ে, বিশেষ করে যখন অ্যাপ্লিকেশনটি বড় এবং জটিল হয়। প্রতিটি ছোটখাটো পরিবর্তনের জন্যও আমাদের কোডের অনেকটা অংশ লিখতে হয় এবং ডোম-এর সরাসরি পরিবর্তনের কারণে পারফর্মেন্সের সমস্যাও হতে পারে।

React এই সমস্যাগুলোর সমাধান করে দুটি প্রধান ধারণার মাধ্যমে: ভার্চুয়াল ডোম (Virtual DOM) এবং কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার (Component-based approach)।

আসুন একটি ছোট উদাহরণ দিয়ে বিষয়টি পরিষ্কার করা যাক:

জাভাস্ক্রিপ্ট (ম্যানুয়াল ডোম ম্যানিপুলেশন) :

ধরুন আমাদের দুটি কাউন্টার আছে। এখন যদি আমরা সাধারণ জাভাস্ক্রিপ্ট ব্যবহার করে এটি করি, তাহলে কীভাবে কোডটি দেখতে হবে:

<div class="counter">
  <p id="count1">0</p>
  <button id="btn1">Increment 1</button>
</div>
 
<div class="counter">
  <p id="count2">0</p>
  <button id="btn2">Increment 2</button>
</div>
 
<script>
  let count1 = 0;
  let count2 = 0;
 
  const countEl1 = document.getElementById("count1");
  const countEl2 = document.getElementById("count2");
 
  document.getElementById("btn1").addEventListener("click", () => {
    count1++;
    countEl1.textContent = count1;
  });
 
  document.getElementById("btn2").addEventListener("click", () => {
    count2++;
    countEl2.textContent = count2;
  });
</script>

এখানে প্রতিটি নতুন কাউন্টারের জন্য আমাদের নতুন ভেরিয়েবল (count1, count2), নতুন DOM reference (countEl1, countEl2), এবং আলাদা ইভেন্ট হ্যান্ডলার সেট করতে হয়েছে । এছাড়া UI আপডেটের জন্য প্রতিবার Unique ID দিয়ে চিহ্নিত করা ও ইভেন্ট হ্যাল্ডেলার দিয়ে ভ্যালু পাস করতে হচ্ছে। যদি তৃতীয় কাউন্টার যোগ করতে চাই, তাহলে আবার সেই একই কাজগুলোই করতে হবে।

👉 এভাবে কোড দ্রুত জটিল হয়ে যায় এবং একই রকম কাজ বারবার করতে হয় — যেটাকে বলা হয় “manual identification problem”। এছাড়া ভবিষ্যৎ কোডবেস অনেক বড় হলে কোড ম্যানেজ ও হ্যান্ডেল করা কষ্টকর হয়ে পরে (অনেক ক্ষেত্রে অসম্ভব হয়ে

React দিয়ে একই কাজ অনেক সহজে:

React এ আমরা শুধুমাত্র একটি Counter কম্পোনেন্ট বানিয়ে তা একাধিকবার ব্যবহার করতে পারি:

jsx;
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
 
function App() {
  return (
    <div>
      <h2>Multiple Counters</h2>
      <Counter />
      <Counter />
    </div>
  );
}

এখানে প্রতিটি Counter কম্পোনেন্টের নিজের আলাদা state থাকে। DOM element বা ইভেন্ট হ্যান্ডলারকে আলাদা আলাদা চিনে নিতে হয় না — React নিজেই সব ম্যানেজ করে ফেলে।

এই React কোডে যা হচ্ছে:

1. কম্পোনেন্ট (Component): Counter একটি কম্পোনেন্ট। React অ্যাপ্লিকেশন ছোট ছোট, পুনর্ব্যবহারযোগ্য কম্পোনেন্টের সমন্বয়ে গঠিত হয়। এখানে Counter কম্পোনেন্টটি কাউন্টারের ডিসপ্লে এবং increment বাটনটিকে একসাথে রেখেছে।
2. স্টেট (State): useState(0) হুক ব্যবহার করে আমরা count নামক একটি স্টেট ভেরিয়েবল তৈরি করেছি, যার প্রাথমিক মান 0। setCount ফাংশনটি ব্যবহার করে আমরা এই স্টেটের মান আপডেট করতে পারি।
3. ভার্চুয়াল ডোম (Virtual DOM): যখন handleIncrement ফাংশনটি কল করা হয়, তখন setCount(count + 1) স্টেট-এর মান পরিবর্তন করে। React সাথে সাথে ভার্চুয়াল ডোম-এ এই পরিবর্তনের একটি “ছায়া” তৈরি করে।
4. স্মার্ট আপডেট (Smart Update): React এরপর ভার্চুয়াল ডোম-এর আগের অবস্থার সাথে নতুন অবস্থার তুলনা করে (diffing)। এটি শুধুমাত্র সেই অংশগুলো খুঁজে বের করে যেগুলো আসলে পরিবর্তিত হয়েছে।
5. বাস্তব ডোমে আপডেট (Update Real DOM): অবশেষে, React শুধুমাত্র পরিবর্তিত অংশগুলোকেই ব্রাউজারের আসল ডোমে আপডেট করে। পুরো ডোম রি-রেন্ডার করে না।

সুবিধা:

• পারফর্মেন্স (Performance): ভার্চুয়াল ডোম ব্যবহারের ফলে অপ্রয়োজনীয় ডোম ম্যানিপুলেশন এড়ানো যায়, যা অ্যাপ্লিকেশনের পারফর্মেন্স অনেক বাড়িয়ে দেয়।
• সহজ কোড (Simpler Code): কম্পোনেন্ট-ভিত্তিক আর্কিটেকচারের কারণে কোড মডুলার এবং পুনর্ব্যবহারযোগ্য হয়, যা বড় অ্যাপ্লিকেশন ম্যানেজ করা সহজ করে তোলে।
• ডিক্লারেটিভ প্রোগ্রামিং (Declarative Programming): React-এ আপনি UI-এর “কেমন” দেখতে হবে তা বর্ণনা করেন, “কিভাবে” আপডেট হবে তা নয়। React নিজেই ডোম আপডেট করার জটিলতা সামলে নেয়।

React কেন সহজ করে তোলে এই কাজটা?

সারাংশে:

React আমাদের ম্যানুয়াল ডোম ম্যানিপুলেশনের ঝামেলা থেকে বাঁচায়। শুধু state পরিবর্তন করলেই UI আপডেট হয়। নতুন কম্পোনেন্ট যোগ করতেও কোনও নতুন ভেরিয়েবল বা id ব্যবহারের দরকার হয় না। এই জন্যেই বড়, ডাইনামিক অ্যাপ্লিকেশন তৈরিতে React সবচেয়ে বেশি ব্যবহৃত হয়।

React-এর লক্ষ্য :

1. Complex UI সহজে তৈরি করা।
2. ছোট ছোট অংশে UI ভাগ করে component আকারে কাজ করা।