@sJJdGG

sJJdGG · sJJdGG · commit b855f74752d8 · 2022-10-07T01:46:32.000+03:30
Needed Changes for sync PR #300 Part 2
diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
@@ -79,22 +79,11 @@ const element = <Welcome name="Sara" />;
 root.render(element);
 ```
 
-<<<<<<< HEAD
-[روی CodePen امتحان کنید](codepen://components-and-props/rendering-a-component)
-=======
-**[Try it on CodePen](https://codepen.io/gaearon/pen/YGYmEG?editors=1010)**
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+**[روی CodePen امتحان کنید](https://codepen.io/gaearon/pen/YGYmEG?editors=1010)**
 
 بیایید جمع‌بندی کنیم که در این مثال چه اتفاقی می‌افتد:
 
-<<<<<<< HEAD
-۱. ما تابع `ReactDOM.render()` را با المنت `<Welcome name="Sara" />` فرا می‌خوانیم.
-=======
-1. We call `root.render()` with the `<Welcome name="Sara" />` element.
-2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
-3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
-4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+۱. ما تابع `root.render()` را با المنت `<Welcome name="Sara" />` فرا می‌خوانیم.
 
 ۲. ری‌اکت کامپوننت `Welcome` را به همراه `{name: 'Sara'}` که در ورودی تابع به عنوان `props` تعریف شده است، فرا می‌خواند.
 
@@ -131,11 +120,7 @@ function App() {
 }
 ```
 
