React component import export system Bangla

প্রিয় বন্ধুরা, আজকের এই পোস্টে আমরা শিখব React component import export system. সবাই খুবই মনযোগ সহকারে যদি টিউটোরিয়ালটি পড়েন, তাহলে আশা করি React component import export system বুজতে পারবেন।

React এ component কে re-use করাই এর যাদু। একটা component এর মধ্যে আরেকটা component কে compose করা যায়। কিন্তু একটি component এর মধ্যে অনেকগুলো component ব্যবহার করলে এটি দেখতে readable ভালো হয়না, তাই component গুলো আলাদা আলাদা file এ করলে সহজে read করা যায়।

সূচিপত্রঃ React component import export system

• Root component file কোনটি
• একটা component কে কিভাবে import export করা যায় 
• কখন default & named import export ব্যবহার করব 
• একই ফাইল থেকে কিভাবে multiple component import export করতে হয়

Root Component file কোনটি?

App.jsx ফাইলের কোডঃ

export default function News(){

return (

<>

<h1>This is News component</h1>

<Heading/>

<Para/>

</>

)

}

function Heading(){

return <h1>Bangladesh vs Australia match</h1>

}

function Para(){

return <p>Paragraph text will be here</p>

আরো পড়ুনঃ How To Install React Js

এখানে App.jsx হলো root component file, তবে আপনার সেটাপ অনুযায়ী root component file অন্য কোন ফাইলও হতে পারে। এছাড়া আপনি যদি কোন framework ব্যবহার করেন, তাহলে root component প্রত্যেক পেজের জন্য আলাদা আলাদা হবে।

Component কে কিভাবে export import করবেন?

উপরে App.jsx ফাইলে যে data রয়েছে সেখানে যদি আপনি সে data show না করে অন্য data শো করতে চান অথবা ঐ data গুলো অন্য কোথাও use করতে চান। তাহলে আপনি ঐ component গুলো root component file এর বাহিরে নিয়ে যেতে হবে। তাহলে component গুলো আপনি re-use করতে পারবেন।

তিন step এ component কে অন্য file এ move করতে পারেন।

1. নতুন একটি jsx file খুলে ঐ file এ সব code রাখতে হবে

2. component function কে export করতে হবে 

3. যে file এ component ব্যবহার করব, সেখানে import করতে হবে

বিঃদ্রঃ import export ২ভাবে হয়

1. Named import export

2. Default import export

Named export example: export function Profile(){}

Named import example: import {Profile} অথ্যাৎ ব্র্যাকেটের মধ্যে export কৃত component এর নাম থাকবে।

এখন News.jsx নামে একটা file তৈরী করব। App.jsx থেকে সকল কোড News.jsx এ নিয়ে আসব। তাহলে এরকম হবে।

News.jsx

export default function News(){

return (

<>

<h1>This is News component</h1>

<Heading/>

<Para/>

</>

)

}

function Heading(){

return <h1>Bangladesh vs Australia match</h1>

}

function Para(){

return <p>Paragraph text will be here</p>

}

News.jsx file এ একটি component কে export default করা হয়েছে।

এখন App.jsx ফাইলে News.jsx এ export করা component কে import করতে হবে।

App.jsx

import News from './News';

export default App(){

return (

<>

<News/>

</>

)

}

একই file থেকে multiple component import exportঃ

একই file থেকে যতগুলো component export করতে চাই, সবগুলো component এর আগে export লিখতে হবে। একটি file এর মধ্যে একটি component কে অবশ্যই export  default করতে হবে, বাকি component গুলো শুধু export করতে হবে। যেমনঃ 

News.jsx

export default function News() {

  return (

    <>

      <Heading />

      <Para />

    </>

  );

}

export function Heading() {

  return <h1>Bangladesh vs australia match</h1>;

}

function Para() {

  return <p>Bangladesh vs australia match will be held on 27 march 2024</p>;

}

এরপর App.jsx এ যে যে কম্পোনেন্ট ব্যবহার করব সেগুলো ইমপোর্ট করব।

App.jsx

import News, { Heading } from "./News";

function App() {

  return (

    <>

      <News />

      <Heading/>

    </>

  );

export default App;

এতক্ষণ পর্যন্ত আমরা React component import export system সম্পর্কে বিস্তারিত আলোচনা করেছি। কোন কিছু বুজতে সমস্যা হলে আমাদেরকে কমেন্টে জানাতে পারেন। ধন্যবাদ সবাইকে।