Your first Component

কম্পোনেন্ট কী?

কম্পোনেন্ট হলো- ইউজার ইন্টারফেস তৈরির ছোট্ট ছোট্ট ইট!

রিয়্যাক্টে কম্পোনেন্ট বলতে আমরা বুঝি ইউজার ইন্টারফেসের ছোট্ট ছোট্ট ইট বা বিল্ডিং ব্লক। মনে করো তোমার ঘর। ঘর তৈরি করার জন্য তুমি কী কী ব্যবহার করো?

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

রিয়্যাক্টেও ঠিক এমনই। জটিল ইউজার ইন্টারফেসগুলো ছোটো ছোটো কম্পোনেন্টগুলো দিয়ে তৈরি করা হয়।

• React-এ, কম্পোনেন্টসমূহ হল UI তৈরির মূল ভিত্তি।
• কম্পোনেন্ট দিয়ে আমরা HTML, CSS এবং JavaScript-কে একসাথে লিখতে পারি।
• আপনি কম্পোনেন্ট তৈরি করে, যেমন <Post />, এবং সেগুলিকে ওয়েবসাইটের ভিন্ন ভিন্ন পেজে ব্যবহার করতে পারবেন। শুধু ডাটাগুলো ভিন্ন হবে।
• React - এর ওপেন সোর্স কমুনিটি Chakari UI, Matarial UI হাজার হাজার Custom কম্পোনেন্ট অলরেডি তৈরি করেছে। আপনি চাইলে সেগুলিও আপনার সাইটে ব্যবহার করতে পারবেন।

কম্পোনেন্টের সুবিধা:

• ছোট এবং পুনর্ব্যবহারযোগ্য: প্রতিটি কম্পোনেন্ট আলাদা আলাদা ফাইলে লেখা হয়, আর এগুলো export করে বিভিন্ন জায়গায় পুনর্ব্যবহার করা যায়। তোমার ঘরের দরজা একটা রুম থেকে আরেকটা রুমে লাগাতে পারো, একইভাবে রিয়্যাক্টেও একই কম্পোনেন্টকে বিভিন্ন জায়গায় ব্যবহার করা যায়।
• ডেটা-চালিত: কম্পোনেন্টগুলো ডেটা দিয়ে চলে। ডেটা পরিবর্তন হলে কম্পোনেন্টগুলোও পরিবর্তন হয়। তোমার রুমের টেবিলের উপর যদি নতুন বই রাখো, তাহলে টেবিলের উপর দেখানো ডেটাও পরিবর্তন হবে।
• কোডের রিডাবিলিটি বাড়ায়:

রিয়্যাক্টে কম্পোনেন্টগুলোর এই সুবিধাগুলো ব্যবহার করে আমরা দ্রুত এবং দক্ষতার সাথে জটিল ইউজার ইন্টারফেস তৈরি করতে পারি।

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

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

কম্পোনেন্ট লেখার কিছু নিয়ম আছে। নিচের উদাহরণটি দেখো-

export default function Post() {
  const postData = {
    title: "React Bangla Tutorial: Component",
    author: "unknown",
    content: "কম্পোনেন্ট জোড়া দিয়ে দিয়ে একটি রিয়্যাক্ট এপ্লিকেশন তৈরি হয়।",
  };
  return (
    <div>
      <h1>{postData.title}</h1>
      <div>{postData.content}</div>
    </div>
  );
}

কম্পোনেন্ট ব্যবহার করব কিভাবে:

• কম্পোনেন্ট ট্রি আকারে ব্যবহার করা। মানে একটার ভিতরে আর একটা এইভাবে :

function Profile() {
  return <img src="..." alt="..." />;
}
 
function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

• ব্রাউজার অনুবাদ করে শেষ পর্যন্ত নিম্নলিখিত HTML দেখতে পায়:

<section>
  <h1>Amazing scientists</h1>
  <img src="..." alt="..." />
  <img src="..." alt="..." />
  <img src="..." alt="..." />
</section>

সার সংক্ষেপ:

• React আপনাকে কম্পোনেন্ট তৈরি করতে দেয়, যা আপনার অ্যাপের জন্য পুনর্ব্যবহারযোগ্য UI উপাদান।
• একটি React অ্যাপে, প্রতিটি UI অংশই এক একটি কম্পোনেন্ট।
• React কম্পোনেন্টসমূহ হল সাধারণ JavaScript ফাংশন, তবে এদের কিছু বিশেষ বৈশিষ্ট্য রয়েছে:
  • এদের নাম সবসময় বড় হাতের অক্ষর দিয়ে শুরু হয়।
  • এরা JSX মার্কআপ রিটার্ন করে।