Translating Fragment.md

src/content/reference/react/Fragment.md

@@ -4,7 +4,9 @@ title: <Fragment> (<>...</>)
 
 <Intro>
 
-`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node.
+
+ تگ `<Fragment>`که اغلب به اینصورت `<>...</>` نمایش داده میشود،به شما اجازه میدهد  تا گروهی از المنت هارو بدون اینکه توی نود (node) بپیچانید نمایش دهید.  
+
 
 ```js
 <>
@@ -19,29 +21,28 @@ title: <Fragment> (<>...</>)
 
 ---
 
-## Reference {/*reference*/}
+## مرجع {/*reference*/}
 
 ### `<Fragment>` {/*fragment*/}
 
-Wrap elements in `<Fragment>` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<></>` is shorthand for `<Fragment></Fragment>` in most cases.
+  المنت هارو توی تگ `<Fragment>` بپیچانید تا آن ها را توی یک موقعیت  گروه بندی کنید، جایی که شما نیاز دارید که یک المنت داشته باشید.گروه بندی المنت ها در `<Fragment>` هیچ تاثیری روی نتیجه دام(DOM)شما ندارد؛دقیقا مثل اینکه المنت ها گروه بندی نشده است. تگ خالی جی اس اکس(jsx) `<></>` دقیقا کوتاه شده ی تگ `<Fragment></Fragment>` در اکثر مواقع است.
 
-#### Props {/*props*/}
+#### پراپس ها (Props) {/*props*/}
+- **اختیاری** `key`: فرگمنت (Fragments) های تعریف شده به صورت `<Fragment>` میتوانند شامل [keys](/learn/rendering-lists#keeping-list-items-in-order-with-key) باشند.
 
-- **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
+#### هشدار ها {/*caveats*/}
 
-#### Caveats {/*caveats*/}
+- اگر میخواهید به فرگمنت ها (Fragments) `key` پاس بدهید, نمیتوانید از `<>...</>` استفاده کنید. ابتدا باید به صراحت `Fragment` را از `'react'` ایمپورت کرده و به صورت `<Fragment key={yourKey}>...</Fragment>` رندر میشود.
 
-- If you want to pass `key` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment key={yourKey}>...</Fragment>`.
-
-- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
+-  وقتی که از  `<><Child /></>` به `[<Child />]` میرویم یا وقتی که از `<><Child /></>` به `<Child />` یا برعکس ری اکت [استیت ها را بازنشانی نمیکند](/learn/preserving-and-resetting-state). این عمل فقط برای یک سطح غیر عمیق کار میکند: مثلا, شما از `<><><Child /></></>` به `<Child />` و استیت ها بازنشانی میشوند. برای اطلاعات بیشتر و درک عمیق تر میتوانید به  [اینجا](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) مراجعه کنید.
 
 ---
 
-## Usage {/*usage*/}
+## نحوه استفاده {/*usage*/}
 
-### Returning multiple elements {/*returning-multiple-elements*/}
+### برگرداندن چندین المنت {/*returning-multiple-elements*/}
 
-Use `Fragment`, or the equivalent `<>...</>` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
+از `Fragment`, یا معادل آن `<>...</>` برای گروه بندی چندین المنت کنار یکدیگر استفاده کنید. شما میتوانید از آن برای قرار دادن چندین المنت در هر مکانی که یک المنت واحد وجود دارد استفاده کنید. برای مثال, یک کامپوننت فقط میتواند یک المنت را برگرداند, اما با استفاده از فرگمنت شما میتوانید  چندین المنت رو کنار هم گروه بندی کنید و سپس شما میتوانید به عنوان یک گروه از اون استفاده کنید :
 
 ```js {3,6}
 function Post() {
@@ -54,7 +55,7 @@ function Post() {
 }
 ```
 
-Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>` and `<article>` DOM nodes appear as siblings without wrappers around them:
+فرگمنت ها (Fragments) خیلی مفید هستند چرا که گروه بندی کردن المنت ها هیچ تاثیری روی استایل و ساختار اصلی شما ندارد, برخلاف اینکه اگر شما المنت ها رو توی یک کانتینر دیگر مثل DOM المنت بپیچانید. اگر که شما این مثال رو با دیگر ابزاری های مرورگر بررسی کنید, متوجه خواهید شد که تمام  `<h1>` و `<article>` ها (DOM nodes) به صورت فرزند به وجود می آیند بدون اینکه حتی دورشون چیزی پیچانده باشیم:
 
 <Sandpack>
 
@@ -94,9 +95,9 @@ function PostBody({ body }) {
 
 <DeepDive>
 
-#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/}
+#### چگونه یک فرگمنت (Fragments) بدون سینتکس خاصی استفاده کنیم؟ {/*how-to-write-a-fragment-without-the-special-syntax*/}
 
-The example above is equivalent to importing `Fragment` from React:
+مثال بالا معادل ایمپورت کردن `Fragment` در ری اکت است:
 
 ```js {1,5,8}
 import { Fragment } from 'react';
@@ -111,15 +112,15 @@ function Post() {
 }
 ```
 
-Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments)
+معمولا به `<Fragment></Fragment>` احتیاج ندارید تا زمانی که بخواهید [به `Fragment` ها `key` پاس بدین.](#rendering-a-list-of-fragments)
 
 </DeepDive>
 
 ---
 
-### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/}
+### به یک متغیر چندین المنت پاس بدین {/*assigning-multiple-elements-to-a-variable*/}
 
-Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
+مثل سایر المنت ها, شما میتوانید به فرگمنت ها متغیر اختصاص دهید, و اونجا رو به عنوان props پاس بدید:
 
 ```js
 function CloseDialog() {
@@ -139,9 +140,9 @@ function CloseDialog() {
 
 ---
 
-### Grouping elements with text {/*grouping-elements-with-text*/}
+### گروه بندی المنت ها با متن {/*grouping-elements-with-text*/}
 
-You can use `Fragment` to group text together with components:
+میتوانید از `Fragment` استفاده کنید تا متن های کنار یکدیگر را با کامپوننت ها گروه بندی کنید:
 
 ```js
 function DateRangePicker({ start, end }) {
@@ -158,9 +159,9 @@ function DateRangePicker({ start, end }) {
 
 ---
 
-### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
+### رندر کردن لیستی از فرگمنت ها (Fragments) {/*rendering-a-list-of-fragments*/}
 
-Here's a situation where you need to write `Fragment` explicitly instead of using the `<></>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute:
+اینجا نمونه ای از یک موقعیتی هست که شما نیاز دارید به جای `<></>`  از `Fragment` استفاده کنید. وقتی که شما [چندیدن تا المنت رو درون یک حلقه رندر می کنید](/learn/rendering-lists), شما نیاز دارید که به المنت `key` بدهید. اگر که المنت های درون حلقه (loop) در واقع Fragment هستند, شما باید از این قاعده JSX  برای  ترتیب المنت ها پیروی کنید و از ویژگی `key` استفاده کنید :
 
 ```js {3,6}
 function Blog() {
@@ -172,8 +173,7 @@ function Blog() {
   );
 }
 ```
-
-You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:
+شما میتوانید DOM ها رو بررسی کنید و پی ببرید که هیچ المنتی دور فرگمنت فرزند شما پیچیده نشده است:
 
 <Sandpack>