2050

Author: AhmedBaset

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

@@ -1754,9 +1754,9 @@ body {
 
 إذا قمت بتغيير `squares` array، فإن تنفيذ السفر عبر الزمن سيكون صعبًا جدًا.
 
-ومع ذلك لقد استخدمنا `slice()` لإنشاء نسخة جديدة من `squares` array بعد كل خطوة، وعاملناها على أنها لا تتغير. هذا سيسمح لك بتخزين كل نسخة سابقة من `squares` array، والتنقل بين الدورات التي حدثت بالفعل.
+ومع ذلك لقد استخدمنا `slice()` لإنشاء نسخة جديدة من مصفوفة `squares` array بعد كل خطوة، وعاملناها على أنها لا تتغير. هذا سيسمح لك بتخزين كل نسخة سابقة من مصفوفة `squares` array، والتنقل بين اللعبات التي حدثت بالفعل.
 
-ستخزن الدورات السابقة لـ `squares` في مصفوفة أخرى تسمى `history`، والتي ستخزنها كمتغير حالة جديد. تمثل مصفوفة `history` جميع حالات اللوحة، من الخطوة الأولى إلى الخطوة الأخيرة، ولها شكل مثل هذا:
+ستخزن اللعبات السابقة لـ `squares` في مصفوفة أخرى تسمى `history`، والتي ستخزنها كمتغير حالة جديد. تمثل مصفوفة `history` جميع حالات اللوحة، من الخطوة الأولى إلى الخطوة الأخيرة، ولها شكل مثل هذا:
 
 ```jsx
 [
@@ -1774,9 +1774,9 @@ body {
 
 ستنشئ الآن مكونًا جديدًا على المستوى الأعلى يسمى `Game` لعرض قائمة بالخطوات السابقة. هنا ستضع حالة `history` التي تحتوي على تاريخ اللعبة بأكمله.
 
-نقل `history` إلى مكون `Game` سيسمح لك بإزالة حالة `squares` من مكون `Board` الفرعي. تمامًا مثلما "رفعت الحالة لأعلى" من مكون `Square` إلى مكون `Board`، سترفعها الآن من `Board` إلى مكون `Game` على المستوى الأعلى. هذا يمنح مكون `Game` السيطرة الكاملة على بيانات `Board` ويتيح له تعليم `Board` بتقديم الدورات السابقة من `history`.
+نقل `history` إلى مكون `Game` سيسمح لك بإزالة حالة `squares` من مكون `Board` الفرعي. تمامًا مثلما "رفعت الحالة لأعلى" من مكون `Square` إلى مكون `Board`، سترفعها الآن من `Board` إلى مكون `Game` على المستوى الأعلى. هذا يمنح مكون `Game` السيطرة الكاملة على بيانات `Board` ويتيح له `Board` تقديم اللعبات السابقة من `history`.
 
-أولًا، أضف `export default` إلى مكون `Game`. ثم اجعله يقوم بتقديم مكون `Board` وبعض البناء (markup) الإضافي:
+أولًا، أضف `export default` إلى مكون `Game`. ثم اجعله يقوم بتقديم مكون `Board` وبعض الترميز (markup) الإضافي:
 
 ```js {1,5-16}
 function Board() {
@@ -1797,7 +1797,7 @@ export default function Game() {
 }
 ```
 
-تذكر أن تزيل `export default` قبل الإعلان عن `function Board() {...}` وتضيفها قبل الإعلان عن `function Game() {...}`. هذا يخبر ملف `index.js` بأن يستخدم مكون `Game` كمكون رئيسي بدلاً من مكون `Board` الخاص بك. الـ `div` الإضافية التي تعود بها مكون `Game` تقوم بإنشاء مساحة لمعلومات اللعبة التي ستضيفها إلى اللوحة لاحقًا.
+تذكر أن تزيل `export default` قبل الإعلان عن `function Board() {...}` وتضيفها قبل الإعلان عن `function Game() {...}`. هذا يخبر ملف `index.js` بأن يستخدم مكون `Game` كمكون رئيسي بدلاً من مكون `Board` الخاص بك. الـ `div` الإضافية التي يرجعها مكون `Game` تقوم بإنشاء مساحة لمعلومات اللعبة التي ستضيفها إلى اللوحة لاحقًا.
 
 أضف بعض الحالة إلى مكون `Game` لتتبع اللاعب التالي وتاريخ الخطوات:
 
@@ -1848,7 +1848,7 @@ export default function Game() {
 }
 ```
 
-لنجعل مكون `Board` متحكمًّا به بالكامل من خلال الخصائص التي يستقبلها، غيِّر مكون `Board` ليأخذ ثلاث خصائص: `xIsNext` و `squares` ودالة `onPlay` جديدة يمكن لـ `Board` استدعاؤها مع مصفوفة المربعات المُحدَّثة عندما يقوم اللاعب باللعب. ثم، احذف السطرين الأولين من دالة `Board` التي تستدعيان `useState`:
+لنجعل مكون `Board` متحكمًّا به بالكامل من خلال الخصائص التي يستقبلها، عدّل مكون `Board` ليأخذ ثلاث خصائص: `xIsNext` و `squares` ودالة `onPlay` جديدة يمكن لـ `Board` استدعاؤها مع مصفوفة المربعات المُحدَّثة عندما يلعب اللاعب. ثم، احذف السطرين الأولين من دالة `Board` التي تستدعيان `useState`:
 
 ```js {1}
 function Board({ xIsNext, squares, onPlay }) {
@@ -1883,7 +1883,7 @@ function Board({ xIsNext, squares, onPlay }) {
 
 ماذا يجب أن تفعل `handlePlay` عند استدعائها؟ تذكر أن مكون `Board` كان يستدعي `setSquares` مع مصفوفة مُحدَّثة؛ الآن يمرر مصفوفة `squares` المُحدَّثة إلى `onPlay`.
 
-دالة `handlePlay` تحتاج لتعديل حالة `Game` لتشغيل إعادة التقديم (Re-rendering)، لكن ليس لديك دالة `setSquares` يمكنك استدعاؤها بعد الآن - أنت تستخدم الآن متغير الحالة `history` لتخزين هذه المعلومات. ستريد تحديث `history` عن طريق إضافة مصفوفة `squares` المُحدَّثة كإدخال جديد في `history`. كما تريد تبديل `xIsNext`، تمامًا كما كان يفعل `Board`:
+دالة `handlePlay` تحتاج لتعديل حالة `Game` لتشغيل إعادة التصيير (Re-rendering)، لكن ليس لديك دالة `setSquares` يمكنك استدعاؤها بعد الآن - أنت تستخدم الآن متغير الحالة `history` لتخزين هذه المعلومات. ستحتاج تحديث `history` عن طريق إضافة مصفوفة `squares` المُحدَّثة كإدخال جديد في `history`. كما تحتاج تبديل `xIsNext`، تمامًا كما كان يفعل `Board`:
 
 ```js {4-5}
 export default function Game() {
@@ -1896,7 +1896,7 @@ export default function Game() {
 }
 ```
 
-هنا، `[...history, nextSquares]` تنشئ مصفوفة جديدة تحتوي على جميع العناصر في `history`، تليها `nextSquares`. (يمكنك قراءة `...history` [*بناء الجملة*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) كـ "جميع العناصر في `history`".)
+هنا، `[...history, nextSquares]` تنشئ مصفوفة جديدة تحتوي على جميع العناصر في `history`، تليها `nextSquares`. (يمكنك قراءة `...history` [*Spread Operator*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) كـ "جميع العناصر في `history`".)
 
 علي سبيل المثال، إذا كانت `history` هي `[[null,null,null], ["X",null,null]]` وكان `nextSquares` هو `["X",null,"O"]`، فإن المصفوفة الجديدة `[...history, nextSquares]` ستكون `[[null,null,null], ["X",null,null], ["X",null,"O"]]`.