Merge branch 'main' of https://github.com/rumbustious/ar.react.dev into pr/Rumbustious/522

Author: AhmedBaset

src/content/learn/managing-state.md

@@ -116,7 +116,7 @@ body { direction: rtl; }
 
 ## اختيار هيكل الحالة {/*choosing-the-state-structure*/}
 
-هيكلة الحالة جيدا يستطيع أن يصنع فارقا بين مكوّن قابل للإصلاح والتصحيح، وآخر يمثل مصدرا ثابتا للأخطاء. القاعدة الأكثر أهمية هي أنه لا يجب للحالة أن تحتوي على بيانات مكررة أو منسوخة. لو وجدت حالة غير ضرورية، فمن السهل نسيان تحديثها، وحدوث الأخطاء.
+هيكلة الحالة جيدا يمكن أن يصنع فارقا بين مكوّن قابل للإصلاح والتصحيح، وآخر يمثل مصدرا ثابتا للأخطاء. القاعدة الأكثر أهمية هي أنه لا يجب للحالة أن تحتوي على بيانات مكررة أو منسوخة. لو وجدت حالة غير ضرورية، فمن السهل نسيان تحديثها، وحدوث الأخطاء.
 
 على سبيل المثال، هذا نموذج يتضمن متغير الحالة `fullName` **مكرر**:
 
