adjustments

Author: AhmedBaset

src/content/learn/adding-interactivity.md

@@ -4,27 +4,27 @@ title: إضافة التفاعلية
 
 <Intro>
 
-بعض الاشياء على الشاشة يتم تحديثها للاستجابة لمدخلات (inputs) المستخدم. على سبيل المثال، النقر على معرض صور يغير الصورة المعروضة. فى React، البيانات التي تتغير على مر الزمن تسمى *حالة (state)*. يمكنك إضافة state الى اي مكون (component)، وتحديثها على حسب احتياجك. فى هذا الفصل، سوف تتعلم كيفية كتابة مكونات يمكنها أن تتعامل مع تفاعلات المستخدم، وتحديث حالتها (state)، وعرض مخرجات (outputs) مختلفة على مر الزمن.
+بعض الاشياء على الشاشة يتم تحديثها للاستجابة لمدخلات المستخدم. على سبيل المثال، النقر على معرض صور يغير الصورة المعروضة. فى React، البيانات التي تتغير على مر الزمن تسمى *حالة (state)*. يمكنك إضافة حالة إلى أي مكون، وتحديثها على حسب احتياجك. فى هذا الفصل، سوف تتعلم كيفية كتابة مكونات يمكنها أن تتعامل مع تفاعلات المستخدم، وتحديث حالتها، وعرض مخرجات مختلفة باختلاف المدخلات.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [كيفية التعامل مع الأحداث (events) التي يبدأها المستخدم](/learn/responding-to-events)
-* [كيفية جعل المكونات تتذكر المعلومات باستخدام الحالة (state)](/learn/state-a-components-memory)
+* [كيفية التعامل مع الأحداث التي يبدأها المستخدم](/learn/responding-to-events)
+* [كيفية جعل المكونات تتذكر المعلومات باستخدام الحالة](/learn/state-a-components-memory)
 * [كيفية تحديث واجهة المستخدم في React في مرحلتين](/learn/render-and-commit)
-* [لماذا لا تتحدث الحالة (state) مباشرة بعد تغييرها](/learn/state-as-a-snapshot)
-* [كيفية صف تحديثات عديدة للحالة (state)](/learn/queueing-a-series-of-state-updates)
-* [كيفية تحديث كائن (object) فى حالة (state)](/learn/updating-objects-in-state)
-* [كيفية تحديث مصفوفة (array) فى حالة (state)](/learn/updating-arrays-in-state)
+* [لماذا لا تتحدث الحالة مباشرة بعد تغييرها](/learn/state-as-a-snapshot)
+* [كيفية جدولة تحديثات عديدة للحالة](/learn/queueing-a-series-of-state-updates)
+* [كيفية تحديث كائن فى حالة](/learn/updating-objects-in-state)
+* [كيفية تحديث مصفوفة فى حالة](/learn/updating-arrays-in-state)
 
 </YouWillLearn>
 
 ## الاستجابة الى الأحداث {/*responding-to-events*/}
 
-تتيح لك React إضافة *معالجي الأحداث (event handlers)* إلى JSX الخاص بك. معالجة الأحداث (event handlers) هم الدوال (functions) الخاصة التي سيتم تنشيطها استجابةً لتفاعلات المستخدم مثل النقر، والتحويم، والتركيز على مدخلات النموذج (form)، وما إلى ذلك.
+تتيح لك React إضافة *معالجي الأحداث (event handlers)* إلى JSX الخاص بك. معالجة الأحداث هم الدوال الخاصة التي سيتم تنشيطها استجابةً لتفاعلات المستخدم مثل النقر، والتمرير، والتركيز على مدخلات النموذج، وما إلى ذلك.
 
-المكونات المدمجة (built-in) مثل `<button>` تدعم الأحداث (events) المتاحة فى المتصفح (browser) مثل `onClick`. ومع ذلك، يمكنك أيضًا إنشاء مكوناتك الخاصة وتعطي خصائص معالجة الأحداث (event handler props) الخاصة بها اى اسماء مخصصة للتطبيق على حسب رغبتك.
+المكونات المدمجة مثل `<button>` تدعم الأحداث المتاحة فى المتصفح مثل `onClick`. ومع ذلك، يمكنك أيضًا إنشاء مكوناتك الخاصة وتعطي خصائص معالجة الأحداث الخاصة بها أى اسماء مخصصة للتطبيق على حسب رغبتك.
 
 <Sandpack>
 
@@ -68,15 +68,15 @@ button { margin-right: 10px; }
 
 <LearnMore path="/learn/responding-to-events">
 
