Components কি ?

তুমি যখন রিয়াক্টে কাজ করো, তখন কম্পোনেন্টের গুরুত্ব খুবই বেশি। Component হলো রিয়াক্টের কোর কনসেপ্টগুলোর মধ্যে একটি। এটিকে UI বানানোর বিল্ডিং ব্লক বলা হয়। তুমি ভাবতে পারো, UI এর প্রতিটা অংশের কোড, যা বার বার রি-ইউজ করা যায় সেগুলোকে একেকটা কম্পোনেন্ট বলা হয়। এমনকি একটি ছোট বাটনও একটি কম্পোনেন্ট হতে পারে।

রিয়াক্ট আমাদের মার্কাপগুলোকে ছোট ছোট রি-ইউজেবল কোড ব্লকে লিখতে সাহায্য করে, যেখানে প্রতিটি ব্লক হলো একেকটি কম্পোনেন্ট। কিন্তু, কম্পোনেন্ট বানানোর জন্য কিছু নিয়ম রয়েছে যা তুমি অবশ্যই মনে রাখতে হবে।

কিভাবে একটি রিয়াক্ট Component বানাতে হয় ?

যখন তুমি একটি রিয়াক্ট কম্পোনেন্ট তৈরি করো, তা হলো একটি জাভাস্ক্রিপ্ট ফাংশন, যাতে মার্কাপের সাথে জাভাস্ক্রিপ্টের সংমিশ্রণ থাকে।

রিয়াক্ট কম্পোনেন্টের সিনট্যাক্স

export default function Profile() {
  return <img src="https://i.imgur.com/MK3eW3Am.jpg" alt="Katherine Johnson" />;
}

একটি কম্পোনেন্ট বানাতে যেসব স্টেপ ফলো করতে হয়, তা হলোঃ

export default function Profile() {}

export default function Profile() {
  return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
}

export default function Profile() {
  return (
    <div>
      <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
    </div>
  );
}

কম্পোনেন্ট কিভাবে ব্যবহার করতে হয়ঃ

একবার তুমি একটি কম্পোনেন্ট বানালে, সেটিকে একই ফাইলে অন্য আরেকটি কম্পোনেন্টের ভিতরে অথবা অন্য ফাইলে import করে ব্যবহার করতে পারো।

উদাহরণঃ

import Profile from "./Profile";
 
export default function Gallery() {
  return (
    <section>
      <h1>Amazing Scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

কম্পোনেন্ট নেস্টিং করার ক্ষেত্রে যেসব রুলস মানতে হয়ঃ

• Rule 1: যদি এমন কম্পোনেন্ট হয়, যেটা খুব ছোট এবং রি-ইউজ হবে না, সেটা একই ফাইলে লেখা যায় এবং ব্যবহার করা যায়। কিন্তু যদি কম্পোনেন্ট অনেক বড় হয় এবং interactivity বেশি হয়, এবং বিভিন্ন জায়গায় রি-ইউজ করতে হয়, তাহলে আলাদা আলাদা ফাইলে কম্পোনেন্ট বানাতে হবে।

• Rule 2: একটা কম্পোনেন্টের ভিতর আরেকটা কম্পোনেন্টকে নেস্টেড করা যাবে, কিন্তু একটা কম্পোনেন্টের ভিতর অন্য আরেকটা ফাংশন ডিফাইনেশন নেস্টেড করা যাবে না।

অতিরিক্ত উদাহরণ: কম্পোনেন্ট নেস্টিং

import Gallery from "./Gallery";
 
export default function App() {
  return (
    <div>
      <h1>Welcome to the Science Gallery</h1>
      <Gallery />
    </div>
  );
}

এই উদাহরণে, App কম্পোনেন্টের ভিতর Gallery কম্পোনেন্টটি ব্যবহার করা হয়েছে। তুমি এইভাবে বিভিন্ন কম্পোনেন্টকে নেস্ট করে তোমার অ্যাপ্লিকেশন তৈরি করতে পারো।

উপসংহার

রিয়াক্টের কম্পোনেন্ট কনসেপ্ট তোমাকে তোমার UI কে সংগঠিত ও পুনঃব্যবহারযোগ্যভাবে তৈরি করতে সাহায্য করে। সঠিক নিয়ম মেনে কম্পোনেন্ট তৈরি ও ব্যবহারে তোমার কোড হবে আরও পরিষ্কার ও কার্যকর।