2330

Author: AhmedBaset

src/content/learn/tutorial-tic-tac-toe.md

@@ -2052,17 +2052,17 @@ body {
 
 ### عرض الخطوات السابقة {/*showing-the-past-moves*/}
 
-منذ أن تتبعت تاريخ اللعبة ، يمكنك الآن عرض قائمة بالخطوات السابقة للاعب.
+لأنك تتبعت تاريخ اللعبة، يمكنك الآن عرض قائمة بالخطوات السابقة للاعب.
 
-عناصر React مثل `<button>` هي كائنات JavaScript العادية ؛ يمكنك تمريرها في تطبيقك. لتقديم عناصر متعددة في React ، يمكنك استخدام مصفوفة من عناصر React.
+عناصر React مثل `<button>` هي كائنات JavaScript العادية؛ يمكنك تمريرها في تطبيقك. لتقديم عناصر متعددة في React، يمكنك استخدام مصفوفة من عناصر React.
 
-لديك بالفعل مصفوفة من خطوات `history` في الحالة ، لذلك عليك الآن تحويلها إلى مصفوفة من عناصر React. في JavaScript ، لتحويل مصفوفة واحدة إلى أخرى ، يمكنك استخدام [طريقة `map` للمصفوفة:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+لديك بالفعل مصفوفة من خطوات `history` في الحالة، لذلك عليك الآن تحويلها إلى مصفوفة من عناصر React. في JavaScript، لتحويل مصفوفة واحدة إلى أخرى، يمكنك استخدام [طريقة `map` للمصفوفة:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
 
 ```jsx
 [1, 2, 3].map((x) => x * 2) // [2, 4, 6]
 ```
 
-ستستخدم `map` لتحويل `history` من الخطوات إلى عناصر React تمثل الأزرار على الشاشة ، وعرض قائمة من الأزرار لـ "القفز" إلى الخطوات السابقة. دعنا نمرر `map` على `history` في مكون Game:
+ستستخدم `map` لتحويل `history` من الخطوات إلى عناصر React تمثل الأزرار على الشاشة، وعرض قائمة من الأزرار لـ "القفز" إلى الخطوات السابقة. دعنا نمرر `map` على `history` في مكون Game:
 
 ```js {11-13,15-27,35}
 export default function Game() {
@@ -2110,7 +2110,7 @@ export default function Game() {
 
 ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.``
 
-``تحذير: يجب أن يكون لكل طفل في مصفوفة أو محدد خاصية "مفتاح" فريدة. تحقق من طريقة التصيير لـ `Game`.``
+``تحذير: يجب أن يكون لكل طفل في مصفوفة أو محدد خاصية "مفتاح key" فريدة. تحقق من طريقة التصيير لـ `Game`.``
 
  ستقوم بإصلاح هذا الخطأ في القسم التالي.
 
@@ -2281,15 +2281,15 @@ body {
 
 </Sandpack>
 
-بمجرد أن تمر على مصفوفة `history` بالدالة التي قمت بتمريرها إلى `map`، فإن معامل `squares` argument يمر على كل عنصر من عناصر `history`، ومعامل `move` يمر على كل مسلسل في المصفوفة: `0`، `1`، `2`، …. (في معظم الحالات، ستحتاج إلى عناصر المصفوفة الفعلية، ولكن لتقديم قائمة من الخطوات، ستحتاج فقط إلى الفهارس.)
+بمجرد أن تمر على مصفوفة `history` بالدالة التي قمت بتمريرها إلى `map`، فإن المعامل (argument) `squares` يشير إلى كل عنصر من عناصر `history`، والمعامل `move` يشير إلى كل مسلسل في المصفوفة: `0`، `1`، `2`، …. (في معظم الحالات، ستحتاج إلى عناصر المصفوفة الفعلية، ولكن لتقديم قائمة من الخطوات، ستحتاج فقط إلى الفهارس).
 
-لكل حركة في تاريخ لعبة "تيك تاك تو"، تنشئ عنصر قائمة `<li>` يحتوي على زر `<button>`. يحتوي الزر على معالج `onClick` الذي يستدعي دالة تسمى `jumpTo` (التي لم تقم بتنفيذها بعد).
+لكل حركة في تاريخ لعبة "تيك تاك تو"، تنشئ عنصر قائمة `<li>` يحتوي على زر `<button>`. يحتوي الزر على حدث `onClick` الذي يستدعي دالة تسمى `jumpTo` (التي لم تقم بتنفيذها بعد).
 
-إلى الآن، يجب أن ترى قائمة بالخطوات التي حدثت في اللعبة وخطأ في وحدة تحكم المطورين. دعنا نناقش ما يعنيه خطأ "المفتاح".
+إلى الآن، يجب أن ترى قائمة بالخطوات التي حدثت في اللعبة وخطأ في وحدة التحكم console. دعنا نناقش ما يعنيه خطأ "المفتاح".
 
 ### اختيار مفتاح {/*اختيار-مفتاح*/}
 
-عندما تعرض قائمة، تخزن React بعض المعلومات عن كل عنصر في القائمة التي تم عرضها. عندما تقوم بتحديث قائمة، يحتاج React إلى تحديد ما تغير. يمكنك أن تكون قد أضفت، أزلت، رتبت أو عدلت عناصر القائمة.
+عندما تعرض قائمة، تخزن React بعض المعلومات عن كل عنصر في القائمة التي تم عرضها. عندما تقوم بتحديث قائمة، يحتاج React إلى تحديد ما تغيّر. ربما تكون أضفت، أو أزلت، أو رتبت أو عدلت عناصر القائمة.
 
 تخيل الانتقال من
 
@@ -2306,9 +2306,9 @@ body {
 <li>عصام: 5 مهمات متبقية</li>
 ```
 
-بالإضافة إلى العدادات المحدثة، فإن الإنسان الذي يقرأ هذا سيقول على الأرجح أنك قمت بتبديل ترتيب عصام وهند، وأضفت سعيد بينهما، ومع ذلك React هو برنامج حاسوبي ولا يمكنه معرفة ما كنت تقصده، لذا تحتاج إلى تحديد خاصية مفتاحية _key_ لكل عنصر في القائمة للتمييز بين كل عنصر في القائمة وإخوته. إذا كانت بياناتك من قاعدة بيانات، فيمكن استخدام معرفات قاعدة بيانات (ID). الـid الخاص بهند وعصام وسعيد.
+بالإضافة إلى العدادات المحدثة، فإن الإنسان الذي يقرأ هذا سيقول على الأرجح أنك قمت بتبديل ترتيب عصام وهند، وأضفت سعيد بينهما، ومع ذلك React هو برنامج حاسوبي ولا يمكنه معرفة ما كنت تقصده، لذا تحتاج إلى تحديد خاصية مفتاحية _key_ لكل عنصر في القائمة للتمييز بين كل عنصر في القائمة وإخوته. إذا كانت بياناتك من قاعدة بيانات، فيمكن استخدام معرفات قاعدة بيانات الفريدة (ID). أقصد المعرف الخاص بهند وعصام وسعيد.
 
-عندما لا يكون لديك معرفات مستقرة لتصيير العناصر، ربما تستخدم المسلسل كمفتاح كآخر محاولة:
+عندما لا يكون لديك معرفات مستقرة لتصيير العناصر، ربما تستخدم المسلسل كمفتاح كحل أخير:
 
 ```js {1}
 <li key={user.id}>
@@ -2318,11 +2318,11 @@ body {
 
 عندما يتم إعادة تصيير القائمة، تأخد React كل مفتاح عنصر وتبحث في القائمة السابقة عن عنصر متطابق. إذا كانت القائمة الحالية تحتوي على مفتاح لم يكن موجودًا من قبل، فإن React ينشئ عنصرًا. إذا كانت القائمة الحالية تفتقد مفتاحًا كان موجودًا في القائمةالسابقة فإن React تزيل المكون السابق. إذا تطابق مفتاحان، فإن المكون المقابل يتم نقله.
 
-تخبر المفاتيح React عن هوية كل مكون، مما يسمح لـ React بالحفاظ على الحالة بين إعادة العرض. إذا تغير مفتاح المكون، فإن المكون سيتم تدميره وإعادة إنشائه مع حالة جديدة.
+تخبر المفاتيح React عن هوية كل مكون، مما يسمح لـ React الحفاظ على الحالة بين إعادة التصيير. إذا تغير مفتاح المكون، فإن المكون سيتم تدميره وإعادة إنشائه مع حالة جديدة.
 
 `key` هو خاصية محجوزة في React. عند إنشاء عنصر، تقوم React بإستخراج خاصية `key` وتخزينها مباشرة على العنصر المعاد. على الرغم من أن `key` قد يبدو كما لو أنه يمر كخاصية، إلا أن React تستخدم `key` تلقائيًا لتحديد أي مكونات يجب تحديثها. لا يوجد طريقة للمكون لمعرفة ما هو `key` الذي حدده المكون الأب.
 
-**نوصي بشدة تعيين مفاتيح مناسبة كلما قمت ببناء قوائم ديناميكية.** إذا لم يكن لديك مفتاح مناسب، قد ترغب في إعادة هيكلة بياناتك بحيث تفعل ذلك.
+**نوصي بشدة تعيين مفاتيح مناسبة كلما قمت ببناء قوائم ديناميكية.** إذا لم يكن لديك مفتاح مناسب، قد ترغب في إعادة هيكلة بياناتك ليكون لديك معرف فريد.
 
 إذا لم يتم تحديد مفتاح، فإن React ستقوم بإرجاع خطأ واستخدام مؤشر المصفوفة كمفتاح افتراضي. استخدام مؤشر المصفوفة كمفتاح يسبب مشاكل عند محاولة إعادة ترتيب عناصر القائمة أو إضافة/إزالة عناصر للقائمة. تمرير `key={i}` لا تظهر خطأً ولكن لها نفس المشاكل مثل مسلسلات المصفوفة ولا يوصى بها في معظم الحالات.