-اقرأ **[الاستجابة إلى الأحداث](/learn/responding-to-events)** للتعلم كيفية اضافة معالجى الأحداث (event handlers).
+اقرأ **[الاستجابة إلى الأحداث](/learn/responding-to-events)** لتعلم كيفية إضافة معالجى الأحداث.
 
 </LearnMore>
 
 ## الحالة: ذاكرة المكون {/*state-a-components-memory*/}
 
-غالبًا تحتاج المكونات إلى تغيير محتوى الشاشة نتيجةً لتفاعل المستخدم. الكتابة فى نموذج (form) يجب أن يحدث حقل الإدخال، النقر على "التالي" على دائرة الصور يجب ان يغير الصورة المعروضة، الضغط على "شراء" يضع المنتج فى سلة المشتريات. المكونات تحتاج أن تتذكر اشياء: القيمة الحالية لحقل الإدخال، الصورة الحالية، سلة المشتريات. فى React، هذا النوع من الذاكرة الخاصة بالمكون يسمى "حالة (state)"
+غالبًا تحتاج المكونات إلى تغيير محتوى الشاشة نتيجةً لتفاعل المستخدم. مثلا، الكتابة فى نموذج يجب أن يحدث حقل الإدخال، والنقر على "التالي" على دائرة الصور يجب ان يغير الصورة المعروضة، والضغط على "شراء" يضع المنتج فى سلة المشتريات، وهكذا. المكونات تحتاج أن تتذكر اشياء مثل: القيمة الحالية لحقل الإدخال، الصورة الحالية، سلة المشتريات. فى React، هذا النوع من الذاكرة الخاصة بالمكون يسمى "حالة"
 