@@ -166,12 +166,13 @@ export default function Form() {
 ```
 
 ```css
+body { direction: rtl; }
 label { display: block; margin-bottom: 5px; }
 ```
 
 </Sandpack>
 
-يمكنك حذفه وتبسيط الكود عن طريق جمع `fullName` بينما يصيّر المكوّن:
+يمكنك حذفه وتبسيط الكود عن طريق جمع `fullName` بينما يُصيّر المكوّن:
 
 <Sandpack>
 
@@ -234,7 +235,7 @@ label { display: block; margin-bottom: 5px; }
 
 ## مشاركة الحالة بين المكونات {/*sharing-state-between-components*/}
 
-أحيانا، أنت تريد الحالة ذات المكونين أن تتغير دائما مع بعضها البعض. لعمل ذلك، احذف حالة من كليهما، انقلها لأقرب مكون أب، وبعد ذلك مررها لأسفل باستخدام الخصائص (props). هذا ما يعرف بـ "رفع الحالة لمستوى أعلى (lifting state up)"، وهو واحد من أكثر الأشياء شيوعا التي ستسعملها أثناء كتابتك لكود React.
+أحيانا، تريد حالة مكونين أن تتغير دائما مع بعضها البعض. لعمل ذلك، احذف الحالة من كليهما، وانقلها لأقرب مكون أب مشترك، وبعد ذلك مررها لأسفل باستخدام الخصائص (props). هذا ما يعرف بـ "رفع الحالة لمستوى أعلى (lifting state up)"، وهو واحد من أكثر الأشياء شيوعا التي ستستعملها أثناء كتابتك لكود React.
 
 في هذا المثال، في كل مرة يجب أن تكون قائمة واحدة فقط نشطة. لتحقيق ذلك، بدلا من حفظ الحالة النشطة داخل كل قائمة بمفردها، المكونّ الأب يحمل الحالة ويحدد الخصائص لمكوناته الأبناء. 
 
@@ -247,20 +248,20 @@ export default function Accordion() {
   const [activeIndex, setActiveIndex] = useState(0);
   return (
     <>
-      <h2>Almaty, Kazakhstan</h2>
+      <h2>ألماتي، كازاخستان</h2>
       <Panel
-        title="About"
+        title="نبذة"
         isActive={activeIndex === 0}
         onShow={() => setActiveIndex(0)}
       >
-        مع تعداد سكاني يقارب 2 مليون، Almaty هي أكبر مدينة بـ Kazakhstan. منذ 1929 إلى 1997 كانت هي العاصمة.
+        مع تعداد سكاني يقارب 2 مليون، ألماتي هي أكبر مدينة بكازاخستان. منذ 1929 إلى 1997 كانت هي العاصمة.
       </Panel>
       <Panel
-        title="Etymology"
+        title="أصل الكلمة"
         isActive={activeIndex === 1}
         onShow={() => setActiveIndex(1)}
       >
-        الاسم مأخوذ من <span lang="kk-KZ">алма</span>، الكلمة الكازاخستانية التي تعني "تفاحة" وغالبا تترجم على أنها "مليئة بالتفاح". في الحقيقة، المنطقة المحيطة بـ Almaty تعتبر الموطن الأصلي للتفاح، والنوع البريّ <i lang="la">Malus sieversii</i> يعتبر أقرب مرشح لكونه أصل للتفاح المحلي الحديث.
+        الاسم مأخوذ من <span lang="kk-KZ">алма</span>، الكلمة الكازاخية التي تعني "تفاحة" وغالبا تترجم على أنها "مليئة بالتفاح". في الحقيقة، المنطقة المحيطة بألماتي تعتبر الموطن الأصلي للتفاح، والنوع البريّ <i lang="la">Malus sieversii</i> يعتبر أقرب مرشح لكونه أصل للتفاح المحلي الحديث.
       </Panel>
     </>
   );
@@ -306,7 +307,7 @@ h3, p { margin: 5px 0px; }
 
 ## حفظ وإعادة تعيين الحالة {/*preserving-and-resetting-state*/}
 
-عندما تعيد تصيير مكون، React تحتاج لتقرر أىّ أجزاء من الشجرة لتحفظها (وتحدثها)، وأيّ أجزاء لتلغيها أو تعيد إنشاءها من الصفر. في أغلب الحالات، التصرف التلقائي لـ React يعمل بشكل جيد كفاية. تلقائيا، React تحفظ الأجزاء من الشجرة التي "تتوافق" مع مكون الشجرة المصيّر مسبقا. 
+عندما تعيد تصيير مكون، React تحتاج لتقرر أىّ أجزاء شجرة المكونات تحفظها (وتحدثها)، وأيّ أجزاءها تلغيها أو تعيد إنشاءها من الصفر. في أغلب الحالات، التصرف التلقائي لـ React يعمل بشكل جيد كفاية. تحفظ React تلقائيًا أجزاء الشجرة التي "تتوافق" مع مكون الشجرة المصيّر مسبقا. 
 
 على كل حال، أحيانا هذا ما لا تريده أنت. في تطبيق المحادثة هذا، كتابة رسالة وتغيير الطرف المستقبل لا يعيد تعيين المدخل. هذا قد يجعل المستخدم يرسل رسالة بغير قصد للشخص الخطأ.
 
@@ -384,7 +385,7 @@ export default function Chat({ contact }) {
 ```css
 body { direction: rtl; }
 .chat, .contact-list {
-  float: left;
+  float: right;
   margin-bottom: 20px;
 }
 ul, li {
@@ -404,7 +405,7 @@ textarea {
 
 </Sandpack>
 
-React تعطيك القدرة على تجاوز السلوك الافتراضي، و*الفرض* على المكون إعادة تعيين حالته عن طريق تمرير `key` مختلف لها، مثل `<Chat key={email} />`. هذا يخبر React أن الطرف المستقبل مختلف، ومن الواجب تعيين مكون `Chat` *مختلف* يكون بحاجة إلى إعادة الإنشاء من الصفر ببايانات جديدة (وواجهة مستخدم مطابقة للمدخلات). الآن الانتقال بين المستقبلين يعيد تعيين حقل الإدخال--حتى بالرغم من أنك تعيد تصيير نفس المكون.
+تعطيك React القدرة على تجاوز السلوك الافتراضي، و*إجبار* المكون إعادة تعيين حالته عن طريق تمرير `key` مختلف لها، مثل `<Chat key={email} />`. هذا يخبر React أن الطرف المستقبل مختلف، ومن الواجب تعيين مكون `Chat` *مختلف* يكون بحاجة إلى إعادة الإنشاء من الصفر ببايانات جديدة (وواجهة مستخدم مطابقة للمدخلات). الآن الانتقال بين المستقبلين يعيد تعيين حقل الإدخال -- حتى بالرغم من أنك تعيد تصيير نفس المكون.
 
 <Sandpack>
 
@@ -480,7 +481,7 @@ export default function Chat({ contact }) {
 ```css
 body { direction: rtl; }
 .chat, .contact-list {
-  float: left;
+  float: right;
   margin-bottom: 20px;
 }
 ul, li {
@@ -547,7 +548,7 @@ export default function TaskApp() {
 
   return (
     <>
-      <h1>Prague مخطط رحلة</h1>
+      <h1>مخطط رحلة Prague</h1>
       <AddTask
         onAddTask={handleAddTask}
       />
@@ -591,7 +592,7 @@ let nextId = 3;
 const initialTasks = [
   { id: 0, text: 'زيارة متحف Kafka', done: true },
   { id: 1, text: 'مشاهدة عرض الدمى', done: false },
-  { id: 2, text: 'Lennon Wall صورة', done: false }
+  { id: 2, text: 'صورة Lennon Wall', done: false }
 ];
 ```
 
@@ -706,9 +707,9 @@ ul, li { margin: 0; padding: 0; }
 
 ## تمرير البيانات إلى عمق باستخدام السياق (context) {/*passing-data-deeply-with-context*/}
 
-عادة، سوف تقوم بتمرير معلومات من مكوّن أب إلى مكوّن ابن بواسطة الخصائص (props). لكن تمرير الخصائص قد يكون غير مجدٍ لو احتجت لتمرير بعض الخصائص خلال مكونات عديدة، أو لو أن العديد من المكونات تحتاج نفس المعلومات. السياق (context) يتيح للمكون الأب جعل بعض المعلومات متوفرة لأي مكون أدناه في الشجرة-لا يهم مقدار عمق المكون-بدون تمريرها مباشرة عن طريق الخصائص.
+عادة، سوف تقوم بتمرير معلومات من مكوّن أب إلى مكوّن ابن بواسطة الخصائص (props). لكن تمرير الخصائص قد يكون غير مجدٍ لو احتجت لتمرير بعض الخصائص خلال مكونات عديدة، أو لو أن العديد من المكونات تحتاج نفس المعلومات. السياق (context) يتيح للمكون الأب جعل بعض المعلومات متوفرة لأي مكون أدناه في الشجرة -لا يهم مقدار عمق المكون- بدون تمريرها مباشرة عن طريق الخصائص.
 
-هنا، المكوّن `Heading` يحدد مستوى عنوانه عن طريق "سؤال" أقرب `Section` لمستواه. كل `Section` يتتبع مستواه الخاص عن طريق سؤال `Section` الأب وإضافة واحد له. كل `Section` يقوم بتوفير معلومات لجميع المكونات أدناه دون نقل الخصائص--وهذا يتم عبر السياق (context).
+هنا، المكوّن `Heading` يحدد مستوى عنوانه عن طريق "سؤال" أقرب `Section` لمستواه. كل `Section` يتتبع مستواه الخاص عن طريق سؤال `Section` الأب وإضافة واحد له. كل `Section` يقوم بتوفير معلومات لجميع المكونات أدناه دون نقل الخصائص -- وهذا يتم عبر السياق (context).
 
 <Sandpack>
 
@@ -809,7 +810,7 @@ body { direction: rtl; }
 
 ## التوسع بواسطة المخفض (reducer) و السياق (context) {/*scaling-up-with-reducer-and-context*/}
 
-المخفضات (Reducers) تتيح لك تجميع منطق تحديث الحالة لمكون. السياق (Context) تتيح لك تمرير معلومات بعمق إلى أسفل لمكونات أخرى. يمكنك جمع المخفضات والسايق معا لتدير الحالة الخاصة بشاشة معقدة.
+المخفضات (Reducers) تتيح لك تجميع منطق تحديث الحالة لمكون. السياق (Context) يتيح لك تمرير معلومات بعمق إلى أسفل لمكونات أخرى. يمكنك جمع المخفضات والسايق معا لتدير الحالة الخاصة بشاشة معقدة.
 
 مع هذا النهج، يدير المكون الأب حالة معقدة بواسطة مخفض. المكونات الأخرى في أي عمق كانت داخل الشجرة يمكن قراءة حالتها بواسطة السياق. يمكنهم أيضا إرسال الأوامر لتحديث الحالة.
 

src/sidebarLearn.json

@@ -125,36 +125,36 @@
       ]
     },
     {
-      "title": "التحكم في الحالة",
+      "title": "Managing State",
       "path": "/learn/managing-state",
       "tags": ["intermediate"],
       "routes": [
         {
-          "title": "الاستجابة للمدخلات باستخدام الحالة",
+          "title": "Reacting to Input with State",
           "path": "/learn/reacting-to-input-with-state"
         },
         {
-          "title": "اختيار هيكل الحالة",
+          "title": "Choosing the State Structure",
           "path": "/learn/choosing-the-state-structure"
         },
         {
-          "title": "مشاركة الحالة بين المكونات",
+          "title": "Sharing State Between Components",
           "path": "/learn/sharing-state-between-components"
         },
         {
-          "title": "حفظ وإعادة تعيين الحالة",
+          "title": "Preserving and Resetting State",
           "path": "/learn/preserving-and-resetting-state"
         },
         {
-          "title": "استخلاص منطق الحالة إلى مخفض (reducer)",
+          "title": "Extracting State Logic into a Reducer",
           "path": "/learn/extracting-state-logic-into-a-reducer"
         },
         {
-          "title": "تمرير البيانات إلى عمق باستخدام السياق (context)",
+          "title": "Passing Data Deeply with Context",
           "path": "/learn/passing-data-deeply-with-context"
         },
         {
-          "title": "التوسع بواسطة المخفض (reducer) و السياق (context)",
+          "title": "Scaling Up with Reducer and Context",
           "path": "/learn/scaling-up-with-reducer-and-context"
         }
       ]