enhacements

Author: AhmedBaset

src/content/learn/rendering-lists.md

@@ -397,33 +397,31 @@ const listItems = people.map(person =>
 
 </DeepDive>
 
-// 🔴🔴 Reviewed to here 🔴🔴
-
 ### من أين تحصل على `key` الخاص بك {/*where-to-get-your-key*/}
 
 المصادر المخلتفة للبيانات تقدم مصادر مختلفة للمفاتيح:
 
-* **البيانات من قواعد البيانات:** إذا كانت بياناتك قادمة من قاعدة بيانات، يمكنك استخدام keys/IDs الخاصة بقاعدة البيانات, والتي هي فريدة بطبيعتها.
-* **البيانات التي تم توليدها محلياً:** إذا كانت بياناتك مولدة ومستمرة محلياً (الملاحظات في تطبيق تدوين الملاحظات)، تستخدم عداد متزايد، [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) أو حزمة مثل [`uuid`](https://www.npmjs.com/package/uuid) عندما تنشأ العناصر.
+* **البيانات من قواعد البيانات:** إذا كانت بياناتك قادمة من قاعدة بيانات، يمكنك استخدام المفاتيح أو المعرفات الفريدة التي تقدمها قواعد البيانات.
+* **البيانات التي تم توليدها محلياً:** إذا كانت بياناتك مولدة ومستمرة محلياً (مثل: الملاحظات في تطبيق تدوين الملاحظات)، استخدم عداد متزايد، [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) أو حزمة مثل [`uuid`](https://www.npmjs.com/package/uuid) عندما تنشأ العناصر.
 
 ### قواعد المفاتيح {/*rules-of-keys*/}
 
-* **المفاتيح يجب أن تكون فريدة بين الأشقاء.** على أي حال، إنه من الصحيح استخدام المفاتيح نفسها لعقد JSX في مصفوفات _مختلفة_.
-* **المفاتيح لا يجب أن تتغير** أو إحباط أهدافها! لا تقم بتوليدهم خلال التصيير.
+* **المفاتيح يجب أن تكون فريدة بين الأشقاء.** على أي حال،ورغم ذلك، لا مشكلة في استخدام المفاتيح نفسها لعناصر JSX في مصفوفات _مختلفة_.
+* **يجب ألا تتغير المفاتيح** أو يتم إحباط أهدافها! لا تقم بتوليدهم أثناء التصيير.
 
-### لماذا تحتاج React مفاتيح? {/*whخy-does-react-need-keys*/}
+### لماذا تحتاج React مفاتيح? {/*why-does-react-need-keys*/}
 
 تخيل بأنّ الملفات على حاسوبك لا تمتلك أسماء. بدلاً من ذلك أنت ترجع إليهم عن طريق ترتيبهم -- الملف الأول، الملف الثاني، إلخ. يمكنك اعتياد ذلك، لكن بمجرد حذفك لملف، يمكن أن يصبح الأمر غير مقبول. الملف الثاني يصبح الملف الاول، الملف الثالث يصبح الملف الثاني، وهكذا.
 
-أسماء الملفات في مجلد ومفاتيح JSX في مصفوفة تخدم نفس الهدف. إنها تمكننا من تحديد عنصر بشكل فريد بين أشقائه. الاختيار الجيد للمفتاح يقدم معلومات أكثر من الموضع خلال المصفوفة. وحتى لو تغير _الموضع_ بسبب إعادة الترتيب، ال `key` يمكن React من تحديد العنصر خلال حياته.
+أسماء الملفات في مجلد ومفاتيح JSX في مصفوفة تخدم نفس الهدف. إنها تمكننا من تحديد عنصر بشكل فريد بين أشقائه. الاختيار الجيد للمفتاح يقدم معلومات أكثر من الموضع خلال المصفوفة. وحتى لو تغير _الموضع_ بسبب إعادة الترتيب، ال `key` يمكن React من تحديد العنصر أثناء وجوده.
 
 <Pitfall>
 
-يمكن أن يكون استخدام فهرس العنصر في مصفوفة كمفتاح له مغرياً . في الحقيقة، ذلك ما ستستخدمه React إذا لم تحدد `key` على الإطلاق. لكن الترتيب المستخدم في تصيير العناصر سوف يتغير بمرور الوقت إذا تم إدخال عنصر، حذفه أو إذا تغير ترتيب المصفوفة. استخدام الفهرس كمفتاح سوف يؤدي إلى مشاكل خفية ومرفوضة في الكود.
+يمكن أن يكون استخدام فهرس العنصر (index) في مصفوفة كمفتاح له مغرياً . في الحقيقة، ذلك ما ستستخدمه React إذا لم تحدد `key` على الإطلاق. لكن الترتيب المستخدم في تصيير العناصر سوف يتغير بمرور الوقت إذا تم إدخال عنصر، أو حذفه أو إذا تغير ترتيب المصفوفة. استخدام الفهرس كمفتاح يؤدي إلى مشاكل خفية ومرفوضة في الكود.
 
-بالمثل لا تقلل من أهمية المفاتيخ عند توليدها، كاستخدام `key={Math.random()}`. هذا سيجعل المفاتيح غير متطابقة أبداً بين التصييرات، قائدة بذلك كل مكوناتك وDOM إلى أن يعاد إنشاؤها في كل مرة. ليس هذا بطيئاً فقط، بل سيفقد أي بيانات مدخلة من المستخدم داخل عناصر القائمة أيضاً، استخدم ID مستقراً معتمداً على البيانات.
+بالمثل لا تقلل من أهمية المفاتيخ عند توليدها، كاستخدام `key={Math.random()}`. هذا سيجعل المفاتيح غير متطابقة أبداً بين التصييرات، مؤديةً بذلك كل مكوناتك وDOM إلى أن يعاد إنشاؤها في كل مرة. ليس هذا بطيئاً فقط، بل سيفقد أي بيانات مدخلة من المستخدم داخل عناصر القائمة أيضاً، استخدم ID مستقراً معتمداً على البيانات.
 
-لاحظ أن مكوناتك لا تتلقى `key` كخاصية prop. إنها تستخدم فقط كتلميح ل React نفسه. إذا احتاج مكونك ID، عليك تمريره كخاصية منفصلة: `<Profile key={id} userId={id} />`.
+لاحظ أن مكوناتك لا تتلقى `key` كخاصية (prop). إنها تستخدم فقط كتلميح ل React نفسه. إذا احتاج مكونك ID، عليك تمريره كخاصية منفصلة: `<Profile key={id} userId={id} />`.
 
 </Pitfall>
 
@@ -433,7 +431,7 @@ const listItems = people.map(person =>
 
 * كيف تحول البيانات إلى مكونات أو إلى هياكل مثل المصفوفات والكائنات.
 * كيف تولد مجموعات من المكونات المتشابهة باستخدام دالة JavaScript `map()`.
-* كيف تنشأ مصفوفات من عناصر مصفّاة باستخدام دالة JavaScript `filter()`.
+* كيف تنشئ مصفوفات من عناصر مصفّاة باستخدام دالة JavaScript `filter()`.
 * لماذا وكيف تضبط ال `key` لكل مكون في مجموعة بطريقة تستطيع فيها React أن تتعقب كل واحد منهم حتى لو تغيرت بياناتهم ومواضعهم.
 
 </Recap>