-يمكنك إضافة حالة (state) الى مكون عن طريق استخدام خطاف (hook) [`useState`](/reference/react/useState). *الخطاطيف (hooks)* هي دوال خاصة تتيح لك أن تستخدم مميزات React (الحالة واحدة من هذه المميزات). خطاف `useState` يتح لك أن تعرف متغير حالة (state variable). هذا الخطاف يأخذ الحالة بدائية (initial state) ويرجع قيمتين: الحالة الحالية، ودالة معين الحالة (state setter) التي تتيح لك أن تغير الحالة.
+يمكنك إضافة حالة إلى مكون عن طريق استخدام خطاف [`useState`](/reference/react/useState). *الخطاطيف (hooks)* هي دوال خاصة تتيح لك أن تستخدم مميزات React (الحالة واحدة من هذه المميزات). خطاف `useState` يتيح لك أن تعرف متغير حالة. هذا الخطاف يأخذ الحالة المبدأية ويرجع قيمتين: الحالة الحالية، ودالة معين الحالة التي تتيح لك أن تغير الحالة.
 
 ```js
 const [index, setIndex] = useState(0);
@@ -233,15 +233,15 @@ button {
 
 </LearnMore>
 
-## التصيير وإيداع {/*render-and-commit*/}
+## التصيير والإيداع {/*render-and-commit*/}
 
-قبل أن يتم عرض مكوناتك على الشاشة ، يجب أن تُصير بواسطة React. سيساعدك فهم الخطوات في هذه العملية على التفكير في كيفية تنفيذ التعليمات البرمجية الخاصة بك وشرح سلوكها.
+قبل أن يتم عرض مكوناتك على الشاشة، يجب أن تُصير بواسطة React. سيساعدك فهم الخطوات في هذه العملية على التفكير في كيفية تنفيذ التعليمات البرمجية الخاصة بك وشرح سلوكها.
 
-تخيل مكوناتك هي طهاة فى مطبخ، يقومون بتجميع وجبات شهية من مكونات. فى هذا السيناريو، React هى النادل الذي ياخذ الطلبات من العملاء ويقوم باحضارها لهم. هذا العميلة من طلب وعرض وجهة المستخدم تطلب ثلاث خطوات:
+تخيل أن مكوناتك هي طهاة فى مطبخ، يقومون بتجميع وجبات شهية من مكونات. فى هذا السيناريو، React هى النادل الذي ياخذ الطلبات من العملاء ويقوم باحضارها لهم. هذا العميلة من طلب وعرض واجهة المستخدم تطلب ثلاث خطوات:
 
 1. **تحفيز** المُصير (توصيل طلب العشاء الى المطبخ)
 2. **تصيير** المكون (تحضير الطلب فى المطبخ)
-3. **إيداع** الى الـ DOM (وضع الطلب على الطاولة)
+3. **إيداع** إلى الـ DOM (وضع الطلب على الطاولة)
 
 <IllustrationBlock sequential>
   <Illustration caption="تحفيز" alt="React كما لو كانت نادل فى مطعم يقوم باخذ الطلبات من المستخدمين ويقوم باحضارها الى مطبخ المكونات" src="/images/docs/illustrations/i_render-and-commit1.png" />
@@ -255,17 +255,17 @@ button {
 
 </LearnMore>
 
-## الحالة كأنها لقطة {/*state-as-a-snapshot*/}
+## الحالة كأنها نسخة {/*state-as-a-snapshot*/}
 
-على عكس متغيرات JavaScript العادية ، تتصرف حالة React مثل لقطة. لا يؤدي تعيينها إلى تغيير متغير الحالة الذي لديك بالفعل، ولكنه يؤدي بدلاً من ذلك إلى إعادة تصيير. قد يكون هذا مفاجئًا في البداية!
+على عكس متغيرات JavaScript العادية، تتصرف حالة React مثل نسخة. لا يؤدي تعيينها إلى تغيير متغير الحالة الذي لديك بالفعل، ولكنه يؤدي بدلاً من ذلك إلى إعادة تصيير. قد يكون هذا مفاجئًا في البداية!
 
 ```js
 console.log(count);  // 0
 setCount(count + 1); // Request a re-render with 1
 console.log(count);  // Still 0!
 ```
 
-يساعدك هذا السلوك على تجنب الثغرات. هنا تطبيق دردشة صغير. حاول تخمين ما يحدث إذا ضغطت على "إرسال" أولاً *ثم* غير المستلم إلى بوب.من سيظهر اسمه في "التنبيه" بعد خمس ثوانٍ؟
+يساعدك هذا السلوك على تجنب الثغرات. هنا تطبيق دردشة صغير. حاول تخمين ما يحدث إذا ضغطت على "إرسال" أولاً *ثم* غير المستلم إلى بوب. من سيظهر اسمه في "التنبيه" بعد خمس ثوانٍ؟
 
 <Sandpack>
 
@@ -313,11 +313,11 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 <LearnMore path="/learn/state-as-a-snapshot">
 
-اقرأ  **[الحالة كأنها لقطة](/learn/state-as-a-snapshot)** لتتعلم لما تظهر الحالة وكأنها *ثابتة* و لا تتغير داخل معالجي الأحداث.
+اقرأ  **[الحالة كأنها نسخة](/learn/state-as-a-snapshot)** لتتعلم لماذا تظهر الحالة وكأنها *ثابتة* و لا تتغير داخل معالجي الأحداث.
 
 </LearnMore>
 
-## صف سلسلة من تحديثات الحالة {/*queueing-a-series-of-state-updates*/}
+## جدولة سلسلة من تحديثات الحالة {/*queueing-a-series-of-state-updates*/}
 
 هذا المكون فيه ثغرة: النقر على "+3" يزيد النتيجة مرة واحدة فقط.
 
@@ -353,7 +353,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
 
 </Sandpack>
 
-[الحالة كأنها لقطة](/learn/state-as-a-snapshot) يشرح لماذا يحدث ذلك. تعيين الحالة يطلب اعادة تصيير جديدة، لكن لا يغير القيمة فى الكود الذى يعمل بالفعل. لذلك تظل النتيجة "1" بعد استدعاء "setScore(score + 1)".
+[الحالة كأنها لقطة](/learn/state-as-a-snapshot) يشرح لماذا يحدث ذلك. تعيين الحالة يطلب إعادة تصيير جديدة، لكن لا يغير القيمة فى الكود الذى يعمل بالفعل. لذلك تظل النتيجة "1" بعد استدعاء "setScore(score + 1)".
 
 ```js
 console.log(score);  // 0
