রিয়াক্টে কিভাবে import & export করতে হয়?

রিয়াক্টে কম্পোনেন্ট ব্যবহারের জন্য আমাদের import এবং export এর মাধ্যমে কোডকে সংগঠিত করতে হয়। এটি আমাদের বিভিন্ন ফাইল থেকে কোড পুনঃব্যবহার করতে সহায়তা করে এবং আমাদের অ্যাপ্লিকেশনকে আরও পরিষ্কার ও পরিচালনাযোগ্য করে।

কম্পোনেন্ট import & export এর দুইটি পদ্ধতি:

1. default export and import
2. named export and import

default export and import

default export

default export এক ধরনের একক এক্সপোর্ট, যা একটি ফাইল থেকে একটি মাত্র কম্পোনেন্টকে রপ্তানি করে। এই পদ্ধতি ব্যবহার করে আমরা সহজেই একটি কম্পোনেন্টকে অন্য ফাইলে নিয়ে যেতে পারি।

উদাহরণ:

export default function Gallery() {
  return (
    <div>
      <h1>Welcome to the Gallery</h1>
      <p>Here are some amazing pictures.</p>
    </div>
  );
}

এই ক্ষেত্রে, Gallery কম্পোনেন্টটি ডিফল্ট হিসেবে এক্সপোর্ট করা হয়েছে।

অন্যভাবে default export:

function Gallery() {
  return (
    <div>
      <h1>Welcome to the Gallery</h1>
      <p>Here are some amazing pictures.</p>
    </div>
  );
}
export default Gallery;

এখানে, আমরা প্রথমে Gallery ফাংশন ডিফাইন করেছি এবং পরে এটি export default দিয়ে এক্সপোর্ট করেছি।

default import

import Gallery from "./Gallery"; // .js বা .jsx না লিখলেও হবে

এখানে উল্লেখযোগ্য বিষয়:

• default import এর ক্ষেত্রে আমরা যে নামেই import করি না কেন, তা কম্পোনেন্টের নাম হিসাবে ব্যবহৃত হবে। যেমন:

import MyGallery from "./Gallery"; // এটি বৈধ

এখন আমরা MyGallery নামে Gallery কম্পোনেন্ট ব্যবহার করতে পারব।

named export and import

named export আমাদের একটি ফাইল থেকে একাধিক কম্পোনেন্ট এক্সপোর্ট করার অনুমতি দেয়।

named export

উদাহরণ:

export function Card() {
  return (
    <div>
      <h2>This is a Card Component</h2>
    </div>
  );
}
 
export function Image() {
  return (
    <div>
      <h2>This is an Image Component</h2>
    </div>
  );
}
 
export function Profile() {
  return (
    <div>
      <h2>This is a Profile Component</h2>
    </div>
  );
}

এখানে, আমরা Gallery ফাইল থেকে তিনটি ভিন্ন কম্পোনেন্ট Card, Image, এবং Profile এক্সপোর্ট করেছি।

named import

import { Card, Image, Profile } from "./Gallery"; // একাধিক কম্পোনেন্ট এক লাইনে ইম্পোর্ট

এখন আমরা Card, Image, এবং Profile কম্পোনেন্টগুলো ব্যবহার করতে পারি।

Alias Named Import

named import এর মাধ্যমে আমরা কম্পোনেন্টগুলোকে আলিয়াস (alias) দিয়ে নতুন নামেও ইম্পোর্ট করতে পারি। এতে নাম পরিবর্তন করা যায় এবং কোড আরও পরিষ্কার হয়।

import { Card as ImageCard, Profile as UserProfile } from "./Gallery";
 
// Now you can use ImageCard and UserProfile instead of Card and Profile

এখন ImageCard এবং UserProfile নামে কম্পোনেন্টগুলো ব্যবহার করতে পারবো।

উপসংহার

import এবং export এর এই দুই পদ্ধতি রিয়াক্ট অ্যাপ্লিকেশনে কোডের পুনঃব্যবহার এবং সংগঠনকে সহজ করে। default export সাধারণত একটি কম্পোনেন্টের জন্য ব্যবহৃত হয়, যেখানে named export একাধিক কম্পোনেন্ট একসাথে এক্সপোর্ট করতে সক্ষম করে। এই ধারনাগুলো বুঝে নিয়ে, আপনার অ্যাপ্লিকেশনকে আরও কার্যকরী ও সুসংগঠিতভাবে তৈরি করা সম্ভব হবে।

অতিরিক্ত উদাহরণ: অ্যাপ্লিকেশন তৈরি

চলুন আমরা একটি সহজ অ্যাপ্লিকেশন তৈরি করি যেখানে আমরা বিভিন্ন কম্পোনেন্ট ইম্পোর্ট করবো।

App.js

import { Card, Image, Profile } from "./Gallery";
 
function App() {
  return (
    <div>
      <h1>Welcome to the Science Gallery</h1>
      <Card />
      <Image />
      <Profile />
    </div>
  );
}
 
export default App;

Gallery.js

export function Card() {
  return (
    <div>
      <h2>This is a Card Component</h2>
    </div>
  );
}
 
export function Image() {
  return (
    <div>
      <h2>This is an Image Component</h2>
    </div>
  );
}
 
export function Profile() {
  return (
    <div>
      <h2>This is a Profile Component</h2>
    </div>
  );
}

এখন, App.js ফাইলে Card, Image, এবং Profile কম্পোনেন্টগুলো ব্যবহার করে একটি সিম্পল UI তৈরি করা হয়েছে।