Components কি ?
Component হলো রিয়াক্টের কোর কনসেপ্টগুলোর মধ্যে একটি । এটিকে UI বানানোর বিল্ডিং ব্লক বলা হয়ে থাকে । UI এর প্রতিটা অংশের কোড, যা বার বার রি-ইউজ করা যায় সেগুলোকে একেকটা কম্পোনেন্ট বলা যায়। একটি ছোট বাটনও একটা কম্পোনেট হতে পারে ।
রিয়াক্ট আমাদের মার্কাপ গুলোকে ছোট ছোট রি-ইউজেবল কোড ব্লকে এ লিখতে সাহায্য করে,যার একেকটি ব্লক হলো একেকটি কম্পোনেন্ট।
তবে কম্পোনেন্ট বানানোর জন্য কিছু নিয়ম রয়েছে যা নিচে দেখানো হয়েছে।
কিভাবে একটি রিয়াক্ট Component বানাতে হয় ?
রিয়াক্ট কম্পোনেট হলো একটি জাভাস্ক্রিপ্ট ফাংশন। যাতে আমাদের মার্কাপের সাথে জাভাস্ক্রিপ্টের সংমিশ্রণ থাকে।
রিয়াক্ট কম্পোনেন্টের সিনট্যাক্স
export default function Profile() {
return (
<img
src='https://i.imgur.com/MK3eW3Am.jpg'
alt='Katherine Johnson'
/>
);
}একটি কম্পোনেন্ট বানাতে যেসব স্টেপ ফলো করতে হয়,তা হলোঃ
কম্পোনেন্টকে এক্সপোর্ট করা
export default ব্যাবহার করে একটা কম্পোনেন্টকে রি-ইউজেবল করতে হয়, যাতে আমরা অন্য ফাইলে কম্পোনেন্টটিকে import
করে ব্যাবহার করতে পারি।
ফাংশন ডিফাইন করা
export default এর পর একটা নেমড ফাংশন ডিফাইন করতে হয়।
export default function Profile(){}React Component বানাতে হলে অবশ্যই ফাংশনের নামের প্রথম অক্ষর Capital later এ লিখতে হবে,নাহলে তা কাজ করবেনা।
ফাংশনের ভিতরে মার্কাপ যুক্ত করা
ফাংশনের ভিতরে JSX (Javascript XML) সিনট্যাক্সে মার্কাপ রিটার্ন করতে হয়।
export default function Profile() {
return img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
}return Statement যদি এক লাইনের বেশি লিখতে হয় তাহলে () এর ভিতরে লিখতে হয়
উদাহরণঃ
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>
);
}কম্পোনেন্ট নেস্টিং করার ক্ষেত্রে যেসব রুলস মানতে হয়ঃ
Rules:1 - যদি এমন কম্পোনেন্ট হয়,যেটা খুব ছোট এবং রি-ইউজ হবেনা সেটা চাইলে একই ফাইলে লেখা যায়,এবং ব্যাবহার করা যায়। কিন্তু যদি কম্পোনেন্ট অনেক বড় হয় এবং interactivity বেশি হয়, এবং বিভিন্ন জায়গায় রি-ইউজ করতে হয় তাহলে আলাদা আলাদা ফাইলে কম্পোনেন্ট বানাতে হবে।
Rules:2 - একটা কম্পোনেন্ট এর ভিতর আরেকটা কম্পোনেন্টকে নেস্টেড করা যাবে,কিন্তু একটা কম্পোনেট এর ভিতর অন্য আরেকটা ফাংশন ডেফিনেশন নেস্টেড করা যাবেনা।