Merge pull request #391 from nafasebra/main

Translate 'importing and exporting components' to Farsi

Author: rezvani2647

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

@@ -4,23 +4,23 @@ title: Importing and Exporting Components
 
 <Intro>
 
-The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.
+کاربرد اصلی کامپوننت ها, قابلیت استفاده مجدد آنهاست: شما میتوانید کامپوننت هایی بسازید که متشکل از کامپوننت های دیگر هستند ولی درگل بهتر است که هربخشی را تبدیل به کامپوننت کنید چون اسکن کردن آنها توسط اجرا کننده آسان تر است.
 
 </Intro>
 
 <YouWillLearn>
 
-* What a root component file is
-* How to import and export a component
-* When to use default and named imports and exports
-* How to import and export multiple components from one file
-* How to split components into multiple files
+* کامپوننت ریشه (root) چیست
+* چگونه کامپوننتی را ایمپورت یا اکسپورت (import - export) کنیم
+* از دستور default استفاده کنم
+* چگونه چندین کامپوننت که داخل یک فایل هستند را export کنم.
+* چگونه در چندین فایل کامپوننت هارا تقسیم کنم
 
 </YouWillLearn>
 
-## The root component file {/*the-root-component-file*/}
+## فایل کامپوننت اصلی {/*the-root-component-file*/}
 
-In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
+در بخش [Your First Component](/learn/your-first-component), شما یک `Profile` کامپوننت ساختید و یک کامپوننت `Gallery` داخل آن رندر میشود:
 
 <Sandpack>
 
@@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-These currently live in a **root component file,** named `App.js` in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
+در این مثال, کامپوننت ریشه فایل `App.js` است. ممکن است این فایل در پروژه های مختلفی مانند NextJS متفاوت است
 
