translate: exporting and importing a component section

Author: KhanShaheb34

src/content/learn/importing-and-exporting-components.md

@@ -54,15 +54,16 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 এই উদাহরণ টি বর্তমানে রয়েছে **রুট কম্পোনেন্ট ফাইলে**, যার নাম `App.js`। [Create React App](https://create-react-app.dev/) এ আপনার অ্যাপ্লিকেশন টি `src/App.js` ফাইলে থাকে। যদিও আপনার সেটআপ এর উপর নির্ভর করে আপনার রুট কম্পোনেন্ট অন্য ফাইলেও থাকতে পারে। যদি আপনি ফাইল ভিত্তিক রাউটিং সহ কোন ফ্রেমওয়ার্ক ব্যবহার করেন, যেমন Next.js, তাহলে প্রতিটি পৃষ্ঠার জন্য আপনার রুট কম্পোনেন্ট ভিন্ন হবে।
 
-## Exporting and importing a component {/*exporting-and-importing-a-component*/}
+## কম্পোনেন্ট ইম্পোর্ট এবং এক্সপোর্ট করা {/*exporting-and-importing-a-component*/}
 
-What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
+আমরা যদি ল্যান্ডিং পেজ টা চেঞ্জ করে এখানে কিছু বিজ্ঞান বই এর তালিকা দেখাতে চাই বা সব প্রোফাইল কে অন্য কোথাও দেখাতে চাই তাহলে আমাদের রুট কম্পোনেন্ট ফাইল থেকে `Gallery` এবং `Profile` কে বের করে নেওয়া উচিত। এটি করলে আপনি এদের অন্য ফাইলে ব্যবহার করতে পারবেন। কম্পোনেন্ট কে একটি ফাইল থেকে অন্য ফাইলে নিয়ে যেতে আপনাকে তিনটি ধাপ অনুসরণ করতে হবেঃ
 
-1. **Make** a new JS file to put the components in.
-2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
-3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
+১. কম্পোনেন্ট গুলো রাখার জন্য একটি নতুন জাভাস্ক্রিপ্ট ফাইল **তৈরি** করুন।
+২. আপনার ফাংশন কম্পোনেন্ট কে এই নতুন ফাইল থেকে **এক্সপোর্ট** করুন। ([ডিফল্ট](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) অথবা [নেমড](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) এক্সপোর্ট ব্যবহার করে)
+৩. কম্পোনেন্ট টা ব্যবহার করার জন্য পূর্বের ফাইল থেকে এটি **ইম্পোর্ট** করুন। (যথাযত ইম্পোর্ট টেকনিক, [ডিফল্ট](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) অথবা [নেমড](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module), ব্যাবহার করে)
 
-Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:
+
+এখানে `Profile` এবং `Gallery` দুটি কম্পোনেন্ট কে `App.js` থেকে নতুন ফাইল `Gallery.js` এ নিয়ে আসা হয়েছে। এখন আপনি `Gallery.js` ফাইল থেকে `App.js` ফাইলে `Gallery` কে ইম্পোর্ট করতে পারবেনঃ
 
 <Sandpack>
 
@@ -104,46 +105,49 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Notice how this example is broken down into two component files now:
 
-1. `Gallery.js`:
-     - Defines the `Profile` component which is only used within the same file and is not exported.
-     - Exports the `Gallery` component as a **default export.**
-2. `App.js`:
-     - Imports `Gallery` as a **default import** from `Gallery.js`.
-     - Exports the root `App` component as a **default export.**
+খেয়াল করুন এই উদাহরণটি এখন দুটি কম্পোনেন্ট ফাইলে ভাগ করা হয়েছেঃ
+
+- `Gallery.js`:
+     - এখানে `Profile` কম্পোনেন্ট একটি ফাংশন যা একই ফাইলের মধ্যে ব্যবহার করা হয় এবং এটি এক্সপোর্ট করা হয় নি।
+     - `Gallery` কম্পোনেন্টটি **ডিফল্ট এক্সপোর্ট** হিসেবে এক্সপোর্ট করা হয়েছে।
+     
+- `App.js`:
+     - `Gallery` কম্পোনেন্টটি **ডিফল্ট ইম্পোর্ট** হিসেবে `Gallery.js` থেকে ইম্পোর্ট করা হয়েছে।
+     - রুট `App` কম্পোনেন্টটি **ডিফল্ট এক্সপোর্ট** হিসেবে এক্সপোর্ট করা হয়েছে।
 
 
 <Note>
 
-You may encounter files that leave off the `.js` file extension like so:
+হয়তো আপনি এমন ইম্পোর্ট দেখেছেন যেখানে `.js` ফাইল এক্সটেনশন ব্যবহার করা হয় নি যেমনঃ
+
 
 ```js 
 import Gallery from './Gallery';
 ```
 
-Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
+React এ `'./Gallery.js'` অথবা `'./Gallery'` দুটিই কাজ করবে, তবে প্রথম টি হলো [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) এর কাছাকাছি।
 
 </Note>
 
 <DeepDive>
 
-#### Default vs named exports {/*default-vs-named-exports*/}
+#### ডিফল্ট বনাম নেমড এক্সপোর্ট {/*default-vs-named-exports*/}
 
-There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
+দুটি প্রাথমিক উপায়ে জাভাস্ক্রিপ্টে ভ্যালু এক্সপোর্ট করা যায়ঃ ডিফল্ট এক্সপোর্ট এবং নেমড এক্সপোর্ট। এখন পর্যন্ত আমাদের উদাহরণগুলোতে শুধুমাত্র ডিফল্ট এক্সপোর্ট ব্যবহার করা হয়েছে। তবে আপনি একই ফাইলে একটি বা দুটোই ব্যবহার করতে পারেন। **একটি ফাইলে একাধিক _ডিফল্ট_ এক্সপোর্ট থাকতে পারে না, তবে একটি ফাইলে যত খুশি _নেমড_ এক্সপোর্ট থাকতে পারে।**
 
-![Default and named exports](/images/docs/illustrations/i_import-export.svg)
+![ডিফল্ট বনাম নেমড এক্সপোর্ট](/images/docs/illustrations/i_import-export.svg)
 
-How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
+যেভাবে আপনি কম্পোনেন্ট এক্সপোর্ট করবেন তার উপর নির্ভর করে আপনাকে কম্পোনেন্টটি ইম্পোর্ট করতে হবে। আপনি যদি একটি ডিফল্ট এক্সপোর্ট কে ইম্পোর্ট করার জন্য নেমড এক্সপোর্ট এর মত করে কোড লিখেন তাহলে আপনি একটি এরর পাবেন। এই চার্ট আপনাকে সহজে সাহায্য করতে পারবেঃ
 
-| Syntax           | Export statement                           | Import statement                          |
+| Syntax           | এক্সপোর্ট স্টেটমেন্ট                           | ইম্পোর্ট স্টেটমেন্ট                          |
 | -----------      | -----------                                | -----------                               |
-| Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
-| Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
+| ডিফল্ট  | `export default function Button() {}` | `import Button from './Button.js';`     |
+| নেমড    | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
-When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
+যখন আপনি একটি _ডিফল্ট_ ইম্পোর্ট করবেন তখন `import` এর পরে যেকোনো নাম ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি `import Banana from './Button.js'` লিখতে পারেন এবং এটি আপনাকে একই ডিফল্ট এক্সপোর্ট দেবে। তবে নেমড ইম্পোর্ট এর ক্ষেত্রে নামটি উভয় ফাইল এ মিলতে হবে। এই কারণেই এদেরকে _নেমড_ ইম্পোর্ট বলা হয়েছে।
 
-**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
+**সাধারণত একটি ফাইল থেকে একটি কম্পোনেন্ট এক্সপোর্ট করতে ডিফল্ট এক্সপোর্ট এবং একাধিক কম্পোনেন্ট এবং ভ্যালু এক্সপোর্ট করতে নেমড এক্সপোর্ট ব্যবহৃত হয়।** আপনি যে কোনো কোডিং স্টাইল ব্যবহার করুন তবে সবসময় আপনার কম্পোনেন্ট ফাংশন এবং তাদের ফাইল এর নামগুলো তাদের কাজ সম্পর্কিত ভালো নাম দিন। নাম ছাড়া কম্পোনেন্ট, যেমন `export default () => {}`, ব্যবহার করতে নিরুৎসাহিত করা হয় কারণ এদের ডিবাগিং করা কঠিন।
 
 </DeepDive>