To 500

Author: AhmedBaset

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

@@ -296,39 +296,39 @@ export default function Square() {
 }
 ```
 
-قسم المتصفح يجب أن يعرض مربعًا مع X فيه مثل هذا:
+قسم المتصفح يجب أن يعرض زرًا فيه X فيه مثل هذا:
 
 ![مربع يحتوي على X](../images/tutorial/x-filled-square.png)
 
 والآن دعنا نلقي نظرة على الملفات في الكود المبدئي.
 
 #### `App.js` {/*appjs*/}
 
-الكود في `App.js` ينشئ _مكونًا_ (Component). في React, المكون هو جزء من الكود قابل لإعادة الاستخدام يقدم جزءًا من واجهة المستخم. المكونات تستخدم لعرض وإدارة وتحديث عناصر واجهة المستخدم في تطبيقك. دعنا نلقي نظرة على المكون سطرًا بسطر لنرى ما يحدث:
+الكود في `App.js` ينشئ _مكونًا_ (Component). في React، المكون هو جزء من الكود قابل لإعادة الاستخدام يقدم جزءًا من واجهة المستخدم. المكونات تستخدم لعرض وإدارة وتحديث عناصر واجهة المستخدم في تطبيقك. دعنا نلقي نظرة على المكون سطرًا بسطر لنرى ما يحدث:
 
 ```js {1}
 export default function Square() {
   return <button className="square">X</button>;
 }
 ```
 
-السطر الأول يعرّف وظيفة مسماه `Square`. الكلمة الأساسية `export` في JavaScript تجعل هذه الوظيفة متاحة خارج هذا الملف. الكلمة الأساسية `default` تخبر الملفات الأخرى التي تستخدم كودك أنها الوظيفة الرئيسية في ملفك.
+السطر الأول يعرّف دالة اسمها `Square`. الكلمة الأساسية `export` في JavaScript تجعل هذه الوظيفة متاحة خارج هذا الملف. الكلمة الأساسية `default` تخبر الملفات الأخرى التي تستخدم كودك أنها الوظيفة الرئيسية في ملفك.
 
 ```js {2}
 export default function Square() {
   return <button className="square">X</button>;
 }
 ```
 
-السطر الثاني يرجع زرًّا. الكلمة الأساسية `return` في JavaScript تعني أن أي شيء يأتي بعدها يعاد كقيمة لمن يستدعي الوظيفة. `<button>` هو *عنصر JSX*. عنصر JSX هو مزيج من كود JavaScript وعلامات HTML تصف ما تريد عرضه. `className="square"` هو خاصية أو *prop* للزرّ تخبر CSS كيفية تنسيق الزرّ. `X` هو النص المعروض داخل الزرّ. و `</button>` يغلق عنصر JSX ليشير إلى أن أي محتوى يليه لا ينبغي وضعه داخل الزرّ.
+السطر الثاني يرجع زرًّا. الكلمة الأساسية `return` في JavaScript تعني أن أي شيء يأتي بعدها يعاد كقيمة لمن يستدعي الوظيفة. `<button>` هو *عنصر JSX*. عنصر JSX هو مزيج من كود JavaScript وعناصر HTML تصف ما تريد عرضه. `className="square"` هو خاصية أو *prop* للزرّ تخبر CSS كيفية تنسيق الزر. `X` هو النص المعروض داخل الزر. و `</button>` يغلق عنصر JSX ليشير إلى أن أي محتوى يليه لا ينبغي وضعه داخل الزرّ.
 
 #### `styles.css` {/*stylescss*/}
 
-اضغط على الملف المسمى `styles.css` في قسم _Files_ في CodeSandbox. يحدد هذا الملف الأنماط لتطبيق React الخاص بك. _محددان CSS_ الأولان (`*` و `body`) يحددان نمط أجزاء كبيرة من تطبيقك بينما المحدد `.square` يحدد نمط أي مكون يتم تعيين خاصية `className` إلى `square`. في كودك، سيتطابق ذلك مع الزرّ من مكون Square في ملف `App.js`.
+اضغط على الملف المسمى `styles.css` في قسم _الملفات_ في CodeSandbox. يحدد هذا الملف الأنماط لتطبيق React الخاص بك. _محددان CSS_ الأولان (`*` و `body`) يحددان نمط أجزاء كبيرة من تطبيقك بينما المحدد `.square` يحدد نمط أي مكون يتم تعيين خاصية `className` إلى `square`. في كودك، سيتطابق ذلك مع الزرّ من مكون Square في ملف `App.js`.
 
 #### `index.js` {/*indexjs*/}
 
-اضغط على الملف المسمى `index.js` في قسم _Files_ في CodeSandbox. لن تقوم بتحرير هذا الملف خلال الشرح التطبيقي ولكنه هو الجسر بين المكون الذي أنشأته في ملف `App.js` ومتصفح الويب.
+اضغط على الملف المسمى `index.js` في قسم الملفات في CodeSandbox. لن تقوم بتحرير هذا الملف خلال الدرس ولكنه هو الجسر بين المكون الذي أنشأته في ملف `App.js` ومتصفح الويب.
 
 ```jsx
 import { StrictMode } from 'react';
@@ -338,7 +338,7 @@ import './styles.css';
 import App from './App';
 ```
 
-الأسطر من 1 إلى 5 تجمع كل القطع اللازمة معًا:
+الأسطر من 1 إلى 5 تستدعي كل القطع اللازمة معًا:
 
 * React
 * مكتبة React للتحدث مع متصفحات الويب (React DOM)
@@ -350,7 +350,7 @@ import App from './App';
 
 ### بناء اللوحة {/*building-the-board*/}
 
-لنعد إلى `App.js`. هذا هو المكان الذي ستقضي فيه بقية الشرح التطبيقي.
+لنعد إلى `App.js`. هذا هو المكان الذي ستقضي فيه بقية الدرس.
 
 حاليًا اللوحة تحتوي على مربع واحد فقط، ولكنك تحتاج إلى تسعة! إذا حاولت نسخ ولصق المربع لتصنع مربعين مثل هذا:
 
@@ -385,7 +385,7 @@ export default function Square() {
 
 ![زرين مملوئين بـX](../images/tutorial/two-x-filled-squares.png)
 
-رائع! الآن تحتاج فقط إلى نسخ ولصق عدة مرات لإضافة تسعة مربعات و...
+رائع! الآن تحتاج فقط إلى نسخه ولصقه عدة مرات لإضافة تسعة مربعات و...
 
 ![تسع مربعات مملوءة بـX في سطر](../images/tutorial/nine-x-filled-squares.png)