-## 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).
+1. یک فایل جاوااسکریپتی **بسازید** و تبدیل به یک کامپوننت کنید
+2. در آن فایل, کامپوننت های خود را اکسپورت کنید (از  [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) یا  [name export](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) کنید).
+3. همان کامپوننت را در هر فایلی که میخواهید از آن استفاده کنید ایمپورت کنید (استفاده از تکنیک ایمپورت [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) یا [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
 
-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`, بجای `Gallery` نام آن را به `Gallery.js` تغییر دهید
 
 <Sandpack>
 
@@ -104,82 +104,82 @@ 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.**
+     - کامپوننت `Profile` را صرفا تعریف کرده و آن را اکسپورت نکرده
+     - از کامپوننت `Gallery` به عنوان **default export.** اکسپورت گرفته
 2. `App.js`:
-     - Imports `Gallery` as a **default import** from `Gallery.js`.
-     - Exports the root `App` component as a **default export.**
+     - کامپوننت `Gallery` را به عنوان **default import** از `Gallery.js` ایمپورت کرده
+     - کامپوننت اصلی یا `App` را به عنوان **default export.** اکسپورت کرده
 
 
 <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.
+دو آدرس `'./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 و export {/*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.**
+در اینجا دو راه اصلی وجود دارد که کامپوننت ها یا توابع و یا متغیر هایمان را export کنیم: default export و export خالی. تا اینجا در مثال ها از default export استفاده شده اما از این به بعد شما میتوانید از دستور export خالی هم استفاده کنید.
 
 ![Default and named exports](/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                          |
 | -----------      | -----------                                | -----------                               |
 | Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
 | Named    | `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!
+زمانی که شما به صورت پیش فرض ایمپورت میکنید (default import), شما میتوانید هر اسمی را بعد از 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.
+**معمولا از  ایمپورت پیش فرض استفاده میشود, مخصوصا زمانی که یک کامپوننت یا تابع داخل یک فایل داریم. و زمانی که از ایمپورت معمولی  (named import)  که در یک فایل چندین تابع یا کامپوننت داشته باشیم** صرف نظر از اینکه از کدام روش استفاده میکنید, سعی کنید نام های مناسبی برای توابع و کامپوننت ها و ایمپورت ها انتخاب کنید. دستوری مانند `export default () => {}` مشکل زا هست و حذف میشود.
 
 </DeepDive>
 
-## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+## اکسپورت و ایمپورت کردن چند کامپوننت از یک فایل {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+برگردیم به مثال قبلی, فرض کنیم دو کامپوننت `Profile` و `Gallery` را داخل یک فایل داشته باشیم. نمیتوانیم به صورت پیش فرض از آنها اکسپورت بگیریم (export default). پس چکار کنیم؟ از اکسپورت معمولی (export) استفاده میکنیم. **در یک فایل فقط یک export default داشته باشد ولی به تعداد مدنظر میتوانید اکسپورت معمولی داشته باشید**
 
 <Note>
 
-To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you!
+شاید پیش خود سوال کنید که از کدام استفاده کنم؟ یکسری از تیم ها فقط از export default استفاده کنند و مابقی توابع داخل فایل را با آن ادغام کنند. یا از export سراسر فایل استفاده کنند. اینکه کدام بهتر است به خودتان بستگی دارد.
 
 </Note>
 
-First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword):
+ابتدا, کامپوننت `Profile` را که در فایل `Gallery.js` موجود است را به اکسپورت بگیرید (از کلمه کلیدی `default` استفاده نکنید):
 
 ```js
 export function Profile() {
   // ...
 }
 ```
 
-Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
+سپس, کامپوننت `Profile` را از فایل `Gallery.js` به فایل `App.js` ایمپورت کنید (از علامت آکولاد استفاده کنید):
 
 ```js
 import { Profile } from './Gallery.js';
 ```
 
-Finally, **render** `<Profile />` from the `App` component:
+و در آخر, کامپوننت `<Profile />` در کامپوننت `App` رندر میشود:
 
 ```js
 export default function App() {
   return <Profile />;
 }
 ```
 
-Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `<Profile />` to `<Gallery />` and back in this example:
+حال در اینجا فایل `Gallery.js` دو export دارد: یک default export مربوط به کامپوننت `Gallery`, و یک named export مربوط به کامپوننت `Profile`. در فایل `App.js` هردوی آنها ایمپورت میشوند. حال دستور `<Profile />` را به `<Gallery />` تغییر بدهید و به مثال بازگردید:
 
 <Sandpack>
 
@@ -222,38 +222,38 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Now you're using a mix of default and named exports:
+حال شما از هر دو نوع از دستور export استفاده کردید:
 
 * `Gallery.js`:
-  - Exports the `Profile` component as a **named export called `Profile`.**
-  - Exports the `Gallery` component as a **default export.**
+  - کامپوننت `Profile` به عنوان  **named export** که نام آن `Profile` است اکسپورت شده.
+  - کامپوننت `Gallery` به عنوان  **default export** اکسپورت شده است
 * `App.js`:
-  - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
-  - Imports `Gallery` as a **default import** from `Gallery.js`.
-  - Exports the root `App` component as a **default export.**
+  - کامپوننت `Profile` به عنوان  **named import** که نام آن `Profile` است در `Gallery.js` ایمپورت شده.
+  - کامپوننت `Gallery` به عنوان  **default import** در فایل `Gallery.js` ایمپورت شده.
+  - کامپوننت `App` که کامپوننت ریشه است به عنوان  **default export** اکسپورت شده است.
 
 <Recap>
 
-On this page you learned:
+مواردی که در این صفحه یاد گرفتید:
 
-* What a root component file is
-* How to import and export a component
-* When and how to use default and named imports and exports
-* How to export multiple components from the same file
+* کامپوننت اصلی (root) چیست
+* چگونه یک کامپوننت را export/import کنیم
+* چه زمانی از export/import پیش فرض یا معمولی استفاده کنیم
+* چگونه چندین کامپوننت را که داخل یک فایل هستند را اکسپورت کنیم
 
 </Recap>
 
 
 
 <Challenges>
 
-#### Split the components further {/*split-the-components-further*/}
+#### تا جایی که میتوانید کامپوننت هارا به کامپوننت های کوچک تری تقسیم کنید {/*split-the-components-further*/}
 
-Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
+در حال حاضر, فایل `Gallery.js` دو کامپوننت `Profile` و `Gallery` را اکسپورت میکند, که یک مقداری گیج کنندست.
 
-Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `<Profile />` and `<Gallery />` one after another.
+یک فایلی را با نام `Profile.js` بسازید و کامپوننت `Profile` را درون آن بیاورید و اکسپورت کنید. سپس در کامپوننت `App` همان را ایمپورت کنید.
 
-You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
+هنگام استفاده از دستور export و import مطمئن شوید از کدام روش استفاده میکنید. برای این منظور جدول زیر را چک کنید:
 
 | Syntax           | Export statement                           | Import statement                          |
 | -----------      | -----------                                | -----------                               |
@@ -262,7 +262,7 @@ You may use either a default or a named export for `Profile`, but make sure that
 
 <Hint>
 
-Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too?
+زمانی که کامپوننت هارا صدا میزنید, حتما کامپوننت هارا import کنید. به نظر شما تا اینجا ما کامپوننت `Profile` را هم در فایل `Gallery.js` داریم؟
 
 </Hint>
 
@@ -282,7 +282,7 @@ export default function App() {
 ```
 
 ```js Gallery.js active
-// Move me to Profile.js!
+// Profile.js منو بیار توی فایل
 export function Profile() {
   return (
     <img
@@ -313,11 +313,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-After you get it working with one kind of exports, make it work with the other kind.
+خب بسیار هم عالی! الان وقت آن رسیده که با نوع دیگری از export کار کنید.
 
 <Solution>
 
-This is the solution with named exports:
+این تکه کد از named export (دستور اکسپورت معمولی) استفاده کرده است:
 
 <Sandpack>
 
@@ -367,7 +367,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-This is the solution with default exports:
+و همچنین کد زیر هم با default export (اکسپورت پیش فرض) نوشته شده است:
 
 <Sandpack>