@@ -365,7 +365,7 @@ setScore(score + 1); // setScore(0 + 1);
 console.log(score);  // 0
 ```
 
-يمكنك ان تصلح ذلك عن طريق تمرير *دالة تحديث* عند تعين الحالة. لاحظ انه عند تغير `setScore(score + 1)` بـ `setScore(s => s + 1)` يصلح زرار الـ "+3". هذا يمنحك ان تصف اكثر من تحديث حالة.
+يمكنك ان تصلح ذلك عن طريق تمرير *دالة تحديث* عند تعين الحالة. لاحظ انه عند تغير `setScore(score + 1)` بـ `setScore(s => s + 1)` يصلح زرار الـ "+3". هذا يمنحك أن تجدول أكثر من تحديث حالة.
 
 <Sandpack>
 
@@ -401,15 +401,15 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
 
 <LearnMore path="/learn/queueing-a-series-of-state-updates">
 
-اقرأ **[صف سلسلة من تحديثات الحالة](/learn/queueing-a-series-of-state-updates)** لتتعلم كيفية صف لسلسلة من تحديثات الحالة.
+اقرأ **[جدولة سلسلة من تحديثات الحالة](/learn/queueing-a-series-of-state-updates)** لتتعلم كيفية جدولة سلسلة من تحديثات الحالة.
 
 </LearnMore>
 
 ## تحديث الكائنات فى الحالة {/*updating-objects-in-state*/}
 
-يمكن ان تحتوى الحالة على اى نوع من قيم JavaScript، وتضمن الكائنات (objects). لكن يجب ان لا تغير الكائنات (objects) والمصفوفات (arrays) التى تحتوى عليها حالة React مباشراً. بدلاً من ذلك عندما تحدث كائن (object) او مصفوفة (array)، تحتاج ان تنشأ نسخة جديدة (او تقوم بعمل نسخة من نسخة موجودة)، بعد ذلك حدث الحالة استخدام النسخة.
+يمكن ان تحتوى الحالة على أى نوع من قيم JavaScript، يشمل ذلك الكائنات. لكن يجب أن لا تغير الكائنات والمصفوفات التى تحتوى عليها حالة React مباشراً. بدلاً من ذلك عندما تحدث كائن أو مصفوفة، تحتاج أن تنشئ نسخة جديدة (أو تقوم بعمل نسخة من نسخة موجودة)، بعد ذلك حدث الحالة باستخدام النسخة.
 
-فى الغالب، سوف تستخدم تركيب النحوى للبسط  `...` لعمل نسخة من الكائنات والمصفوفات التى تريد ان تغيرها. على سبيل المثال، تحديث كائن متداخل يمكن أن تكون مثل ذلك:
+فى الغالب، سوف تستخدم معامل البسط (spread operator) `...` لعمل نسخة من الكائنات والمصفوفات التى تريد أن تغيرها. على سبيل المثال، تحديث كائن متداخل يمكن أن تكون مثل ذلك:
 
 <Sandpack>
 
@@ -466,7 +466,7 @@ export default function Form() {
   return (
     <>
       <label>
-        الأسم:
+        الاسم:
         <input
           value={person.name}
           onChange={handleNameChange}
@@ -517,7 +517,7 @@ img { width: 200px; height: 200px; }
 
 </Sandpack>
 
-لو نسخ الكائنات فى الكود اصبح ممل، يمكنك استخدام مكتبة مثل [Immer](https://github.com/immerjs/use-immer) لتقليل الكود المتكرر:
+لو وجدت نسخ الكائنات فى الكود مملًا، يمكنك استخدام مكتبة مثل [Immer](https://github.com/immerjs/use-immer) لتقليل الكود المتكرر:
 
 <Sandpack>
 
@@ -638,7 +638,7 @@ img { width: 200px; height: 200px; }
 
 ## تحديث المصفوفات فى الحالة {/*updating-arrays-in-state*/}
 
-المصفوفات هي نوع آخر من كائنات JavaScript القابلة للتغيير والتي يمكنك تخزينها في الحالة ويجب التعامل معها على أنها للقراءة فقط. تمامًا كما هو الحال مع الكائنات ، عندما تريد تحديث مصفوفة مخزنة في الحالة ، فأنت بحاجة إلى إنشاء مصفوفة جديدة (أو إنشاء نسخة من واحدة موجودة) ، ثم تعيين الحالة لاستخدام المصفوفة الجديدة:
+المصفوفات هي نوع آخر من كائنات JavaScript القابلة للتغيير والتي يمكنك تخزينها في الحالة ويجب التعامل معها على أنها للقراءة فقط. تمامًا كما هو الحال مع الكائنات، عندما تريد تحديث مصفوفة مخزنة في الحالة، فأنت بحاجة إلى إنشاء مصفوفة جديدة (أو إنشاء نسخة من واحدة موجودة)، ثم تعيين الحالة لاستخدام المصفوفة الجديدة:
 
 <Sandpack>
 
@@ -705,7 +705,7 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-لو نسخ المصفوفات فى الكود اصبح ممل، يمكنك استخدام مكتبة مثل [Immer](https://github.com/immerjs/use-immer) لتقليل الكود المتكرر:
+لو وجدت نسخ المصفوفات فى الكود مملًا، يمكنك استخدام مكتبة مثل [Immer](https://github.com/immerjs/use-immer) لتقليل الكود المتكرر:
 
 <Sandpack>
 
@@ -798,4 +798,4 @@ function ItemList({ artworks, onToggle }) {
 
 إذهب الى [الإستجابة الى الاحداث](/learn/responding-to-events) لتقرأ هذا الفصل صفحة بصفحة!
 
-او، اذا كنت تغير هذه المواضيع بالفعل، لماذا لا تقرأ عن [التحكم فى الحالة](/learn/managing-state)؟
+أو، إذا كنت تفهم هذه المواضيع بالفعل، لماذا لا تقرأ عن [التحكم فى الحالة](/learn/managing-state)؟