React এর হাতেখড়ি (পর্ব ৩) — Component পরিচিতি শিখুন

আগের পর্বে আমরা JSX শিখেছিলাম। এই পর্বে আমরা দেখব React-এর সবচেয়ে মৌলিক ধারণা — Component। এখন পর্যন্ত আমরা যা লিখেছি, সবই আসলে component-ই ছিল (App ফাংশন) — এই পর্বে সেটা আরও গভীরভাবে বুঝব আর একাধিক component মিলিয়ে কাজ করার পদ্ধতি দেখব।

Component কী?

Component হলো একটা স্বাধীন, পুনর্ব্যবহারযোগ্য UI-এর টুকরো। React-এ একটা Functional Component আসলে একটা সাধারণ JavaScript ফাংশন, যেটা JSX রিটার্ন করে।

function Greeting() {
  return <h1>স্বাগতম!</h1>;
}

এটাই একটা সম্পূর্ণ, বৈধ React Component। কোনো জটিল সিনট্যাক্স না — শুধু একটা ফাংশন যেটা JSX রিটার্ন করে।

নিয়ম	ব্যাখ্যা
নাম বড় হাতের অক্ষর দিয়ে শুরু	Greeting ✅, greeting ❌ (React এটাকে সাধারণ HTML ট্যাগ ভাববে)
JSX রিটার্ন করতে হয়	অথবা null
একটা মূল এলিমেন্ট	আগের পর্বের নিয়ম — একটা রুট বা Fragment

Component ব্যবহার করা

একটা component বানানোর পর সেটা JSX-এ HTML ট্যাগের মতোই ব্যবহার করা যায়:

function Greeting() {
  return <h1>স্বাগতম!</h1>;
}

function App() {
  return (
    <div>
      <Greeting />
      <p>এটা আমার প্রথম React অ্যাপ</p>
    </div>
  );
}

এখানে <Greeting /> মূলত Greeting() ফাংশন কল করছে আর তার রিটার্ন করা JSX সেই জায়গায় বসিয়ে দিচ্ছে। এভাবেই ছোট ছোট component মিলিয়ে বড় UI বানানো হয়।

একাধিকবার একই Component ব্যবহার করা

Component-এর সবচেয়ে বড় শক্তি হলো পুনর্ব্যবহারযোগ্যতা — একবার লিখে যতবার ইচ্ছা ব্যবহার করা যায়, ঠিক HTML ট্যাগের মতোই।

function BookCard() {
  return (
    <div className="book-card">
      <h3>সোনার তরী</h3>
      <p>রবীন্দ্রনাথ ঠাকুর</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <BookCard />
      <BookCard />
      <BookCard />
    </div>
  );
}
// তিনটা একই রকম বইয়ের কার্ড দেখাবে

এখন প্রতিটা কার্ড একই বই দেখাচ্ছে — পরের পর্বে (Props) আমরা শিখব কীভাবে প্রতিটা কার্ডে ভিন্ন ভিন্ন বইয়ের তথ্য পাঠানো যায়, যাতে সত্যিকারের পুনর্ব্যবহারযোগ্যতা পাওয়া যায়।

Component-এর ভেতরে Component (Nesting)

Component-গুলো একে অপরের ভেতরে বাসা বাঁধতে পারে — একটা বড় UI-কে ছোট ছোট, লজিক্যাল অংশে ভাগ করার এটাই মূল কৌশল।

function Header() {
  return (
    <header>
      <h1>ArifStack</h1>
      <Nav />
    </header>
  );
}

function Nav() {
  return (
    <nav>
      <a href="/">হোম</a>
      <a href="/about">আমাদের সম্পর্কে</a>
    </nav>
  );
}

function Footer() {
  return <footer>© ২০২৬ ArifStack</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <main>মূল কন্টেন্ট এখানে</main>
      <Footer />
    </div>
  );
}

