তোমার প্রথম কম্পোনেন্টটি বানাও

কম্পোনেন্ট (Component) হলো React-এর সবচেয়ে গুরুত্বপূর্ণ জিনিসগুলোর একটা। তুমি যে সুন্দর সুন্দর ইউজার ইন্টারফেস (UI) বানাবে, তার ভিত্তিই হলো এই কম্পোনেন্ট। তাই, চলো এই দারুণ জিনিসটা দিয়েই আমাদের React-এর যাত্রা শুরু করা যাক!

তুমি কি কি শিখবে

• কম্পোনেন্ট জিনিসটা আসলে কী।
• একটা React অ্যাপে কম্পোনেন্টের ভূমিকা কী।
• কীভাবে তোমার নিজের প্রথম React কম্পোনেন্ট লিখবে।

কম্পোনেন্ট: UI তৈরির বিল্ডিং ব্লক 🧱

ওয়েবে আমরা <h1> বা <li>-এর মতো HTML ট্যাগ দিয়ে সুন্দর স্ট্রাকচার তৈরি করি। যেমন, এই মার্কআপটি একটি আর্টিকেলের হেডিং এবং সূচিপত্র দেখাচ্ছে:

<article>
  <h1>আমার প্রথম কম্পোনেন্ট</h1>
  <ol>
    <li>কম্পোনেন্ট: UI বিল্ডিং ব্লক</li>
    <li>কম্পোনেন্ট তৈরি করা</li>
    <li>কম্পোনেন্ট ব্যবহার করা</li>
  </ol>
</article>

React তোমাকে এই মার্কআপ, CSS, এবং JavaScript-কে একসাথে মিলিয়ে কাস্টম "কম্পোনেন্ট" বানানোর সুযোগ দেয়, যা তোমার অ্যাপের জন্য পুনরায় ব্যবহারযোগ্য (reusable) UI উপাদান হিসেবে কাজ করে। উপরের সূচিপত্রের কোডটিকে তুমি একটা <TableOfContents /> কম্পোনেন্টে পরিণত করতে পারো, যা যেকোনো পেজে ব্যবহার করা যাবে।

HTML ট্যাগের মতোই, তুমি কম্পোনেন্টগুলোকে একসাথে সাজিয়ে, নেস্ট করে পুরো একটা পেজ ডিজাইন করতে পারো। যেমন, এই ডকুমেন্টেশন পেজটি নিজেই অনেকগুলো React কম্পোনেন্ট দিয়ে তৈরি:

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

প্রজেক্ট বড় হওয়ার সাথে সাথে তুমি দেখবে যে, আগে বানানো কম্পোনেন্টগুলো ব্যবহার করেই অনেক নতুন ডিজাইন তৈরি করা যাচ্ছে, যা তোমার ডেভেলপমেন্টের গতি অনেক বাড়িয়ে দেবে। এমনকি তুমি চাইলে Chakra UI (opens in a new tab) বা Material UI (opens in a new tab)-এর মতো ওপেন সোর্স কমিউনিটির বানানো হাজারো কম্পোনেন্ট ব্যবহার করে তোমার প্রজেক্ট শুরু করতে পারো।

একটি কম্পোনেন্ট তৈরি করা

React-এ একটি কম্পোনেন্ট হলো একটি জাভাস্ক্রিপ্ট ফাংশন, যার মধ্যে তুমি মার্কআপ যোগ করতে পারো। চলো, একটি কম্পোনেন্ট বানানোর ধাপগুলো দেখে নিই:

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

img {
  height: 200px;
}

ধাপ ১: কম্পোনেন্ট Export করা

export default একটি স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট সিনট্যাক্স। এটা দিয়ে তুমি একটি ফাইলের প্রধান ফাংশনটিকে চিহ্নিত করো, যাতে অন্য ফাইল থেকে সেটাকে import করা যায়।

ধাপ ২: ফাংশনটি ডিফাইন করা

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

⚠️ জরুরি কথা: React কম্পোনেন্টগুলো সাধারণ জাভাস্ক্রিপ্ট ফাংশনই, কিন্তু এদের নাম অবশ্যই বড় হাতের অক্ষর দিয়ে শুরু হতে হবে, নাহলে কাজ করবে না!

ধাপ ৩: মার্কআপ যোগ করা

এই কম্পোনেন্টটি একটি <img /> ট্যাগ রিটার্ন করছে। দেখতে HTML-এর মতো হলেও, পর্দার আড়ালে এটা আসলে জাভাস্ক্রিপ্ট! এই সিনট্যাক্সকে বলে JSX (opens in a new tab), যা তোমাকে জাভাস্ক্রিপ্টের ভেতরে মার্কআপ লেখার সুযোগ দেয়।

যদি তোমার মার্কআপ return কীওয়ার্ডের সাথে একই লাইনে না থাকে, তবে তোমাকে অবশ্যই একটি প্রথম বন্ধনীর ( ) মধ্যে র‍্যাপ করতে হবে।

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

