আপনার প্রথম কম্পোনেন্ট

কম্পোনেন্ট: UI বিল্ডিং ব্লক

ওয়েব-এ, HTML আমাদেরকে বিল্ট-ইন ট্যাগগুলোর মাধ্যমে সমৃদ্ধ কাঠামোবদ্ধ ডকুমেন্ট তৈরি করতে দেয়, যেমন <h1> এবং <li>:

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

এই মার্কআপটি এই প্রবন্ধটি <article>, এর শিরোনাম <h1>, এবং একটি (সংক্ষেপিত) বিষয়সূচী একটি ক্রম তালিকা <ol> হিসেবে উপস্থাপন করে। এই মার্কআপ, CSS-এর স্টাইল এবং JavaScript-এর ইন্টার‌্যাক্টিভিটি মিলিয়ে প্রতিটি UI উপাদানের পেছনে কাজ করে যা আপনি ওয়েবে দেখতে পান। React আপনাকে আপনার মার্কআপ, CSS, এবং JavaScript কাস্টম “কম্পোনেন্ট” হিসেবে একত্রিত করতে দেয়, আপনার অ্যাপের জন্য পুনঃব্যবহারযোগ্য UI উপাদান। উপরের বিষয়সূচীর কোডটি একটি <TableOfContents /> কম্পোনেন্টে পরিণত করা যেতে পারে যা আপনি প্রতিটি পৃষ্ঠায় রেন্ডার করতে পারেন। ভিতরে, এটি এখনও একই HTML ট্যাগগুলি ব্যবহার করে যেমন <article>, <h1>, ইত্যাদি।

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

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

যখন আপনার প্রকল্প বড় হয়, আপনি দেখবেন যে আপনার অনেক ডিজাইন আপনি ইতিমধ্যে লিখিত কম্পোনেন্ট পুনঃব্যবহার করে তৈরি করতে পারবেন, যা আপনার ডেভেলপমেন্টকে দ্রুততর করবে। আমাদের উপরের বিষয়সূচীটি <TableOfContents /> ব্যবহার করে যে কোনো স্ক্রিনে যুক্ত করা যেতে পারে! এমনকি React ওপেন সোর্স কমিউনিটির হাজারো কম্পোনেন্ট যেমন Chakra UI এবং Material UI. দিয়ে আপনার প্রকল্পটি দ্রুত শুরু করতে পারেন।

কম্পোনেন্টকে সংজ্ঞায়িত করা

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

Here’s the translation of the provided text into Bengali:

এবং এখানে একটি কম্পোনেন্ট তৈরির পদক্ষেপ রয়েছে:

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

export default প্রিফিক্সটি একটি মানক জাভাস্ক্রিপ্ট সিনট্যাক্স (যা React-এর জন্য বিশেষ নয়)। এটি আপনাকে একটি ফাইলে প্রধান ফাংশন চিহ্নিত করতে দেয় যাতে আপনি পরে এটি অন্য ফাইল থেকে আমদানি করতে পারেন। (কম্পোনেন্ট আমদানির বিষয়ে আরও জানুন কম্পোনেন্ট আমদানি এবং রপ্তানি!)

ধাপ ২: ফাংশনটি সংজ্ঞায়িত করুন

function Profile() { } দিয়ে আপনি Profile নামে একটি জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞায়িত করেন।

If you need any more translations or further assistance, just let me know!

Step 3: মার্কআপ যোগ করা

কম্পোনেন্টটি একটি <img /> ট্যাগ রিটার্ন করে যার src এবং alt অ্যাট্রিবিউট রয়েছে। <img /> এইচটিএমএল-এর মতো লেখা হয়, কিন্তু এটি আসলে পিছনে জাভাস্ক্রিপ্ট! এই সিনট্যাক্সকে JSX বলা হয়, এবং এটি আপনাকে জাভাস্ক্রিপ্টের মধ্যে মার্কআপ এম্বেড করতে দেয়।

রিটার্ন স্টেটমেন্টগুলি এই কম্পোনেন্টের মতো একটি লাইনে লেখা যেতে পারে:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

But if your markup isn’t all on the same line as the return keyword, you must wrap it in a pair of parentheses:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

কম্পোনেন্ট এর ব্যবহার

আপনি যখন Profile কম্পোনেন্টটি সংজ্ঞায়িত করেছেন, আপনি এটি অন্যান্য কম্পোনেন্টের ভিতরে নেস্ট করতে পারেন। উদাহরণস্বরূপ, আপনি একটি Gallery কম্পোনেন্ট এক্সপোর্ট করতে পারেন যা একাধিক Profile কম্পোনেন্ট ব্যবহার করে:

ব্রাউজার কী দেখে

লেটার কেসিং-এর পার্থক্য লক্ষ্য করুন:

• <section> ছোট হাতের অক্ষরে, তাই React জানে আমরা একটি HTML ট্যাগ উল্লেখ করছি।
• <Profile /> বড় হাতের P দিয়ে শুরু হয়েছে, তাই React জানে যে আমরা Profile নামের কম্পোনেন্টটি ব্যবহার করতে চাই। এবং Profile-এ আরও HTML রয়েছে: <img />। শেষ পর্যন্ত, ব্রাউজার এটিই দেখে:

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

কম্পোনেন্ট নেস্টিং এবং সংগঠিত করা

কম্পোনেন্টগুলি নিয়মিত জাভাস্ক্রিপ্ট ফাংশন, তাই আপনি একি ফাইলে একাধিক কম্পোনেন্ট রাখতে পারেন। যখন কম্পোনেন্টগুলি তুলনামূলকভাবে ছোট বা একে অপরের সাথে ঘনিষ্ঠভাবে সম্পর্কিত হয় তখন এটি সুবিধাজনক। যদি এই ফাইলটি ব্যস্ত হয়ে যায়, তবে আপনি সর্বদা Profile-কে একটি পৃথক ফাইলে স্থানান্তরিত করতে পারেন। আপনি শীঘ্রই ইম্পোর্ট পেজে এটি করতে শিখবেন।

যেহেতু Profile কম্পোনেন্টগুলি Gallery এর ভিতরে রেন্ডার হয়—এমনকি কয়েকবার!—আমরা বলতে পারি যে Gallery একটি প্যারেন্ট কম্পোনেন্ট, যা প্রতিটি Profile কে “চাইল্ড” হিসেবে রেন্ডার করছে। এটি React-এর একটি অংশ: আপনি একবার একটি কম্পোনেন্ট সংজ্ঞায়িত করতে পারেন, এবং তারপর এটি যতবার এবং যত স্থানে ইচ্ছা ব্যবহার করতে পারেন।

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}