Update describing-the-ui.md

Author: AhmedBaset

src/content/learn/describing-the-ui.md

@@ -316,7 +316,7 @@ export function getImageUrl(person, size = 's') {
 
 ## العرض المشروط (Conditional rendering) {/*conditional-rendering*/}
 
-غالبًا ما يحتاج مكوناتك إلى عرض أشياء مختلفة تعتمد على شروط مختلفة. في React، يمكنك عرض JSX بشكل مشروط باستخدام صيغ مشابة إلى JavaScript مثل التعبيرات الشرطية `if` والمعاملات `&&` و `? :`.
+غالبًا ما تحتاج مكوناتك إلى عرض أشياء مختلفة تعتمد على شروط مختلفة. في React، يمكنك عرض JSX حسب شروط باستخدام صيغ شبيهه بـ JavaScript مثل التعبيرات الشرطية `if` والمعاملات `&&` و `condition ? if true : else`.
 
 في هذا المثال،  معامل `&&` في JavaScript يستخدم لعرض علامة صح بشكل مشروط:
 
@@ -364,7 +364,7 @@ export default function PackingList() {
 
 ## عرض القوائم (lists) {/*rendering-lists*/}
 
-غالبًا ما سترغب في عرض عدة مكونات مشابهة من مجموعة البيانات. يمكن استخدام `filter()` و `map()` في JavaScript مع React لتصفية وتحويل مصفوفة البيانات الخاصة بك إلى مصفوفة من المكونات.
+غالبًا ما سترغب في عرض عدة مكونات متشابهة من مجموعة البيانات. يمكن استخدام `filter()` و `map()` في JavaScript مع React لتصفية وتحويل مصفوفة البيانات الخاصة بك إلى مصفوفة من المكونات.
 
 يتعين عليك تحديد مفتاح `key` لكل عنصر في المصفوفة. عادةً سترغب في استخدام ID من قاعدة البيانات كمفتاح `key`. يتيح المفتاح `key` إلى React أن تتبع مكان كل عنصر في القائمة حتى لو تغيرت القائمة.
 
@@ -458,26 +458,26 @@ h2 { font-size: 20px; }
 
 <LearnMore path="/learn/rendering-lists">
 
-اقرأ **[عرض القوائم (lists)](/learn/rendering-lists)** لتتعلم عن  كيفية عرض قوائم من المكونات، وكيفية اختيار مفتاح.
+اقرأ **[عرض القوائم (lists)](/learn/rendering-lists)** لتتعلم  كيفية عرض قوائم من المكونات، وكيفية اختيار مفتاح.
 
 </LearnMore>
 
-## إبقاء المكونات نقية {/*keeping-components-pure*/}
+## الحفاظ على المكونات نقية {/*keeping-components-pure*/}
 
 بعض دوال JavaScript *نقية*. الدالة النقية:
 
-* **تهتم بشؤونها فقط.** لا تقم بتغيير أي كائنات (objects) أو متغيرات (variables) كانت موجودة من قبل عند استدعائها.
+* **تهتم بشؤونها فقط.** لا تغيّر أي كائنات (objects) أو متغيرات (variables) كانت موجودة من قبل عند استدعائها.
 * **نفس المدخلات، نفس المخرجات.** يجب أن تعيد الدالة النقية دائمًا نفس النتيجة عندما تمرر لها نفس المُدخلات.
 
-بواسطة كتابة مكوناتك بشكل صارم، حيث تكون دوالا نقية فقط، يمكنك تجنب فئة كاملة من الأخطاء الصعبة التفسير والسلوك غير المتوقع مع تطور قاعدة الشفرة (codebase) الخاصّة بك. هنا مثال على مكوّن غير نقي:
+من خلال كتابة مكوناتك بشكل صارم، حيث تكون دوالا نقية فقط، يمكنك تجنب فئة كاملة من الأخطاء صعبة التفسير والسلوك غير المتوقع مع تطور قاعدة الكود (codebase) الخاصّة بك. هنا مثال على مكوّن غير نقي:
 
 <Sandpack>
 
 ```js
 let guest = 0;
 
 function Cup() {
-  // Bad: changing a preexisting variable!
+  // سيء: تعديل متغير موجود مسبقًا
   guest = guest + 1;
   return <h2>Tea cup for guest #{guest}</h2>;
 }
@@ -519,7 +519,7 @@ export default function TeaSet() {
 
 <LearnMore path="/learn/keeping-components-pure">
 
-اقرأ **[إبقاء المكونات نقية](/learn/keeping-components-pure)** لتتعلم كيفية كتابة المكونات نقية ودوال متنبئة.
+اقرأ **[الحفاظ على المكونات نقية](/learn/keeping-components-pure)** لتتعلم كيفية كتابة مكونات نقية ودوال متنبئة.
 
 </LearnMore>