Translate more page to Persian

content/docs/forwarding-refs.md

@@ -4,9 +4,9 @@ title: Forwarding Refs
 permalink: docs/forwarding-refs.html
 ---
 
-Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below.
+حمل مرجع روشی برای انتقال خودکار [ref](/docs/refs-and-the-dom.html) از طریق یک جزء به یکی از فرزندانش است. این به طور معمول برای بیشتر مؤلفه های برنامه ضروری نیست. با این حال، این می تواند برای برخی از انواع مؤلفه ها، به ویژه در کتابخانه های مؤلفه قابل استفاده مجدد، مفید باشد. متداول ترین موضوع ها در زیر توضیح داده شده است.
 
-## Forwarding refs to DOM components {#forwarding-refs-to-dom-components}
+## حمل جرمع به DOM کامپوننت {#forwarding-refs-to-dom-components}
 
 Consider a `FancyButton` component that renders the native `button` DOM element:
 `embed:forwarding-refs/fancy-button-simple.js`
@@ -21,23 +21,24 @@ In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref`
 
 `embed:forwarding-refs/fancy-button-simple-ref.js`
 
-This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly.
+به این ترتیب ، اجزای با استفاده از "FancyButton" می توانند به قسمت زیر دکمه "گره" DOM مراجعه کنند و در صورت لزوم به آن دسترسی پیدا کنند - درست مثل اینکه مستقیماً از دکمه DOM استفاده می کردند.
 
-Here is a step-by-step explanation of what happens in the above example:
+
+در اینجا توضیح گام به گام آنچه در مثال بالا اتفاق می افتد آورده شده است:
 
 1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable.
 1. We pass our `ref` down to `<FancyButton ref={ref}>` by specifying it as a JSX attribute.
 1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument.
 1. We forward this `ref` argument down to `<button ref={ref}>` by specifying it as a JSX attribute.
 1. When the ref is attached, `ref.current` will point to the `<button>` DOM node.
 
->Note
+>توجه
 >
 >The second `ref` argument only exists when you define a component with `React.forwardRef` call. Regular function or class components don't receive the `ref` argument, and ref is not available in props either.
 >
 >Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.
 
-## Note for component library maintainers {#note-for-component-library-maintainers}
+## نکته برای نگهدارنده های کتابخانه ها {#note-for-component-library-maintainers}
 
 **When you start using `forwardRef` in a component library, you should treat it as a breaking change and release a new major version of your library.** This is because your library likely has an observably different behavior (such as what refs get assigned to, and what types are exported), and this can break apps and other libraries that depend on the old behavior.
 
@@ -59,18 +60,18 @@ This means that refs intended for our `FancyButton` component will actually be a
 Fortunately, we can explicitly forward refs to the inner `FancyButton` component using the `React.forwardRef` API. `React.forwardRef` accepts a render function that receives `props` and `ref` parameters and returns a React node. For example:
 `embed:forwarding-refs/log-props-after.js`
 
-## Displaying a custom name in DevTools {#displaying-a-custom-name-in-devtools}
+## نمایش نام سفارشی در DevTools {#displaying-a-custom-name-in-devtools}
 
 `React.forwardRef` accepts a render function. React DevTools uses this function to determine what to display for the ref forwarding component.
 
-For example, the following component will appear as "*ForwardRef*" in the DevTools:
-
+به عنوان مثال ، مؤلفه زیر به صورت "*ForwardRef*" در DevTools ظاهر می شود:
+ 
 `embed:forwarding-refs/wrapped-component.js`
 
-If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(myFunction)*"):
+اگر تابع رندر را نامگذاری کنید ، DevTools نام آن را نیز شامل می شود (به عنوان مثال "*ForwardRef(myFunction)*"):
 
 `embed:forwarding-refs/wrapped-component-with-function-name.js`
 
-You can even set the function's `displayName` property to include the component you're wrapping:
+حتی می توانید نامی که برای توابع نمایش می دهد را تنظیم کنید تا نام مؤلفه ای که از آن بسته بندی شده است واضح باشد:
 
 `embed:forwarding-refs/customized-display-name.js`

content/docs/fragments.md

@@ -4,8 +4,8 @@ title: Fragments
 permalink: docs/fragments.html
 ---
 
-A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
-
+یک الگوی رایج در React این است که یک مؤلفه بتواند عناصر مختلف را برگرداند. قطعات به شما امکان می دهد لیستی از فرزندان را بدون اضافه کردن گره های اضافی به DOM گروه بندی کنید.
+ 
 ```js
 render() {
   return (
@@ -18,11 +18,11 @@ render() {
 }
 ```
 
-There is also a new [short syntax](#short-syntax) for declaring them.
+همچنین یک [نحو کوتاه](#short-syntax) برای اعلام آنها وجود دارد.
 
-## Motivation {#motivation}
+## انگیزه {#motivation}
 
-A common pattern is for a component to return a list of children. Take this example React snippet:
+یک الگوی رایج برای این است که یک جزء بتواند لیستی از فرزندان را برگرداند. از این مثال نمونه React snippet بگیرید:
 
 ```jsx
 class Table extends React.Component {
@@ -38,7 +38,8 @@ class Table extends React.Component {
 }
 ```
 
-`<Columns />` would need to return multiple `<td>` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of `<Columns />`, then the resulting HTML will be invalid.
+دستور `<Columns />` نیاز خواهد بود تا بتوانید چند `<td>` را برگردانید که در خروجی از لحاظ HTML معتبر باشند.
+اگر در بخش ارائه از `<Columns />` استفاده کنید, خروجی HTML نادرست خواهد بود.
 
 ```jsx
 class Columns extends React.Component {
@@ -53,9 +54,10 @@ class Columns extends React.Component {
 }
 ```
 
-results in a `<Table />` output of:
+منجر به خروجی `<Table />` در:
 
 ```jsx
+
 <table>
   <tr>
     <div>
@@ -66,9 +68,9 @@ results in a `<Table />` output of:
 </table>
 ```
 
-Fragments solve this problem.
+قطعات این مشکل را حل می کنند.
 
-## Usage {#usage}
+## طریقه استفاده {#usage}
 
 ```jsx{4,7}
 class Columns extends React.Component {
@@ -83,7 +85,7 @@ class Columns extends React.Component {
 }
 ```
 
-which results in a correct `<Table />` output of:
+که منجر به خروجی صحیح `<Table />` در:
 
 ```jsx
 <table>
@@ -94,10 +96,10 @@ which results in a correct `<Table />` output of:
 </table>
 ```
 
-### Short Syntax {#short-syntax}
-
-There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
+### نحو کوتاه {#short-syntax}
 
+یک نحو جدید و کوتاه تر وجود دارد که می توانید برای اعلام قطعات استفاده کنید. این شبیه به برچسب های خالی است:
+
 ```jsx{4,7}
 class Columns extends React.Component {
   render() {
@@ -111,11 +113,11 @@ class Columns extends React.Component {
 }
 ```
 
-You can use `<></>` the same way you'd use any other element except that it doesn't support keys or attributes.
+می توانید از `<></>` ها به همان روشی استفاده کنید که می توانید از هر عنصر دیگری استفاده کنید به جز اینکه از ویژگی ها پشتیبانی نمی کند.
 
-### Keyed Fragments {#keyed-fragments}
+### قطعات اصلی {#keyed-fragments}
 
-Fragments declared with the explicit `<React.Fragment>` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list:
+تکه های اعلام شده با نحوی صریح `<React.Fragment>` ممکن است دارای کلید باشند. مورد استفاده برای این کار ، نقشه برداری از مجموعه به مجموعه ای از قطعات است - برای مثال ، برای ایجاد یک لیست توضیحات:
 
 ```jsx
 function Glossary(props) {
@@ -133,8 +135,9 @@ function Glossary(props) {
 }
 ```
 
-`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers.
+"کلید" تنها صفتی است که می توان به Fragment منتقل کرد. در آینده، ما ممکن است از ویژگی های بیشتری بعدا پشتیبانی کنیم، مانند کنترل رویداد ها
+
 
-### Live Demo {#live-demo}
+### نسخه ی نمایشی زنده {#live-demo}
 
-You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
+می توانید با این [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000) نحو جدید قطعه JSX را امتحان کنید.