fixing typos & rephrasing

Author: tmtm8976

src/content/learn/keeping-components-pure.md

@@ -4,7 +4,7 @@ title: الحفاظ على نقاء المكوّنات
 
 <Intro>
 
-بعض دوال JavaScript *نقية.* الدوال النقية (pure functions) تقوم فقط بإجراء حساب ولا شيء اكثر. من خلال كتابة مكوّناتك (components)  بصرامة كدوال نقية، يمكنك تجنب صنف كامل من الأخطاء (bugs)  المحيرة والسلوك غير المتوقع مع نمو قاعدة التعليمات البرمجية (codebase)  الخاصة بك. للحصول على هذه الفوائد، هناك بعض القواعد التي يجب عليك اتباعها.
+بعض دوال JavaScript *نقية.* الدوال النقية تقوم فقط بإجراء حساب ولا شيء اكثر. من خلال كتابة مكوّناتك بصرامة كدوال نقية، يمكنك تجنب صنف كامل من  الأخطاء المحيرة والسلوك غير المتوقع مع نمو قاعدة التعليمات البرمجية الخاصة بك. للحصول على هذه الفوائد، هناك بعض القواعد التي يجب عليك اتباعها.
 
 
 </Intro>
@@ -22,7 +22,7 @@ title: الحفاظ على نقاء المكوّنات
 في علم الحاسب (وخاصة عالم البرمجة الوظيفية (functional programming)), [الدالة النقية](https://wikipedia.org/wiki/Pure_function) هي دالة بالخواص التالية:
 
 * **تهتم بشؤونها.** لا تغير أي كائنات أو متغيرات كانت موجودة قبل استدعائها.
-* **نفس الدخل، نفس الخرج** بإعطاء نفس المدخلات ، يجب أن تُرجع الدالة النقية نفس النتيجة دائمًا.
+* **نفس المدخلات تؤدي لنفس المخرجات** بإعطاء نفس المدخلات ، يجب أن تُرجع الدالة النقية نفس النتيجة دائمًا.
 
 قد تكون بالفعل على دراية بمثال واحد من الوظائف النقية: المعادلات في الرياضيات.
 
@@ -69,7 +69,7 @@ export default function App() {
       <h1>وصفة شاي متبل</h1>
       <h2>لاثنين</h2>
       <Recipe drinkers={2} />
-      <h2>لتجمًع</h2>
+      <h2>لتجمّع</h2>
       <Recipe drinkers={4} />
     </section>
   );
@@ -78,13 +78,13 @@ export default function App() {
 
 </Sandpack>
 
-عند تمرير `drinkers={2}` إلى `Recipe`, ستعيد JSX تحتوي على `2 cups of water`. دائمًا. 
+عند تمرير `drinkers={2}` إلى `Recipe`, ستعيد JSX تحتوي على `2 اكواب من الماء`. دائمًا. 
 
-إذا قمت بتمرير `drinkers={4}`, ستعيد JSX تحتوي على  `4 cups of water`. دائمًا.
+إذا قمت بتمرير `drinkers={4}`, ستعيد JSX تحتوي على  `4 اكواب من الماء`. دائمًا.
 
 تمامًا مثل الصيغ الرياضية.
 
-يمكنك التفكير في المكوّنات الخاصة بك كوصفات: إذا اتبعتها ولم تقم بإدخال مكوّنات جديدة أثناء عملية الطهي، ستحصل على نفس الطبق في كل مرة. هذا "الطبق" هو ال JSX الذي يقدمه المكوّن لReact لل[تصيير.](/learn/render-and-commit)
+يمكنك التفكير في المكوّنات الخاصة بك كوصفات: إذا اتبعتها ولم تقم بإدخال مكوّنات جديدة أثناء عملية الطهي، ستحصل على نفس الطبق في كل مرة. هذا "الطبق" هو ال JSX الذي يقدمه المكوّن لReact [للتصيير.](/learn/render-and-commit)
 
 <Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" />
 
@@ -94,7 +94,7 @@ export default function App() {
 
 
 
-فيما يلي مكوّن يخالف هذا القاعدة:
+فيما يلي مكوّن يخالف هذه القاعدة:
 
 <Sandpack>
 
@@ -120,7 +120,7 @@ export default function TeaSet() {
 
 </Sandpack>
 
-يقوم هذا المكوّن بقراءة وكتابة متغير `guest` المعلن خارجه. هذا يعني أن **استدعاء هذا المكوّن مرات متعددة سينتج** وما هو أكثر من ذلك ، إذا قرأت المكوّنات الأخرى `guest`, سوف تنتج JSX مختلف , أيضًا ، اعتمادًا على متى تم تصييرها! وهذا لا يمكن توقعه
+يقوم هذا المكوّن بقراءة وكتابة متغير `guest` المعلن خارجه. هذا يعني أن **استدعاء هذا المكوّن مرات متعددة سينتج JSX مختلف** بل وأكثر من ذلك ، إذا قرأت المكوّنات الأخرى `guest`, سوف تنتج JSX مختلف , أيضًا ، اعتمادًا على متى تم تصييرها! وهذا لا يمكن توقعه
 
 نعود إلى صيغتنا السابقة <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>, الآن حتى إذا كان <Math><MathI>x</MathI> = 2</Math>, لا يمكننا الاعتماد على أن <Math><MathI>y</MathI> = 4</Math>. قد تفشل اختباراتنا ، وقد يكون, المستخدمون مشوشين, وقد تسقط الطائرات من السماء - يمكنك رؤية كيف يمكن أن يؤدي ذلك إلى خلل مربك!
 
@@ -160,17 +160,17 @@ export default function TeaSet() {
 
 React يوفر "وضعًا صارمًا"(Strict Mode) يقوم فيه باستدعاء دالة كل مكوّن مرتين أثناء التطوير. **من خلال استدعاء وظائف المكوّن مرتين، يساعد الوضع الصارم في العثور على المكوّنات التي تخالف هذه القواعد.**
 
-لاحظ كيف عرض المثال الأصلي "Guest #2", "Guest #4", و "Guest #6" بدلاً من "Guest #1", "Guest #2", و "Guest #3". كانت الدالة الأصلية غير نقية، لذا تعطلت عند استدعاؤها مرتين. ولكن الإصدار النقي المُصلح يعمل حتى إذا تم استدعاء الوظيفة مرتين. **الدوال النقية تقوم بالحساب فقط، لذلك لن يتغير أي شيء عند استدعائها مرتين**--تمامًا مثل استدعاء `double(2)` مرتين لن يتغير ما يتم إرجاعه، وحل <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> مرتين لن يغير ما هو <MathI>y</MathI>. نفس المدخلات، نفس المخرجات. دائمًا.
+لاحظ كيف عرض المثال الأصلي "Guest #2", "Guest #4", و "Guest #6" بدلاً من "Guest #1", "Guest #2", و "Guest #3". كانت الدالة الأصلية غير نقية، لذا تعطلت عند استدعاءها مرتين. ولكن الإصدار النقي المُصلح يعمل حتى إذا تم استدعاء الوظيفة مرتين. **الدوال النقية تقوم بالحساب فقط، لذلك لن يتغير أي شيء عند استدعائها مرتين**--تمامًا مثل استدعاء `double(2)` مرتين لن يتغير ما يتم إرجاعه، وحل <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> مرتين لن يغير ما هو <MathI>y</MathI>. نفس المدخلات، نفس المخرجات. دائمًا.
 
-الوضع الصارم لا يؤثر في الإنتاج، لذلك لن يبطئ التطبيق لمستخدمينك. يمكنك الانضمام إلى الوضع الصارم, عن طريق تغليف عنصر الجذر(root component) الخاص بك في `<React.StrictMode>`. تفعل بعض الإطارات ذلك افتراضيًا.
+الوضع الصارم لا يؤثر في الإنتاج، لذلك لن يبطئ التطبيق لمستخدمينك. يمكنك الانضمام إلى الوضع الصارم, عن طريق تغليف المكّون الجذر(root component) الخاص بك في `<React.StrictMode>`. تفعل بعض الإطارات ذلك افتراضيًا.
 
 </DeepDive>
 
 ### التغيير المحلي: سر صغير لمكوّناتك {/*local-mutation-your-components-little-secret*/}
 
-في المثال أعلاه، كان المشكلة في أن المكوّن قام بتغيير متغير *موجود مسبقًا* أثناء التصيير. يُطلق عليها في كثير من الأحيان **"طفرة"** لجعلها تبدو أكثر رعبًا. الدوال النقية لا تغيّر المتغيرات خارج نطاق الدالة أو الكائنات التي تم إنشاؤها قبل الاستدعاء - هذا يجعلها غير نقية!
+في المثال أعلاه، كانت المشكلة في أن المكوّن قام بتغيير متغير *موجود مسبقًا* أثناء التصيير. يُطلق عليها في كثير من الأحيان **"طفرة"** لجعلها تبدو أكثر رعبًا. الدوال النقية لا تغيّر المتغيرات خارج نطاق الدالة أو الكائنات التي تم إنشاؤها قبل الاستدعاء - هذا يجعلها غير نقية!
 
-ومع ذلك, **فمن المسموح تمامًا بتغيير المتغيرات والكائنات التي قمت بإنشائها *فقط* خلال العرض** في هذا المثال, قم بإنشاء `[]` مصفوفة, وعيينها إلى متغير  `cups`, ثم `ادفع(push)` اثني عشر كوبًا فيها:
+ومع ذلك, **فمن المسموح تمامًا بتغيير المتغيرات والكائنات التي قمت بإنشائها *فقط* خلال التصيير** في هذا المثال, قم بإنشاء `[]` مصفوفة, وعيينها إلى متغير  `cups`, ثم ادفع `(push)` اثني عشر كوبًا فيها:
 
 <Sandpack>
 
@@ -190,43 +190,43 @@ export default function TeaGathering() {
 
 </Sandpack>
 
-إذا تم إنشاء متغير `cups` او `[]` مصفوفة خارج دالة `TeaGathering` فسيكون هذا مشكلة كبيرة! ستقوم بتغيير كائن *موجود مسبقًا* عن طريق دفع العناصر في تلك المصفوفة.
+إذا تم إنشاء متغير `cups` او `[]` مصفوفة خارج دالة `TeaGathering` فستكون هذه مشكلة كبيرة! ستقوم بتغيير كائن *موجود مسبقًا* عند دفع العناصر في تلك المصفوفة.
 
-ومع ذلك, فإنه يعد أمرًا صحيحًا لأنك قمت بإنشائهم *خلال نفس العرض*, داخل `TeaGathering`. لن يعرف أي كود خارج `TeaGathering` بدًا أن هذا حدث. يُطلق عليه **"تغيير المحلي"**—هو مثل سر صغير لمكوّناتك.
+ومع ذلك, فإنه يعد أمرًا صحيحًا لأنك قمت بإنشائهم *خلال نفس التصيير*, داخل `TeaGathering`. لن يعرف أي كود خارج `TeaGathering` ابدًا أن هذا حدث. يُطلق عليه **"تغيير المحلي"**—هو مثل سر صغير لمكوّناتك.
 
 ## المكان الذي يمكنك فيه التسبب بآثار جانبية {/*where-you-_can_-cause-side-effects*/}
 
-على الرغم من أن البرمجة الوظيفية تعتمد بشدة على النقاء, إلا أنه في نقطة ما، في, مكان ما،يجب أن يتغير _شيء_. هذه هي نقطة البرمجة! هذه التغييرات - تحديث الشاشة، بدء الرسوم المتحركة، تغيير البيانات - تسمى **الآثار الجانبية** إنها أشياء تحدث _"على الجانب"_, وليست خلال التصيير.
+على الرغم من أن البرمجة الوظيفية تعتمد بشدة على النقاء، إلا أنه في نقطة ما، في مكان ما ،يجب أن يتغير _شيء_. هذه هي النقطة من البرمجة! هذه التغييرات - تحديث الشاشة، بدء الرسوم المتحركة، تغيير البيانات - تسمى **الآثار الجانبية** إنها أشياء تحدث _"على الجانب"_, وليس خلال التصيير.
 
-في React, **تنتمي الآثار الجانبية عادةً داخل [معالجات الأحداث(event handlers).](/learn/responding-to-events)** معالجات الأحداث هي الدوال التي يقوم React بتشغيلها عندما تقوم بإجراء بعض الإجراءات—على سبيل المثال، عند النقر فوق زر. على الرغم من أن معالجات الأحداث تم تعريفها *داخل* المكوّن الخاص بك، إلا أنها لا تعمل *خلال* التصيير! **لذلك، فإن معالجات الأحداث لا تحتاج إلى أن تكون نقية.**
+في React, **تنتمي الآثار الجانبية عادةً داخل [معالجات الأحداث(event handlers).](/learn/responding-to-events)** معالجات الأحداث هي الدوال التي يقوم React بتشغيلها عندما تقوم بإجراء بعض الإجراءات—على سبيل المثال، عند النقر فوق زر. على الرغم من أن معالجات الأحداث يتم تعريفها *داخل* المكوّن الخاص بك، إلا أنها لا تعمل *خلال* التصيير! **لذلك، فإن معالجات الأحداث لا يجب أن تكون نقية.**
 
-إذا استنفذت كل الخيارات الأخرى ولم تتمكن من العثور على معالج الأحداث المناسب لآثار جانبية، فيمكنك تثبيتها على JSX المُرجَع الخاص بك باستدعاء[`useEffect`](/reference/react/useEffect) في مكوّنك. يخبر هذا React بتنفيذها لاحقًا، بعد التصيير، عندما يسمح بالآثار الجانبية. **ومع ذلك، يجب أن يكون هذا النهج هو خيارك الأخير.**
+إذا استنفذت كل الخيارات الأخرى ولم تتمكن من العثور على معالج أحداث مناسب للآثار الجانبية، فيمكنك ربطها على JSX المُرجَع الخاص بك باستدعاء[`useEffect`](/reference/react/useEffect) في مكوّنك. يخبر هذا React بتنفيذها لاحقًا، بعد التصيير، عندما يسمح بالآثار الجانبية. **ومع ذلك، يجب أن يكون هذا النهج هو خيارك الأخير.**
 
-عندما يكون ذلك ممكنًا، حاول التعبير عن منطقك فقط من خلال التصرير. ستتفاجأ الى اي مدى يمكن لهذاأن يأخذك! 
+عندما يكون ذلك ممكنًا، حاول التعبير عن منطقك فقط من خلال التصرير. ستتفاجأ الى اي مدى يمكن لهذا أن يأخذك! 
 
 <DeepDive>
 
 #### لماذا يهتم React بالنقاء؟ {/*why-does-react-care-about-purity*/}
 
-يتطلب كتابة الدوال النقية بعض العادات والانضباط. ولكنه يفتح أيضًا فرصًا رائعة
+يتطلب كتابة الدوال النقية بعض العادات والانضباط. ولكنه يفتح أيضًا فرصًا رائعة:
 
 * يمكن لمكوّناتك أن تعمل في بيئة مختلفة - على سبيل المثال، على الخادم! نظرًا لأنها تعيد نفس النتيجة لنفس المدخلات، يمكن لمكوّن واحد أن يخدم العديد من طلبات المستخدم.
-* يمكنك تحسين الأداء من خلال [تخطي تصيير](/reference/react/memo) المكوّنات التي لم تتغير مدخلاتها. هذا آمن لأن الدوال النقية تعيد نفس النتائج دائمًا، لذلك فهي آمنة للتخزين المؤقت.
+* يمكنك تحسين الأداء من خلال [تخطي تصيير](/reference/react/memo) المكوّنات التي لم تتغير مدخلاتها. هذا آمن لأن الدوال النقية تعيد نفس النتائج دائمًا، لذلك فهي آمنة للتخزين المؤقت (cashe).
 * إذا تغيرت بعض البيانات في منتصف تصيير شجرة مكوّنات عميقة، يمكن لـReact إعادة بدء التصيير دون إضاعة الوقت لإنهاء التصيير القديم. يجعل النقاء من الآمن التوقف عن الحساب في أي وقت.
 
-كل الميزات الجديدة التي نقوم ببنائها في React تستفيد من النقاء. من جلب البيانات إلى الرسوم المتحركة إلى الأداء، يفتح الحفاظ على المكوّنات نقية قوة نمط React.
+كل الميزات الجديدة التي نقوم ببنائها في React تستفيد من النقاء. من جلب البيانات إلى الرسوم المتحركة إلى الأداء، الحفاظ على المكوّنات نقية يطلق العنان لقوة نموذج React.
 
 </DeepDive>
 
 <Recap>
 
 * يجب أن يكون المكوّن نقيًا، مما يعني:
   * **يهتم بأمره الخاص.** لا يجب أن يغير أي كائنات أو متغيرات كانت موجودة قبل التصيير.
-  * **نفس المدخلات، نفس المخرجات.** باعطاء نفس المدخلات، يجب على المكوّن أن يعيد دائمًا نفس JSX. 
+  * **نفس المدخلات تؤدي لنفس المخرجات.** باعطاء نفس المدخلات، يجب على المكوّن أن يعيد دائمًا نفس JSX. 
 *  يمكن أن يحدث التصيير في أي وقت ، لذلك لا يجب أن تعتمد المكوّنات على تسلسل التصيير لبعضها البعض.
 * لا يجب تغيير أي من المدخلات التي تستخدمها المكوّنات الخاصة بك للتصيير. ويشمل ذلك الخصائص والحالة والسياق. لتحديث الشاشة ، استخدم, ["set" state](/learn/state-a-components-memory) بدلاً من تغيير الكائنات الموجودة مسبقًا.
-* يجب السعي للتعبير عن منطق المكوّن في JSX الذي تعيده. عندما تحتاج إلى "تغيير الأشياء" ، عادةً ما تريد القيام بذلك في معالج الحدث(event listener). كخيار أخير ، يمكنك استخدام `useEffect`.
-* يتطلب كتابة الدوال النقية بعض الممارسة ، ولكنه يفتح باب قوة نمط React.
+* يجب ان تسعى للتعبير عن منطق المكوّن في الJSX الذي تعيده. عندما تحتاج إلى "تغيير الأشياء" ، عادةً ما تريد القيام بذلك في معالج الحدث(event listener). كخيار أخير ، يمكنك استخدام `useEffect`.
+* يتطلب كتابة الدوال النقية بعض الممارسة ، ولكنه يطلق العنان لقوة نموذج React.
 
 </Recap>
 
@@ -580,7 +580,7 @@ h1 { margin: 5px; font-size: 18px; }
 
 </Solution>
 
-#### إصلاح صينية القصص المعطوبة {/*fix-a-broken-story-tray*/}
+#### أصلح علبة قصة مكسورة {/*fix-a-broken-story-tray*/}
 
 يطلب منك الرئيس التنفيذي لشركتك إضافة "قصص" إلى تطبيق الساعة الخاص بك على الإنترنت ، ولا يمكنك الرفض. لقد كتبت مكوّن `StoryTray` الذي يقبل قائمة من القصص `stories` ، تليها "إنشاء قصة" العنصر النائب.
 
@@ -768,7 +768,7 @@ li {
 
 </Sandpack>
 
-بديلًا عن ذلك ، يمكنك إنشاء مصفوفة _جديدة_ (عن طريق نسخ الحالية) قبل دفع عنصر فيها:
+بدلًا عن ذلك ، يمكنك إنشاء مصفوفة _جديدة_ (عن طريق نسخ الحالية) قبل دفع عنصر فيها:
 
 <Sandpack>