docs: improve translate rendering-lists.md

Author: mrbadri

src/content/learn/rendering-lists.md

@@ -4,14 +4,15 @@ title: رندر کردن لیست
 
 <Intro>
 
-اغلب اوقات می‌خواهید چندین کامپوننت مشابه را از یک مجموعه داده نمایش دهید. می‌توانید از [متدهای آرایه جاوااسکریپت ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#)برای مدیریت یک آرایه از داده‌ها استفاده کنید. در این صفحه، از متدهای [filter()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) و [map()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) همراه با React استفاده خواهید کرد تا آرایه داده‌های خود را فیلتر کرده و به آرایه‌ای از کامپوننت‌ها تبدیل کنید.
+اغلب اوقات می‌خواهید چندین کامپوننت مشابه را از یک مجموعه داده نمایش دهید. می‌توانید از [متدهای آرایه جاوااسکریپت](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#) برای مدیریت یک آرایه از داده‌ها استفاده کنید. در این صفحه، از متدهای [filter()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) و [map()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) همراه با ری‌اکت استفاده خواهید کرد تا آرایه داده‌های خود را فیلتر کرده و به آرایه‌ای از کامپوننت‌ها تبدیل کنید.
+
 </Intro>
 
 <YouWillLearn>
 
-* چگونه کامپوننت‌ها را با استفاده از متد `()map` جاوااسکریپت از یک آرایه رندر کنیم
-* چگونه فقط کامپوننت‌های خاص را با استفاده از متد `()filter` جاوااسکریپت رندر کنیم
-* چه زمانی و چرا باید از کلیدهای React استفاده کنیم
+* چگونه کامپوننت‌ها را با استفاده از متد `map()` جاوااسکریپت از یک آرایه رندر کنیم
+* چگونه فقط کامپوننت‌های خاص را با استفاده از متد `filter()` جاوااسکریپت رندر کنیم
+* چه زمانی و چرا باید از کلیدهای ری‌اکت استفاده کنیم
 
 </YouWillLearn>
 
@@ -132,7 +133,7 @@ const chemists = people.filter(person =>
 );
 ```
 
-2. حالا **بر روی** `chemists` از متد `map()` استفاده کنید:
+2. حالا بر روی `chemists` از متد **map()** استفاده کنید:
 
 ```js {1,13}
 const listItems = chemists.map(person =>
@@ -285,7 +286,7 @@ Warning: Each child in a list should have a unique "key" prop.
 
 </Note>
 
-کلیدها به React می‌گویند که هر کامپوننت مربوط به کدام آیتم آرایه است، تا بتواند آن‌ها را بعداً مطابقت دهد. این موضوع زمانی اهمیت پیدا می‌کند که آیتم‌های آرایه شما ممکن است جابجا شوند (برای مثال به دلیل مرتب‌سازی)، وارد شوند یا حذف شوند. یک `key` به‌خوبی انتخاب شده به React کمک می‌کند تا دقیقاً متوجه شود چه اتفاقی افتاده است و به‌روزرسانی‌های صحیحی را در درخت DOM انجام دهد.
+کلیدها به ری‌اکت می‌گویند که هر کامپوننت مربوط به کدام آیتم آرایه است، تا بتواند آن‌ها را بعداً مطابقت دهد. این موضوع زمانی اهمیت پیدا می‌کند که آیتم‌های آرایه شما ممکن است جابجا شوند (برای مثال به دلیل مرتب‌سازی)، وارد شوند یا حذف شوند. یک `key` به‌خوبی انتخاب شده به ری‌اکت کمک می‌کند تا دقیقاً متوجه شود چه اتفاقی افتاده است و به‌روزرسانی‌های صحیحی را در درخت DOM انجام دهد.
 
 به جای ایجاد کلیدها به صورت آنی، باید آن‌ها را در داده‌های خود گنجانید:
 
@@ -408,19 +409,19 @@ const listItems = people.map(person =>
 * **کلیدها باید در میان دسته خود منحصر به فرد باشند.** اما استفاده از کلیدهای مشابه برای نودهای JSX در _آرایه‌های متفاوت_ اشکالی ندارد.
 * **کلیدها نباید تغییر کنند** زیرا این کار هدف آنها را بی‌اثر می‌کند! از تولید آن‌ها در حین رندرینگ خودداری کنید.
 
-### چرا React به کلیدها نیاز دارد؟ {/*why-does-react-need-keys*/}
+### چرا ری‌اکت به کلیدها نیاز دارد؟ {/*why-does-react-need-keys*/}
 
 تصور کنید که فایل‌ها در دسکتاپ شما نام نداشته باشند. در عوض، شما آنها را بر اساس ترتیبشان ارجاع می‌دهید — فایل اول، فایل دوم و به همین ترتیب. شاید به این موضوع عادت کنید، اما زمانی که یک فایل حذف شود، این موضوع گیج‌کننده می‌شود. فایل دوم به فایل اول تبدیل می‌شود، فایل سوم به فایل دوم و همینطور ادامه می‌یابد.
 
-نام فایل‌ها در یک پوشه و کلیدهای JSX در یک آرایه هدف مشابهی دارند. آنها به ما این امکان را می‌دهند که یک آیتم را بین هم‌نیاکانش به طور منحصر به فرد شناسایی کنیم. یک کلید به‌خوبی انتخاب شده اطلاعات بیشتری نسبت به موقعیت داخل آرایه فراهم می‌کند. حتی اگر _موقعیت_ به دلیل مرتب‌سازی تغییر کند، کلید به React این امکان را می‌دهد که آیتم را در طول عمر آن شناسایی کند.
+نام فایل‌ها در یک پوشه و کلیدهای JSX در یک آرایه هدف مشابهی دارند. آنها به ما این امکان را می‌دهند که یک آیتم را بین هم‌نیاکانش به طور منحصر به فرد شناسایی کنیم. یک کلید به‌خوبی انتخاب شده اطلاعات بیشتری نسبت به موقعیت داخل آرایه فراهم می‌کند. حتی اگر _موقعیت_ به دلیل مرتب‌سازی تغییر کند، کلید به ری‌اکت این امکان را می‌دهد که آیتم را در طول عمر آن شناسایی کند.
 
 <Pitfall>
 
-ممکن است وسوسه شوید که از ایندکس آیتم در آرایه به عنوان کلید آن استفاده کنید. در واقع، این همان چیزی است که React در صورتی که شما هیچ کلیدی مشخص نکنید، استفاده خواهد کرد. اما ترتیب رندر کردن آیتم‌ها با گذشت زمان تغییر خواهد کرد اگر یک آیتم وارد شود، حذف شود یا اگر آرایه دوباره مرتب شود. استفاده از شاخص به عنوان کلید اغلب منجر به باگ‌های ظریف و گیج‌کننده می‌شود.
+ممکن است وسوسه شوید که از ایندکس آیتم در آرایه به عنوان کلید آن استفاده کنید. در واقع، این همان چیزی است که ری‌اکت در صورتی که شما هیچ کلیدی مشخص نکنید، استفاده خواهد کرد. اما ترتیب رندر کردن آیتم‌ها با گذشت زمان تغییر خواهد کرد اگر یک آیتم وارد شود، حذف شود یا اگر آرایه دوباره مرتب شود. استفاده از شاخص به عنوان کلید اغلب منجر به باگ‌های ظریف و گیج‌کننده می‌شود.
 
 به طور مشابه، از تولید کلیدها به صورت آنی خودداری کنید، مثلاً با `key={Math.random()}`. این کار باعث می‌شود که کلیدها هیچ وقت بین رندرها مطابقت نداشته باشند و منجر به بازسازی تمامی کامپوننت‌ها و DOM در هر بار رندر شود. این نه تنها کند است، بلکه هر ورودی کاربر در داخل آیتم‌های لیست را نیز از دست می‌دهد. در عوض، از یک شناسه ثابت مبتنی بر داده‌ها استفاده کنید.
 
-توجه داشته باشید که کامپوننت‌های شما `key` را به عنوان یک پراپ دریافت نمی‌کنند. این فقط توسط React به عنوان یک راهنمایی استفاده می‌شود. اگر کامپوننت شما به یک شناسه نیاز دارد، باید آن را به عنوان یک پراپ جداگانه ارسال کنید: `<Profile key={id} userId={id} />`.
+توجه داشته باشید که کامپوننت‌های شما `key` را به عنوان یک پراپ دریافت نمی‌کنند. این فقط توسط ری‌اکت به عنوان یک راهنمایی استفاده می‌شود. اگر کامپوننت شما به یک شناسه نیاز دارد، باید آن را به عنوان یک پراپ جداگانه ارسال کنید: `<Profile key={id} userId={id} />`.
 
 </Pitfall>
 
@@ -431,7 +432,7 @@ const listItems = people.map(person =>
 * چگونه داده‌ها را از کامپوننت‌ها خارج کرده و به ساختارهای داده‌ای مانند آرایه‌ها و اشیاء منتقل کنید.
 * چگونه مجموعه‌هایی از کامپوننت‌های مشابه با استفاده از متد `map()` در جاوااسکریپت ایجاد کنید.
 * چگونه آرایه‌هایی از آیتم‌های فیلتر شده با استفاده از متد `filter()` در جاوااسکریپت بسازید.
-* چرا و چگونه باید برای هر کامپوننت در یک مجموعه `key` را تنظیم کنید تا React بتواند هر کدام را پیگیری کند حتی اگر موقعیت یا داده‌های آن‌ها تغییر کند.
+* چرا و چگونه باید برای هر کامپوننت در یک مجموعه `key` را تنظیم کنید تا ری‌اکت بتواند هر کدام را پیگیری کند حتی اگر موقعیت یا داده‌های آن‌ها تغییر کند.
 
 </Recap>
 
@@ -763,7 +764,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 یک خواننده بسیار دقیق ممکن است متوجه شود که با دو فراخوانی `filter`، حرفه هر شخص را دوبار بررسی می‌کنیم. بررسی یک ویژگی بسیار سریع است، بنابراین در این مثال مشکلی ندارد. اگر منطق شما پیچیده‌تر از این باشد، می‌توانید فراخوانی‌های `filter` را با یک حلقه جایگزین کنید که آرایه‌ها را به صورت دستی می‌سازد و هر شخص را تنها یک بار بررسی می‌کند.
 
-در حقیقت، اگر `people` هیچ‌گاه تغییر نکند، می‌توانید این کد را از کامپوننت خود خارج کنید. از منظر React، چیزی که اهمیت دارد این است که در نهایت یک آرایه از نودهای JSX به آن بدهید. React اهمیتی نمی‌دهد که چگونه این آرایه را تولید کرده‌اید:
+در حقیقت، اگر `people` هیچ‌گاه تغییر نکند، می‌توانید این کد را از کامپوننت خود خارج کنید. از منظر ری‌اکت، چیزی که اهمیت دارد این است که در نهایت یک آرایه از نودهای JSX به آن بدهید. ری‌اکت اهمیتی نمی‌دهد که چگونه این آرایه را تولید کرده‌اید:
 
 <Sandpack>
 
@@ -1207,7 +1208,7 @@ hr {
 
 استفاده از اندیس خط اصلی به عنوان `key` دیگر کار نمی‌کند زیرا اکنون هر جداکننده و پاراگراف در همان آرایه قرار دارند. با این حال، شما می‌توانید به هر کدام یک `key` متمایز بدهید با استفاده از پسوند، مثلاً `key={i + '-text'}`.
 
-به طور جایگزین، می‌توانید مجموعه‌ای از Fragments را رندر کنید که شامل `<hr />` و `<p>...</p>` هستند. با این حال، سینتاکس میانبر `<>...</>` پشتیبانی از ارسال `key` را ندارد، بنابراین باید به صورت صریح از `<Fragment>` استفاده کنید:
+به عنوان جایگزین، می‌توانید مجموعه‌ای از Fragments را رندر کنید که شامل `<hr />` و `<p>...</p>` هستند. با این حال، سینتاکس میانبر `<>...</>` پشتیبانی از ارسال `key` را ندارد، بنابراین باید به صورت صریح از `<Fragment>` استفاده کنید:
 
 <Sandpack>
 
@@ -1253,7 +1254,7 @@ hr {
 
 </Sandpack>
 
-یادآوری: Fragments (که معمولاً به صورت `<> </>` نوشته می‌شوند) به شما این امکان را می‌دهند که گره‌های JSX را بدون افزودن `<div>` اضافی گروه‌بندی کنید!
+یادآوری: Fragments (که معمولاً به صورت `<> </>` نوشته می‌شوند) به شما این امکان را می‌دهند که نودهای JSX را بدون افزودن `<div>` اضافی گروه‌بندی کنید!
 
 </Solution>