এখানে App একটা "প্যারেন্ট" component, যার ভেতরে Header, Footer "চাইল্ড" component হিসেবে ব্যবহার হচ্ছে — আবার Header-এর ভেতরেও Nav নেস্ট করা। এই হায়ারার্কিটাই একটা "Component Tree" গঠন করে।

লাইভ ডেমো — একাধিক Component মিলিয়ে UI

নিচে তিনটা আলাদা component (Header, StatCard, আর App) মিলিয়ে একটা ছোট ড্যাশবোর্ড বানানো হয়েছে — StatCard দুইবার ব্যবহার হচ্ছে।

এখানে StatCard একই কোড দিয়ে দুইবার ব্যবহার হয়েছে — এটাই পুনর্ব্যবহারযোগ্যতার শক্তি।

প্রতিটা Component আলাদা ফাইলে

Advanced JS সিরিজে শেখা import/export এখানেও কাজে লাগে — বাস্তব প্রজেক্টে প্রতিটা component সাধারণত নিজের আলাদা .jsx ফাইলে থাকে।

// src/components/Header.jsx
function Header() {
  return <header><h1>ArifStack</h1></header>;
}

export default Header;

// src/components/Footer.jsx
function Footer() {
  return <footer>© ২০২৬ ArifStack</footer>;
}

export default Footer;

// src/App.jsx
import Header from "./components/Header.jsx";
import Footer from "./components/Footer.jsx";

function App() {
  return (
    <div>
      <Header />
      <main>মূল কন্টেন্ট</main>
      <Footer />
    </div>
  );
}

export default App;

এভাবে প্রতিটা component আলাদা ফাইলে থাকায় — কোড খুঁজে পাওয়া সহজ হয়, একাধিক ডেভেলপার একসাথে কাজ করতে পারে (একজন Header, আরেকজন Footer নিয়ে কাজ করলে গিট কনফ্লিক্ট কম হয়), আর প্রতিটা ফাইল ছোট, বোধগম্য থাকে।

Component-এর ভেতরে সাধারণ JavaScript লজিক

যেহেতু একটা component আসলে একটা ফাংশন, তার ভেতরে return-এর আগে যেকোনো সাধারণ JavaScript লেখা যায় — ভ্যারিয়েবল বানানো, গণনা করা, ফাংশন কল করা।

function BookStats() {
  // এই সব সাধারণ JavaScript — Advanced JS সিরিজে যা শেখা হয়েছে সবই ব্যবহার করা যায়
  const totalPosts = 38;
  const advancedPosts = 26;
  const total = totalPosts + advancedPosts;
  const percentage = ((advancedPosts / total) * 100).toFixed(1);

  return (
    <div>
      <p>মোট পোস্ট: {total}</p>
      <p>এডভান্সড পোস্টের হার: {percentage}%</p>
    </div>
  );
}

নিজে চেষ্টা করো

Exercise:

1. একটা Card component বানাও যেটা একটা শিরোনাম আর বর্ণনা দেখায়, তারপর App-এ তিনবার ব্যবহার করো।
2. উপরের Header/Nav/Footer স্ট্রাকচারটা নিজের Vite প্রজেক্টে বানাও, প্রতিটা আলাদা ফাইলে রেখে import/export দিয়ে সংযুক্ত করো।
3. একটা component-এর ভেতরে সাধারণ JavaScript ভ্যারিয়েবল আর গণনা ব্যবহার করে দেখাও (যেমন উপরের BookStats-এর মতো)।
4. ভেবে দেখো — যদি তুমি ArifStack ব্লগের হোমপেজ React দিয়ে বানাতে, কোন কোন Component-এ ভাগ করতে (Header, PostList, PostCard, Footer ইত্যাদি)?

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব Props — কীভাবে প্যারেন্ট component থেকে চাইল্ড component-এ ডেটা পাঠানো যায়, যাতে BookCard-এর মতো component প্রতিবার ভিন্ন ভিন্ন তথ্য দেখাতে পারে।