🛑 বন্ধনী ছাড়া return-এর পরের লাইনের কোড জাভাস্ক্রিপ্ট উপেক্ষা করবে এবং তোমার অ্যাপে বাগ তৈরি করবে!

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

এখন তুমি তোমার Profile কম্পোনেন্টটিকে অন্য কম্পোনেন্টের ভেতরে বসাতে বা নেস্ট করতে পারো। যেমন, তুমি একটি Gallery কম্পোনেন্ট বানাতে পারো, যা একাধিক Profile কম্পোনেন্ট ব্যবহার করবে:

function Profile() {
  return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
}
 
export default function Gallery() {
  return (
    <section>
      <h1>অসাধারণ বিজ্ঞানীরা</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

img {
  margin: 0 10px 10px 0;
  height: 90px;
}

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

এখানে নামের বড়-ছোট হাতের अक्षরের পার্থক্যটা খেয়াল করো:

• section ছোট হাতের, তাই React বোঝে এটা একটা HTML ট্যাগ।
• Profile /> বড় হাতের P দিয়ে শুরু, তাই React বোঝে এটা আমাদের বানানো Profile কম্পোনেন্ট।

শেষ পর্যন্ত ব্রাউজার এই HTML কোডটি দেখতে পায়:

<section>
  <h1>অসাধারণ বিজ্ঞানীরা</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>

Gallery কম্পোনেন্টটি এখানে প্যারেন্ট কম্পোনেন্ট এবং প্রত্যেকটি Profile হলো তার চাইল্ড কম্পোনেন্ট। এটাই React-এর জাদু: তুমি একটি কম্পোনেন্ট একবার বানিয়ে যত খুশি ততবার, যত জায়গায় ইচ্ছা ব্যবহার করতে পারো।

🛑 কখনোই একটি কম্পোনেন্টের ভেতরে আরেকটি কম্পোনেন্টের ডেফিনিশন লিখবে না:

export default function Gallery() {
  // 🔴 এভাবে এক কম্পোনেন্টের ভেতরে আরেকটা ডিফাইন করা যাবে না!
  function Profile() {
    // ...
  }
  // ...
}

এই কাজটি অ্যাপকে অনেক স্লো করে দেয় এবং বাগ তৈরি করে। সবসময় প্রত্যেকটি কম্পোনেন্টকে টপ-লেভেলে, অর্থাৎ আলাদাভাবে ডিফাইন করবে।

দারুণ! তুমি React-এর সাথে তোমার প্রথম পরিচয় পর্ব শেষ করলে। চলো, মূল বিষয়গুলো আরেকবার ঝালিয়ে নিই:

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

চলো, এবার কয়েকটি চ্যালেঞ্জ নেওয়া যাক! 🧠

এতক্ষণ যা শিখলে, এবার সেগুলোকে একটু পরীক্ষা করার পালা। নিচের সমস্যাগুলো সমাধান করার চেষ্টা করো।

১. কম্পোনেন্টটি এক্সপোর্ট করো

এই কোডটি কাজ করছে না, কারণ মূল কম্পোনেন্টটি এক্সপোর্ট করা হয়নি। তুমি কি এটা ঠিক করতে পারবে?

function Profile() {
  return <img src="https://i.imgur.com/lICfvbD.jpg" alt="Aklilu Lemma" />;
}

img {
  height: 181px;
}

২. return স্টেটমেন্টটি ঠিক করো

এই return স্টেটমেন্টে কিছু একটা গড়বড় আছে। তুমি কি এটা ঠিক করতে পারবে?

কোডটি ঠিক করতে গিয়ে তুমি "Unexpected token" এরর পেতে পারো। খেয়াল রাখবে, সেমিকোলন (;) যেন বন্ধনীর () পরে বসে।

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

img {
  height: 180px;
}

৩. ভুলটি খুঁজে বের করো

এই Profile কম্পোনেন্টটি যেভাবে তৈরি এবং ব্যবহার করা হয়েছে, তাতে একটা ভুল আছে। ভুলটা কি ধরতে পারছো? (একটু মনে করার চেষ্টা করো, React কীভাবে সাধারণ HTML ট্যাগ আর কম্পোনেন্টের মধ্যে পার্থক্য করে!)

function profile() {
  return <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" />;
}
 
export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <profile />
      <profile />
      <profile />
    </section>
  );
}

img {
  margin: 0 10px 10px 0;
  height: 90px;
}

৪. তোমার নিজের কম্পোনেন্ট

এবার একদম প্রথম থেকে নিজে একটি কম্পোনেন্ট লেখো। তুমি যেকোনো বৈধ নাম দিতে পারো এবং যেকোনো মার্কআপ রিটার্ন করতে পারো। যদি কোনো আইডিয়া না পাও, তাহলে Congratulations নামে একটি কম্পোনেন্ট বানিয়ে <h1>দারুণ হয়েছে!</h1> দেখাতে পারো। এক্সপোর্ট করতে কিন্তু ভুলো না!

// তোমার কম্পোনেন্টটি নিচে লেখো!