-<<<<<<< HEAD
-[روی CodePen امتحان کنید](codepen://components-and-props/composing-components)
-=======
-**[Try it on CodePen](https://codepen.io/gaearon/pen/KgQKPr?editors=1010)**
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+**[روی CodePen امتحان کنید](https://codepen.io/gaearon/pen/KgQKPr?editors=1010)**
 
 معمولا، پروژه‌های جدید ری‌اکت دارای یک کامپوننت `App` واحد در بالاترین سطح هستند. اما اگر شما ری‌اکت را با پروژه‌ای موجود ادغام می‌کنید، می‌توانید از سطوح پایین به بالا طراحی کنید، برای مثال از یک کامپوننت کوچک مانند `Button` شروع کنید و تدریجا تا بالای سلسله مراتب view طراحی را ادامه دهید.
 
@@ -170,11 +155,7 @@ function Comment(props) {
 }
 ```
 
-<<<<<<< HEAD
-[روی CodePen امتحان کنید](codepen://components-and-props/extracting-components)
-=======
-**[Try it on CodePen](https://codepen.io/gaearon/pen/VKQwEo?editors=1010)**
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+**[روی CodePen امتحان کنید](https://codepen.io/gaearon/pen/VKQwEo?editors=1010)**
 
 این کامپوننت author (یک شیء)، text (یک string)، و date (یک تاریخ) را به عنوان props دریافت و یک دیدگاه را در یک شبکه اجتماعی توصیف می‌کند.
 
@@ -253,11 +234,7 @@ function Comment(props) {
 }
 ```
 
-<<<<<<< HEAD
-[روی CodePen امتحان کنید](codepen://components-and-props/extracting-components-continued)
-=======
-**[Try it on CodePen](https://codepen.io/gaearon/pen/rrJNJY?editors=1010)**
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+**[روی CodePen امتحان کنید](https://codepen.io/gaearon/pen/rrJNJY?editors=1010)**
 
 استخراج کامپوننت‌ها شاید در ابتدا به نظر کار سختی بیاید، اما داشتن یک پالت از کامپوننت‌هایی با قابلیت استفاده مجدد در اپ‌های بزرگتر، هزینه آن را باز می‌گرداند. به عنوان یک قانون کلی در نظر داشته باشید که اگر قسمتی از رابط کاربری شما بارها استفاده شده است (نظیر `Button`, `Panel` , `Avatar`) و یا اینکه قسمتی از رابط کاربری پیچیدگی منحصر به فرد خود را دارد (نظیر `App`, `FeedStory`, `Comment`) آن قسمت کاندیدای مناسبی برای استخراج و تبدیل شدن به یک کامپوننت مجزا است.
 
diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md
@@ -1,17 +1,18 @@
 ---
 id: composition-vs-inheritance
-title: Composition vs Inheritance
+title: ترکیب در مقابل وراثت
 permalink: docs/composition-vs-inheritance.html
 redirect_from:
   - "docs/multiple-components.html"
 prev: lifting-state-up.html
 next: thinking-in-react.html
 ---
+
 ری‌اکت دارای یک مدل ترکیبی (compostion) قدرتمند است. به همین دلیل برای افزایش امکان استفاده مجدد کد بین کامپوننت‌ها، ما استفاده از ترکیب را به جای ارث‌بری پیشنهاد می‌کنیم.
 
 توسعه‌دهنگانی که تازه وارد دنیای ری‌اکت می‌شوند، هنگام مواجه با ارث‌بری دچار مشکلاتی می‌شوند. در این بخش، چند مورد از آن‌ها را بررسی و نشان می‌دهیم که چگونه با استفاده از ترکیب می‌توان آن‌ها را حل کرد.
 
-## در بر گرفتن {#containment}
+## دربرگرفتن {#containment}
 
 بعضی از کامپوننت‌ها اطلاعاتی از فرزند خود ندارند. این مورد در کامپوننت‌هایی مانند `Sidebar` یا `Dialog` که مانند یک قاب عمل می‌کنند، مرسوم است.
 
@@ -168,8 +169,4 @@ class SignUpDialog extends React.Component {
 
 با استفاده از prop و ترکیب کامپوننت‌ها، در طراحی ظاهر و عملکرد کامپوننت‌ها انعطاف‌پذیری لازم را خواهید داشت. به‌خاطر داشته‌باشید که کامپوننت‌ها می‌توانند prop های دلخواهی مثل مقادیر اولیه، المنت‌های ری‌اکت و یا توابع را دریافت کنند.
 
-<<<<<<< HEAD
 اگر نیاز دارید قابلیتی که مربوط به UI نمی‌شود را میان کامپوننت‌ها به اشتراک بگذارید، پیشنهاد ما ساخت یک ماژول جاوااسکریپت است. کامپوننت‌های شما می‌توانند آن تابع، آبجکت و یا یک کلاس را import کرده و بدون تغییر یا توسعه آن، از قابلیت‌های آن بهره ببرند.
-=======
-If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or class, without extending it.
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
@@ -35,17 +35,9 @@ function Greeting(props) {
   return <GuestGreeting />;
 }
 
-<<<<<<< HEAD
-ReactDOM.render(
-  // تغییر isLoggedIn={true} را امتحان کنید 
-  <Greeting isLoggedIn={false} />,
-  document.getElementById('root')
-);
-=======
 const root = ReactDOM.createRoot(document.getElementById('root')); 
-// Try changing to isLoggedIn={true}:
+// تغییر isLoggedIn={true} را امتحان کنید 
 root.render(<Greeting isLoggedIn={false} />);
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
 ```
 
 [**روی CodePen امتحان کنید**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md
@@ -46,11 +46,6 @@ render() {
 
 _توجه داشته باشید که این عملکرد جزئی از ری اکت نمی باشد، بلکه توسط کتابخانه های شخص ثالث ارائه شده._ ری اکت هیچ نظری درباره نحوه ی تعریف استایل ها ندارد؛ اگر شک و شبهه ای دارید، یک نقطه شروع خوب این است که استایل های خود را درون فایل جداگانه `*.css` تعریف کرده و طبق معمول با استفاده از [`className`](/docs/dom-elements.html#classname) به آن ها مراجعه کنید.
 
-
-<<<<<<< HEAD
 ### آیا می توانم با ری اکت انیمیشن انجام دهم؟ {#can-i-do-animations-in-react}
 
 ری اکت میتواند برای قدرت بخشیدن به انیمیشن ها استفاده شود. به مثال های [React Transition Group](https://reactcommunity.org/react-transition-group/) و [React Motion](https://github.com/chenglou/react-motion) یا [React Spring](https://github.com/react-spring/react-spring)، نگاه بیاندازید.
-=======
-React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/), [React Motion](https://github.com/chenglou/react-motion), [React Spring](https://github.com/react-spring/react-spring), or [Framer Motion](https://framer.com/motion), for example.
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md
@@ -92,11 +92,7 @@ class Toggle extends React.Component {
 
 این رفتار مختص به ری‌اکت نیست. این جزئی از [چگونگی کارکرد توابع در جاوااسکریپت](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/) است. عموما، اگر شما بدون `()` بعد از آن به یک تابع اشاره کنید، مانند `onClick={this.handleClick}`، شما باید آن متد را bind کنید.
 
-<<<<<<< HEAD
-اگر فراخوانی `bind` شما را آزار می‌دهد، دو راه برای دور زدن ان وجود دارد. اگر شما از [قاعده فیلدهای عمومی کلاس](https://babeljs.io/docs/plugins/transform-class-properties/) استفاده می‌کنید، می‌توانید از فیلدهای کلاس برای bind کردن صحیح callback ها استفاده کنید.
-=======
-If calling `bind` annoys you, there are two ways you can get around this. You can use [public class fields syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_instance_fields) to correctly bind callbacks:
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+اگر فراخوانی `bind` شما را آزار می‌دهد، دو راه برای دور زدن ان وجود دارد. اگر شما از [قاعده فیلدهای عمومی کلاس](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_instance_fields) استفاده می‌کنید، می‌توانید از فیلدهای کلاس برای bind کردن صحیح callback ها استفاده کنید.
 
 ```js{2-6}
 class LoggingButton extends React.Component {
diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md
@@ -15,11 +15,7 @@ root.render(<h1>Hello, world!</h1>);
 
 این مثال یک عنوان را روی صفحه نمایش می‌دهد که می‌گوید: "Hello, world!"
 
-<<<<<<< HEAD
-**[روی CodePen امتحان کنید](codepen://hello-world)**
-=======
-**[Try it on CodePen](https://codepen.io/gaearon/pen/rrpgNB?editors=1010)**
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+**[روی CodePen امتحان کنید](https://codepen.io/gaearon/pen/rrpgNB?editors=1010)**
 
 روی لینک بالا کلیک کنید تا یک ویرایشگر آنلاین باز شود. هر تغییری که می‌خواهید اعمال کنید و تاثیر آن را بر خروجی مشاهده کنید. بیشتر صفحات در این راهنما، مثال‌های قابل ویرایشی مانند بالا دارند.
 
diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md
@@ -31,13 +31,8 @@ function Example() {
 
 > نکته
 >
-<<<<<<< HEAD
-> ری‌‌اکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوک‌‌ها پشتیبانی می‌‌کند. هنگام ارتقاع، فراموش نکنید همه‌‌ی پکیج‌‌ها شامل React DOM را به‌روز رسانی نمایید.
+> ری‌‌اکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوک‌‌ها پشتیبانی می‌‌کند. هنگام ارتقاء، فراموش نکنید همه‌‌ی پکیج‌‌ها شامل React DOM را به‌روز رسانی نمایید.
 > ری‌اکت نیتیو از زمان [انتشار نسخه ۰.۵۹](https://reactnative.dev/blog/2019/03/12/releasing-react-native-059) از هوک‌ها پشتیبانی می‌کند.
-=======
->React 16.8.0 is the first release to support Hooks. When upgrading, don't forget to update all packages, including React DOM.
->React Native has supported Hooks since [the 0.59 release of React Native](https://reactnative.dev/blog/2019/03/12/releasing-react-native-059).
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
 
 ## معرفی تصویری {#video-introduction}
 
diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md
@@ -134,11 +134,7 @@ var SayHello = createReactClass({
 
 این یعنی نوشتن کلاس‌های ES6 همراه با کمی کد boilerplate برای مدیریت کننده‌های رویداد است، اما مزیت آن این است که عملکرد بهتری در اپلیکیشن‌های بزرک دارد.
 
-<<<<<<< HEAD
-اگر کد boilerplate برای شما جذاب نیست، می‌توانید پیشنهاد نحوی **experimental** در [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) را در Babel فعال کنید:
-=======
-If the boilerplate code is too unattractive to you, you may use [ES2022 Class Properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_instance_fields) syntax:
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+اگر کد boilerplate برای شما خیلی جذاب نیست، می توانید از سینتکس [ES2022 Class Properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_instance_fields) استفاده کنید:
 
 
 ```javascript
@@ -163,13 +159,7 @@ class SayHello extends React.Component {
 }
 ```
 
-<<<<<<< HEAD
-لطفا در نظر داشته باشید که قاعده بالا **experimental** است و ممکن است تغییر کند، یا ممکن است این پیشنهاد وارد زبان نشود.
-
-اگر ترجیح می‌دهید که در امنیت باشید، چند انتخاب دارید:
-=======
-You also have a few other options:
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+شما همچنین چند گزینه دیگر دارید:
 
 * متدها را در سازنده bind کنید.
 * از arrow function ها استفاده کنید، برای مثال `onClick={(e) => this.handleClick(e)}`.
diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md
@@ -114,11 +114,7 @@ function ComponentWithTransition() {
 
 اگر از rendering سمت سروری ری‌اکت استفاده می‌کنید، در صورتی که محتوای render شده کلاینت با محتوای render شده سرور متفاوت باشد، هشداری دریافت می‌کنید. البته، در برخی موارد خیلی سخت است که دقیقا با همدیگر جور بشوند. برای مثال timestamp ها بین سرور و کلاینت متفاوت خواهند بود.
 
-<<<<<<< HEAD
-اگر شما `suppressHydrationWarning` را برای المنتی `true` کنید، ری‌اکت برای مغایرت‌های صفات و محتوای آن المنت به شما هشدار نخواهد داد. فقط تا یک سطح از عمق کار خواهد کرد، و این هم به منظور یک راه فرار است، زیاد از آن استفاده نکنید. شما می‌توانید در مورد hydration در [اسناد `ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) بیشتر بخوانید.
-=======
-If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. You can read more about hydration in the [`ReactDOM.hydrateRoot()` documentation](/docs/react-dom-client.html#hydrateroot).
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+اگر شما `suppressHydrationWarning` را برای المنتی `true` کنید، ری‌اکت برای مغایرت‌های صفات و محتوای آن المنت به شما هشدار نخواهد داد. فقط تا یک سطح از عمق کار خواهد کرد، و این هم به منظور یک راه فرار است، زیاد از آن استفاده نکنید. شما می‌توانید در مورد hydration در [اسناد `ReactDOM.hydrateRoot()`](/docs/react-dom-client.html#hydrateroot) بیشتر بخوانید.
 
 ### value {#value}
 
diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md
@@ -6,37 +6,13 @@ category: Reference
 permalink: docs/javascript-environment-requirements.html
 ---
 
-<<<<<<< HEAD
-ری‌اکت 16 به مجموعه(Collection) های [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) و [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) وابسته است. اگر در برنامه خود از مرورگرها و دستگاه‌های قدیمی پشتیبانی می‌کنید که ممکن است هنوز این موارد را به طور پیش فرض ارائه ندهند(به عنوان مثال IE <11) یا دارای پیاده‌سازی های غیر سازگار هستند (به عنوان مثال IE 11)، اضافه کردن یک برنامه چندکاره سراسری(global polyfill) مانند [core-js](https://github.com/zloirock/core-js) را به برنامه خود در نظر بگیرید.
+ری‌اکت ۱۸ از تمام مرورگرهای مدرن (Edge، Firefox، Chrome، Safari و غیره) پشتیبانی می کند.
 
-یک محیط چندکاره(polyfilled environment) برای ری‌اکت 16 با استفاده از core-js برای پشتیبانی از مرورگرهای قدیمی به صورت زیر است:
-=======
-React 18 supports all modern browsers (Edge, Firefox, Chrome, Safari, etc).
+اگر از مرورگرها و دستگاه‌های قدیمی‌تری مانند اینترنت اکسپلورر که ویژگی‌های مرورگر مدرن را به‌صورت بومی ارائه نمی‌کنند یا پیاده‌سازی‌های ناسازگاری دارند، پشتیبانی می‌کنید، در برنامه همراه خود یک polyfill سراسری اضافه کنید.
 
-If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application.
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
-
-Here is a list of the modern features React 18 uses:
+در اینجا لیستی از ویژگی های مدرن مورد استفاده ری‌اکت ۱۸ آمده است:
 - [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 - [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
 - [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
 
-<<<<<<< HEAD
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-ReactDOM.render(
-  <h1>Hello, world!</h1>,
-  document.getElementById('root')
-);
-```
-
-ری‌اکت همچنین به `requestAnimationFrame` وابستگی دارد(حتی در محیط تست).
-شما می‌توانید از پکیج [raf](https://www.npmjs.com/package/raf) برای حل وابستگی `requestAnimationFrame` استفاده کنید :
-
-```js
-import 'raf/polyfill';
-```
-=======
-The correct polyfill for these features depend on your environment. For many users, you can configure your [Browserlist](https://github.com/browserslist/browserslist) settings. For others, you may need to import polyfills like [`core-js`](https://github.com/zloirock/core-js) directly.
->>>>>>> 664dd5736287e01a4557cd03c9a8736682911b34
+پلی‌فیل صحیح برای این ویژگی ها به محیط شما بستگی دارد. برای بسیاری از کاربران، می‌توانید تنظیمات [Browserlist](https://github.com/browserslist/browserslist) خود را پیکربندی کنید. برای دیگران، ممکن است نیاز داشته باشید که polyfillهایی مانند [`core-js`](https://github.com/zloirock/core-js) را مستقیماً ایمپورت کنید.
diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md
diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
