কম্পোনেন্ট Import ও Export করা

কম্পোনেন্টের আসল জাদু হলো এদের পুনরায় ব্যবহার করার ক্ষমতা। তুমি একটি কম্পোনেন্টের ভেতরে আরও অনেক কম্পোনেন্ট দিয়ে সুন্দর UI তৈরি করতে পারো। কিন্তু যখন তোমার অ্যাপে অনেক কম্পোনেন্ট হয়ে যাবে, তখন সেগুলোকে আলাদা আলাদা ফাইলে ভাগ করে রাখাটা বুদ্ধিমানের কাজ। এতে তোমার কোড পড়া সহজ হবে এবং কম্পোনেন্টগুলো আরও বেশি জায়গায় ব্যবহার করা যাবে।

যা যা শিখবে এই লেখাতে

• রুট কম্পোনেন্ট ফাইল কী।
• কীভাবে কম্পোনেন্ট import ও export করতে হয়।
• কখন default এবং কখন named এক্সপোর্ট ও ইম্পোর্ট ব্যবহার করতে হয়।
• কীভাবে একটি ফাইল থেকে একাধিক কম্পোনেন্ট import ও export করতে হয়।
• কীভাবে কম্পোনেন্টগুলোকে একাধিক ফাইলে ভাগ করতে হয়।

রুট কম্পোনেন্ট ফাইল (The root component file)

আগের অধ্যায়ে আমরা একটি Profile কম্পোনেন্ট এবং একটি Gallery কম্পোনেন্ট তৈরি করেছিলাম, যারা একই ফাইলে ছিল। এই ফাইলটিকে আমরা রুট কম্পোনেন্ট ফাইল বলতে পারি, যা সাধারণত App.js নামে থাকে। এই রুট কম্পোনেন্ট থেকেই পুরো React অ্যাপটি শুরু হয়।

// এই কোডটি এখন App.js ফাইলে আছে
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>
  );
}

একটি কম্পোনেন্ট Export ও Import করা

এখন ধরো, তুমি তোমার অ্যাপের হোম পেজে বিজ্ঞানীদের ছবির বদলে বইয়ের তালিকা দেখাতে চাও। তাহলে Gallery এবং Profile কম্পোনেন্টগুলোকে রুট ফাইল থেকে বের করে অন্য ফাইলে নিয়ে যাওয়াটা ভালো আইডিয়া। এতে কোড আরও গোছানো এবং পুনরায় ব্যবহারযোগ্য হবে।

এই কাজটি তুমি তিনটি সহজ ধাপে করতে পারো:

1. তৈরি করা: কম্পোনেন্টগুলো রাখার জন্য একটি নতুন জাভাস্ক্রিপ্ট ফাইল তৈরি করো (যেমন: Gallery.js)।
2. Export করা: নতুন ফাইলটি থেকে তোমার কম্পোনেন্ট ফাংশনটি export করো।
3. Import করা: যে ফাইলে কম্পোনেন্টটি ব্যবহার করতে চাও, সেখানে import করো।

চলো, Gallery এবং Profile-কে App.js থেকে Gallery.js নামে একটি নতুন ফাইলে নিয়ে যাই।

import Gallery from "./Gallery.js";
 
export default function App() {
  return <Gallery />;
}

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

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

খেয়াল করো, এখন আমাদের কোড দুটো ফাইলে ভাগ হয়ে গেছে:

1. Gallery.js:

   • Profile কম্পোনেন্টটি ডিফাইন করা আছে, যা শুধু এই ফাইলের ভেতরেই ব্যবহৃত হচ্ছে।
   • Gallery কম্পোনেন্টটিকে default export করা হয়েছে।

2. App.js:

   • Gallery.js থেকে Gallery কম্পোনেন্টটিকে default import করা হয়েছে।
   • মূল App কম্পোনেন্টটিকে default export করা হয়েছে।

Default বনাম Named এক্সপোর্ট

জাভাস্ক্রিপ্টে export করার দুটো প্রধান উপায় আছে: default export এবং named export।

একটি ফাইলে সর্বোচ্চ একটিই default এক্সপোর্ট থাকতে পারে, কিন্তু যত খুশি তত named এক্সপোর্ট থাকতে পারে।

তুমি কীভাবে export করছো, তার উপর নির্ভর করে তোমাকে import করতে হবে। নিচের টেবিলটি খেয়াল করলে বিষয়টি পরিষ্কার হয়ে যাবে:

মূল পার্থক্য:

• Default import করার সময় তুমি যেকোনো নাম দিতে পারো (যেমন, import MyButton from './Button.js')।
• Named import করার সময় তোমাকে অবশ্যই {} ব্যবহার করতে হবে এবং নামটি হুবহু export করা নামের সাথে মিলতে হবে।

সাধারণত, যদি একটি ফাইল থেকে শুধু একটি কম্পোনেন্ট এক্সপোর্ট করার দরকার হয়, তখন default export ব্যবহার করা হয়। আর যদি একাধিক কম্পোনেন্ট বা ভ্যালু এক্সপোর্ট করতে হয়, তখন named export ব্যবহার করা হয়।

একই ফাইল থেকে একাধিক কম্পোনেন্ট Export ও Import করা

এখন যদি তুমি Gallery-এর বদলে শুধু একটি Profile দেখাতে চাও? তাহলে Profile কম্পোনেন্টটিকেও এক্সপোর্ট করতে হবে। যেহেতু Gallery.js ফাইলে ইতোমধ্যে একটি default এক্সপোর্ট আছে, তাই Profile-কে আমাদের named এক্সপোর্ট করতে হবে।

প্রথমে, Gallery.js থেকে Profile-কে named এক্সপোর্ট করি (এক্ষেত্রে default কীওয়ার্ডটি থাকবে না):

export function Profile() {
  // ...
}

এরপর, App.js-এ Profile-কে named ইম্পোর্ট করি (কার্লি ব্রেস {} ব্যবহার করে):

import { Profile } from "./Gallery.js";

এখন তুমি App.js-এ <Profile /> অথবা <Gallery /> যেকোনোটি রেন্ডার করতে পারো।

import Gallery from "./Gallery.js";
import { Profile } from "./Gallery.js";
 
export default function App() {
  return <Profile />;
}

export 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;
}

এখানে Gallery.js ফাইল থেকে Gallery (default) এবং Profile (named) দুটোই এক্সপোর্ট হচ্ছে, এবং App.js দুটোকেই ইম্পোর্ট করছে।

এই অধ্যায়ে তুমি যা যা শিখলে:

• রুট কম্পোনেন্ট ফাইল কী।
• কীভাবে একটি কম্পোনেন্ট import ও export করতে হয়।
• কখন এবং কীভাবে default ও named ইম্পোর্ট এবং এক্সপোর্ট ব্যবহার করতে হয়।
• কীভাবে একই ফাইল থেকে একাধিক কম্পোনেন্ট এক্সপোর্ট করতে হয়।

তোমার জন্য চ্যালেঞ্জ 🧗

কম্পোনেন্টগুলোকে আরও ভাগ করো

এখন Gallery.js ফাইলে Profile ও Gallery দুটোই আছে, যা কিছুটা কনফিউজিং।

তোমার কাজ হলো, Profile কম্পোনেন্টটিকে Profile.js নামে একটি নতুন ফাইলে নিয়ে যাওয়া। এরপর App.js ফাইলটিকে এমনভাবে পরিবর্তন করো যেন এটি <Profile /> এবং <Gallery /> দুটোকেই পাশাপাশি রেন্ডার করে।