to 1340

Author: AhmedBaset

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

@@ -730,17 +730,17 @@ function Square({ value }) {
 }
 ```
 
-إذا ضغطت على مربع الآن، يجب أن ترى log في علامة التبويب _Console_ في أسفل قسم _Browser_ في CodeSandbox يقول `"ضُغطت!"`. الضغط على المربع أكثر من مرة سيؤدي إلى طباعة `"ضُغطت!"` مرة أخرى. تكرار `console.log("ضُغطت!")` بنفس الرسالة لن ينشئ سطرًا جديدًا في الـ console. بدلاً من ذلك، سترى عدادًا متزايدًا بجانب أول طباعة `"ضُغطت!"` لديك.
+إذا ضغطت على مربع الآن، يجب أن ترى رسالة في علامة التبويب _Console_ في أسفل قسم _Browser_ في CodeSandbox يقول `"ضُغطت!"`. الضغط على المربع أكثر من مرة سيؤدي إلى طباعة `"ضُغطت!"` مرة أخرى. تكرار `console.log("ضُغطت!")` بنفس الرسالة لن ينشئ سطرًا جديدًا في الـ console. بدلاً من ذلك، سترى عدادًا متزايدًا بجانب أول طباعة `"ضُغطت!"` لديك.
 
 <Note>
 
-إن كنت تتابع هذا الشرح التطبيقي باستخدام بيئة التطوير المحلية الخاصة بك، فستحتاج إلى فتح Console المتصفح الخاص بك. على سبيل المثال، إذا كنت تستخدم متصفح Chrome، يمكنك عرض Console باستخدام اختصار لوحة المفاتيح **Shift + Ctrl + J** (على نظامي التشغيل Windows/Linux) أو **Option + ⌘ + J** (على نظام التشغيل macOS).
+إن كنت تتابع هذا الشرح باستخدام بيئة التطوير المحلية الخاصة بك، فستحتاج إلى فتح Console المتصفح الخاص بك. على سبيل المثال، إذا كنت تستخدم متصفح Chrome، يمكنك عرض Console باستخدام اختصار لوحة المفاتيح **Shift + Ctrl + J** (على نظامي التشغيل Windows/Linux) أو **Option + ⌘ + J** (على نظام التشغيل macOS).
 
 </Note>
 
-كخطوة تالية، تريد أن يتذكر مكون `Square` أنه تم النقر عليه، وملءه بعلامة "X". لـ "تذكر" الأشياء، يستخدم المكونات *الحالة*.
+كخطوة تالية، تريد أن يتذكر مكون `Square` أنه تم النقر عليه، وكتابة "X" فيه. "لتذكر" الأشياء، يستخدم المكونات *الحالة (State)*.
 
-تقدم React دالة خاصة تسمى `useState` يمكنك استدعاؤها من مكونك لتمكينه من "تذكر" الأشياء. دعنا نخزن القيمة الحالية لـ `Square` في الحالة، ونغيرها عند النقر على `Square`.
+تقدم React دالة خاصة تسمى `useState` يمكنك استدعاؤها من مكونك لتمكنه "تذكر" الأشياء. دعنا نخزن القيمة الحالية لـ `Square` في الحالة، ونغيرها عند النقر على `Square`.
 
 استيراد `useState` في أعلى الملف. قم بإزالة خاصية `value` من مكون `Square`. بدلاً من ذلك، أضف سطرًا جديدًا في بداية `Square` يستدعي `useState`. اجعله يعيد متغير حالة يسمى `value`:
 
@@ -905,9 +905,9 @@ body {
 
 </Sandpack>
 
-### أدوات مطوري React (React DevTools) {/*react-developer-tools*/}
+### أدوات مطور React (React DevTools) {/*react-developer-tools*/}
 
-أدوات مطوري React تتيح لك التحقق من الخصائص والحالة لمكونات React الخاصة بك. يمكنك العثور على علامة تبويب أدوات مطوري React في أسفل قسم المتصفح في CodeSandbox:
+أدوات مطور React تتيح لك التحقق من الخصائص والحالة لمكونات React الخاصة بك. يمكنك العثور على علامة تبويب أدوات مطوري React في أسفل قسم المتصفح في CodeSandbox:
 
 ![أدوات مطوري React في CodeSandbox](../images/tutorial/codesandbox-devtools.png)
 
@@ -931,7 +931,7 @@ body {
 
 كيف ستحقق ذلك؟ في البداية، قد تخمن أن `Board` يحتاج إلى "سؤال" كل `Square` عن حالته. على الرغم من أن هذا النهج ممكن تقنيًا في React، إلا أننا ننصح بعدم استخدامه لأن الكود يصبح من الصعب فهمه، وعرضة للأخطاء (bugs)، وصعب التعديل. بدلاً من ذلك، أفضل نهج هو تخزين حالة اللعبة في مكون `Board` الأصل بدلاً من كل `Square`. يمكن لمكون `Board` أن يخبر كل `Square` ما يجب عليه عرضه عن طريق تمرير خاصية (prop)، مثلما فعلت عندما قمت بتمرير رقم إلى كل `Square`.
 
-**لجمع بيانات من أطفال (children)، أو لجعل مكونين طفلين يتواصلان مع بعضهما البعض، قم بتعريف الحالة المشتركة في مكونهما الأصل بدلاً من ذلك. يمكن لمكون الأصل أن يمرر هذه الحالة إلى الأطفال عن طريق خصائص (props). هذا يحافظ على تزامن مكونات الأطفال مع بعضها البعض ومع مكونها الأصل.**
+**لجمع بيانات من أطفال (children)، أو لجعل مكونين طفلين يتواصلان مع بعضهما البعض، قم بتعريف الحالة المشتركة في مكونهما الأصل بدلاً من ذلك. يمكن للمكون الأصلي أن يمرر هذه الحالة إلى الأطفال عن طريق الخصائص (props). هذا يحافظ على تزامن مكونات الأطفال مع بعضها البعض ومع مكونها الأصل.**
 
 رفع الحالة إلى مكون أصل (lifting state up) هو أمر شائع عند إعادة تنظيم مكونات React.
 
@@ -1079,7 +1079,7 @@ body {
 
 </Sandpack>
 
-كل مربع سيتلقة خاصية `value` التي ستكون إما `'X'` أو `'O'` أو `null` للمربعات الفارغة.
+كل مربع سيتلقى خاصية `value` التي ستكون إما `'X'` أو `'O'` أو `null` للمربعات الفارغة.
 
 لاحقًا ستغير ما يحدث عند النقر على `Square`. مكون `Board` الآن يحتفظ بالمربعات المملوءة. ستحتاج إلى إيجاد طريقة لتحديث حالة `Board`. لأن الحالة هي خاصة بالمكون الذي يحددها، لا يمكنك تحديث حالة `Board` مباشرة من `Square`.
 
@@ -1211,9 +1211,9 @@ export default function Board() {
 }
 ```
 
-لاحظ الصيغة الجديدة `() =>`. هنا، `() => handleClick(0)` هي *دالة سهم* (Arrow Function)، وهي طريقة أقصر لتعريف الدوال. عندما ينقر المربع، سيتم تشغيل الكود بعد السهم `=>`، والذي سيستدعي `handleClick(0)`.
+لاحظ الصيغة الجديدة `() =>`. هنا، `() => handleClick(0)` هي *دالة سهمية* (Arrow Function)، وهي طريقة أقصر لتعريف الدوال. عندما ينقر المربع، سيتم تشغيل الكود بعد السهم `=>`، والذي سيستدعي `handleClick(0)`.
 
-الآن تحتاج إلى تعديل المربعات الثمانية الأخرى لاستدعاء `handleClick` من الدوال السهم التي تمررها. تأكد من أن الوسيط لكل استدعاء لـ `handleClick` يتوافق مع فهرس المربع الصحيح:
+الآن تحتاج إلى تعديل المربعات الثمانية الأخرى لاستدعاء `handleClick` من الدوال السهمية التي تمررها. تأكد من أن الوسيط لكل استدعاء لـ `handleClick` يتوافق مع فهرس المربع الصحيح:
 
 ```js {6-8,11-13,16-18}
 export default function Board() {