From 9f2569f5e2b2fc8ba4d59809ff92876fa83ed9a1 Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Sun, 13 Aug 2023 08:34:58 +0300
Subject: [PATCH 01/28] Translating managing state section     - Overview     -
 Reacting to input with state     - Choosing the state structure     -
 sidebarLearn translation

---
 src/content/learn/managing-state.md | 69 +++++++++++++++--------------
 src/sidebarLearn.json               |  6 +--
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index c88ae3796..5198101ea 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -1,30 +1,31 @@
 ---
-title: Managing State
+title: إدارة الحالة
 ---
 
 <Intro>
 
-As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs. In this chapter, you'll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components.
+  مع نمو تطبيقك، من المفيد كونك أكثر حرصا بشأن أن تكون حالتك منظمة وأن تكون البيانات متدفقة خلال مكوناتك. تكرار أو نسخ الحالة هو مصدر شائع للأخطاء. في هذا الفصل، سوف تتعلم كيفية تهيئة حالتك جيدا، كيفية الحفاظ على منطق تحديث حالتك مصانا، وكيفية مشاركة الحالة بين المكونات المتباعدة.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [How to think about UI changes as state changes](/learn/reacting-to-input-with-state)
-* [How to structure state well](/learn/choosing-the-state-structure)
-* [How to "lift state up" to share it between components](/learn/sharing-state-between-components)
-* [How to control whether the state gets preserved or reset](/learn/preserving-and-resetting-state)
-* [How to consolidate complex state logic in a function](/learn/extracting-state-logic-into-a-reducer)
-* [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context)
-* [How to scale state management as your app grows](/learn/scaling-up-with-reducer-and-context)
+* [كيفية التفكير في تغييرات واجهة المستخدم كتغيرات في الحالة](/learn/reacting-to-input-with-state)
+* [كيفية هيكلة الحالة جيدا](/learn/choosing-the-state-structure)
+* [كيفية "رفع الحالة لمستوى أعلى" لمشاكارتها بين المكونات](/learn/sharing-state-between-components)
+* [كيفية التحكم في ما إذا تم حفظ الحالة أم إعادة تعيينها](/learn/preserving-and-resetting-state)
+* [كيفية ترسيخ منطق حالة معقد داخل دالة](/learn/extracting-state-logic-into-a-reducer)
+* [كيفية تمرير معلومات بدون "تسرب الخصائص"](/learn/passing-data-deeply-with-context)
+* [كيفية توسيع إدارة الحالة مع نمو تطبيقك](/learn/scaling-up-with-reducer-and-context)
 
 </YouWillLearn>
 
-## Reacting to input with state {/*reacting-to-input-with-state*/}
+## الاستجابة للمدخلات باستخدام الحالة {/*reacting-to-input-with-state*/}
 
-With React, you won't modify the UI from code directly. For example, you won't write commands like "disable the button", "enable the button", "show the success message", etc. Instead, you will describe the UI you want to see for the different visual states of your component ("initial state", "typing state", "success state"), and then trigger the state changes in response to user input. This is similar to how designers think about UI.
+باستخدام React، لن تستطيع تعديل واجهة المستخدم عن طريق الكود مباشرة. على سبيل المثال، لن تكتب أوامر مثل "عطل الزر"، "فعل الزر"، إلخ. بدلا عن ذلك، سوف تصف واجهة المستخدم التي تريد أن ترها للحالات المرئية من مكوناتك ("حالة ابتدائية"، "حالة كتابية"، "حالة ناجحة")، ومن بعدها تنشيط تغيرات الحالة بناءا على مدخل المستخدم. هذا مشابه لتصور المصممين عن واجهة المستخدم.
+
+هنا نموذج اختبار صمم باستخدام React. لاحظ كيف يستخدم متغير الحالة `status` لكي يحدد ما إذا سيفعل أم سيعطل زر الإرسال، وما إذا ستظهر رسالة نجاح بدلا عن ذلك.
 
-Here is a quiz form built using React. Note how it uses the `status` state variable to determine whether to enable or disable the submit button, and whether to show the success message instead.
 
 <Sandpack>
 
@@ -37,7 +38,7 @@ export default function Form() {
   const [status, setStatus] = useState('typing');
 
   if (status === 'success') {
-    return <h1>That's right!</h1>
+    return <h1>هذا صحيح!</h1>
   }
 
   async function handleSubmit(e) {
@@ -58,9 +59,9 @@ export default function Form() {
 
   return (
     <>
-      <h2>City quiz</h2>
+      <h2>اختبار المدينة</h2>
       <p>
-        In which city is there a billboard that turns air into drinkable water?
+        في أي مدينة يوجد لوحة إعلانية تقوم بتحويل الهواء إلى مياه صالحة للشرب؟
       </p>
       <form onSubmit={handleSubmit}>
         <textarea
@@ -73,7 +74,7 @@ export default function Form() {
           answer.length === 0 ||
           status === 'submitting'
         }>
-          Submit
+          أرسل
         </button>
         {error !== null &&
           <p className="Error">
@@ -86,12 +87,12 @@ export default function Form() {
 }
 
 function submitForm(answer) {
-  // Pretend it's hitting the network.
+  // محاكاة للتواصل باستخدام الشبكة
   return new Promise((resolve, reject) => {
     setTimeout(() => {
-      let shouldError = answer.toLowerCase() !== 'lima'
+      let shouldError = answer.toLowerCase() !== 'lima' 
       if (shouldError) {
-        reject(new Error('Good guess but a wrong answer. Try again!'));
+        reject(new Error('توقع جيد ولكن إجابة خاطئة. حاول مرة أخرى!'));
       } else {
         resolve();
       }
@@ -108,15 +109,15 @@ function submitForm(answer) {
 
 <LearnMore path="/learn/reacting-to-input-with-state">
 
-Read **[Reacting to Input with State](/learn/reacting-to-input-with-state)** to learn how to approach interactions with a state-driven mindset.
+اقرأ **[الاستجابة للمدخلات باستخدام الحالة](/learn/reacting-to-input-with-state)** لكي تتعلم كيفية الوصول لتعاملات مع عقلية معتمدة على الحالة.  
 
 </LearnMore>
 
-## Choosing the state structure {/*choosing-the-state-structure*/}
+## اختيار هيكل الحالة {/*choosing-the-state-structure*/}
 
-Structuring state well can make a difference between a component that is pleasant to modify and debug, and one that is a constant source of bugs. The most important principle is that state shouldn't contain redundant or duplicated information. If there's unnecessary state, it's easy to forget to update it, and introduce bugs!
+هيكلة الحالة جيدا يستطيع أن يصنع فارقا بين مكوّن قابل للإصلاح والتصحيح، وآخر يمثل مصدرا ثابتا للأخطاء. القاعدة الأكثر أهمية هي أنه لا يجب للحالة أن تحتوي على بيانات مكررة أو منسوخة. لو وجدت حالة غير ضرورية، فمن السهل نسيان تحديثها، وحدوث الأخطاء.
 
-For example, this form has a **redundant** `fullName` state variable:
+على سبيل المثال، هذا نموذج يتضمن متغير الحالة `fullName` **مكرر**:
 
 <Sandpack>
 
@@ -140,23 +141,23 @@ export default function Form() {
 
   return (
     <>
-      <h2>Let’s check you in</h2>
+      <h2>دعنا نقم بتسجيلك</h2>
       <label>
-        First name:{' '}
+        الاسم الأول:{' '}
         <input
           value={firstName}
           onChange={handleFirstNameChange}
         />
       </label>
       <label>
-        Last name:{' '}
+        اسم العائلة:{' '}
         <input
           value={lastName}
           onChange={handleLastNameChange}
         />
       </label>
       <p>
-        Your ticket will be issued to: <b>{fullName}</b>
+        تذكرتك سوف تسلم ل: <b>{fullName}</b>
       </p>
     </>
   );
@@ -169,7 +170,7 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-You can remove it and simplify the code by calculating `fullName` while the component is rendering:
+يمكنك حذفه وتبسيط الكود عن طريق جمع `fullName` بينما يصيّر المكوّن:
 
 <Sandpack>
 
@@ -192,23 +193,23 @@ export default function Form() {
 
   return (
     <>
-      <h2>Let’s check you in</h2>
+      <h2>دعنا نقم بتسجيلك</h2>
       <label>
-        First name:{' '}
+        الاسم الأول:{' '}
         <input
           value={firstName}
           onChange={handleFirstNameChange}
         />
       </label>
       <label>
-        Last name:{' '}
+        اسم العائلة:{' '}
         <input
           value={lastName}
           onChange={handleLastNameChange}
         />
       </label>
       <p>
-        Your ticket will be issued to: <b>{fullName}</b>
+        تذكرتك سوف تسلم ل: <b>{fullName}</b>
       </p>
     </>
   );
@@ -221,11 +222,11 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-This might seem like a small change, but many bugs in React apps are fixed this way.
+هذا قد يبدو كتغير بسيط، ولكن كثير من الأخطاء في تطبيقات React يتم إصلاحها بهذه الطريقة. 
 
 <LearnMore path="/learn/choosing-the-state-structure">
 
-Read **[Choosing the State Structure](/learn/choosing-the-state-structure)** to learn how to design the state shape to avoid bugs.
+اقرأ **[اختيار هيكل الحالة](/learn/choosing-the-state-structure)** لتتعلم كيفية تصميم بنية الحالة لتجنب الأخطاء.
 
 </LearnMore>
 
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 66db59b5a..fc43501c1 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -121,16 +121,16 @@
       ]
     },
     {
-      "title": "Managing State",
+      "title": "إدارة الحالة",
       "path": "/learn/managing-state",
       "tags": ["intermediate"],
       "routes": [
         {
-          "title": "Reacting to Input with State",
+          "title": "الاستجابة للمدخلات باستخدام الحالة",
           "path": "/learn/reacting-to-input-with-state"
         },
         {
-          "title": "Choosing the State Structure",
+          "title": "اختيار هيكل الحالة",
           "path": "/learn/choosing-the-state-structure"
         },
         {

From 6059cf7ed6508d401cbb55a9156e7a8c2eb0540a Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 15 Aug 2023 14:15:18 +0300
Subject: [PATCH 02/28] Translating managing state     - Sharing State Between
 Components     - Preserving and Resetting State

---
 src/content/learn/managing-state.md | 38 ++++++++++++++---------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 5198101ea..b2780bedb 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -22,7 +22,7 @@ title: إدارة الحالة
 
 ## الاستجابة للمدخلات باستخدام الحالة {/*reacting-to-input-with-state*/}
 
-باستخدام React، لن تستطيع تعديل واجهة المستخدم عن طريق الكود مباشرة. على سبيل المثال، لن تكتب أوامر مثل "عطل الزر"، "فعل الزر"، إلخ. بدلا عن ذلك، سوف تصف واجهة المستخدم التي تريد أن ترها للحالات المرئية من مكوناتك ("حالة ابتدائية"، "حالة كتابية"، "حالة ناجحة")، ومن بعدها تنشيط تغيرات الحالة بناءا على مدخل المستخدم. هذا مشابه لتصور المصممين عن واجهة المستخدم.
+باستخدام React، لن تستطيع تعديل واجهة المستخدم عن طريق الكود مباشرة. على سبيل المثال، لن تكتب أوامر مثل "عطل الزر"، "فعل الزر"، "أظهر رسالة النجاح"، إلخ. بدلا عن ذلك، سوف تصف واجهة المستخدم التي تريد أن ترها للحالات المرئية من مكوناتك ("حالة ابتدائية"، "حالة كتابية"، "حالة ناجحة")، ومن بعدها تنشيط تغيرات الحالة بناءا على مدخل المستخدم. هذا مشابه لتصور المصممين عن واجهة المستخدم.
 
 هنا نموذج اختبار صمم باستخدام React. لاحظ كيف يستخدم متغير الحالة `status` لكي يحدد ما إذا سيفعل أم سيعطل زر الإرسال، وما إذا ستظهر رسالة نجاح بدلا عن ذلك.
 
@@ -157,7 +157,7 @@ export default function Form() {
         />
       </label>
       <p>
-        تذكرتك سوف تسلم ل: <b>{fullName}</b>
+        تذكرتك سوف تسلم لـ: <b>{fullName}</b>
       </p>
     </>
   );
@@ -209,7 +209,7 @@ export default function Form() {
         />
       </label>
       <p>
-        تذكرتك سوف تسلم ل: <b>{fullName}</b>
+        تذكرتك سوف تسلم لـ: <b>{fullName}</b>
       </p>
     </>
   );
@@ -230,11 +230,11 @@ label { display: block; margin-bottom: 5px; }
 
 </LearnMore>
 
-## Sharing state between components {/*sharing-state-between-components*/}
+## مشاركة الحالة بين المكونات {/*sharing-state-between-components*/}
 
-Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as "lifting state up", and it's one of the most common things you will do writing React code.
+أحيانا، أنت تريد الحالة ذات المكونين أن تتغير دائما مع بعضها البعض. لعمل ذلك، احذف حالة من كليهما، انقلها لأقرب مكون أب، وبعد ذلك مررها لأسفل باستخدام الخصائص. هذا ما يعرف بـ "رفع الحالة لمستوى أعلى"، وهو واحد من أكثر الأشياء شيوعا التي ستسعملها أثناء كتابتك لكود React.
 
-In this example, only one panel should be active at a time. To achieve this, instead of keeping the active state inside each individual panel, the parent component holds the state and specifies the props for its children.
+في هذا المثال، في كل مرة يجب أن تكون قائمة واحدة فقط نشطة. لتحقيق ذلك، بدلا من حفظ الحالة النشطة داخل كل قائمة بمفردها، المكونّ الأب يحمل الحالة ويحدد الخصائص لمكوناته الأبناء. 
 
 <Sandpack>
 
@@ -251,14 +251,14 @@ export default function Accordion() {
         isActive={activeIndex === 0}
         onShow={() => setActiveIndex(0)}
       >
-        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
+        مع تعداد سكاني يقارب 2 مليون، Almaty هي أكبر مدينة بـ Kazakhstan. منذ 1929 إلى 1997 كانت هي العاصمة.
       </Panel>
       <Panel
         title="Etymology"
         isActive={activeIndex === 1}
         onShow={() => setActiveIndex(1)}
       >
-        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
+        الاسم مأخوذ من <span lang="kk-KZ">алма</span>، الكلمة الكازاخستانية التي تعني "تفاحة" وغالبا تترجم على أنها "مليئة بالتفاح". في الحقيقة، المنطقة المحيطة بـ Almaty تعتبر الموطن الأصلي للتفاحة، والنوع البريّ <i lang="la">Malus sieversii</i> يعتبر أقرب مرشح 
       </Panel>
     </>
   );
@@ -277,7 +277,7 @@ function Panel({
         <p>{children}</p>
       ) : (
         <button onClick={onShow}>
-          Show
+          أظهر
         </button>
       )}
     </section>
@@ -297,15 +297,15 @@ h3, p { margin: 5px 0px; }
 
 <LearnMore path="/learn/sharing-state-between-components">
 
-Read **[Sharing State Between Components](/learn/sharing-state-between-components)** to learn how to lift state up and keep components in sync.
+اقرأ **[مشاركة الحالة بين المكونات](/learn/sharing-state-between-components)** لتتعلم كيفية رفع الحالة لمستوى أعلى والحفاظ على المكونّات منسجمة.
 
 </LearnMore>
 
-## Preserving and resetting state {/*preserving-and-resetting-state*/}
+## حفظ وإعادة تعيين الحالة {/*preserving-and-resetting-state*/}
 
-When you re-render a component, React needs to decide which parts of the tree to keep (and update), and which parts to discard or re-create from scratch. In most cases, React's automatic behavior works well enough. By default, React preserves the parts of the tree that "match up" with the previously rendered component tree.
+عمدما تعيد تصيير مكون، React تحتاج لتقرر أىّ أجزاء من الشجرة لتحفظها (وتحدثها)، وأيّ أجزاء لتلغيها أو تعيد إنشاءها من الصفر. في أغلب الحالات، التصرف التلقائي لـ React يعمل بشكل جيد كفاية. تلقائياـ React تحفظ الأجزاء من الشجرة التي "تتوافق" مع مكون الشجرة المصيير مسبقا. 
 
-However, sometimes this is not what you want. In this chat app, typing a message and then switching the recipient does not reset the input. This can make the user accidentally send a message to the wrong person:
+على كل حال، أحيانا هذا ما لا تريده أنت. في تطبيق المحادثة هذا، كتابة رسالة وتغيير الطرف المستقبل لا يعيد تعيين المدخل. هذا قد يجعل المستخدم يرسل رسالة بغير قصد للشخص الخطأ.
 
 <Sandpack>
 
@@ -368,11 +368,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'تحدث مع ' + contact.name}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>أرسل لـ {contact.email}</button>
     </section>
   );
 }
@@ -400,7 +400,7 @@ textarea {
 
 </Sandpack>
 
-React lets you override the default behavior, and *force* a component to reset its state by passing it a different `key`, like `<Chat key={email} />`. This tells React that if the recipient is different, it should be considered a *different* `Chat` component that needs to be re-created from scratch with the new data (and UI like inputs). Now switching between the recipients resets the input field--even though you render the same component.
+React تعطيك القدرة على تجاوز السلوك الافتراضي، و*تفرض* على المكون إعادة تعيين حالته عن طريق تمرير `key` مختلف لها، مثل `<Chat key={email} />`. هذا يخبر React أن الطرف المستقبل مختلف، ومن الواجب تعيين مكون `Chat` *مختلف* يكون بحاجة إلى إعادة الإنشاء من الصفر ببايانات جديدة (وواجهة مستخدم مثل المدخلات). الآن الانتقال بين المستقبلين يعيد تعيين حقل الإدخال--حتى بالرغم من أنك تعيد تصيير نفس المكون.
 
 <Sandpack>
 
@@ -463,11 +463,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'تحدث مع ' + contact.name}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>أرسل لـ {contact.email}</button>
     </section>
   );
 }
@@ -497,7 +497,7 @@ textarea {
 
 <LearnMore path="/learn/preserving-and-resetting-state">
 
-Read **[Preserving and Resetting State](/learn/preserving-and-resetting-state)** to learn the lifetime of state and how to control it.
+اقرأ **[حفظ وإعادة تعيين الحالة](/learn/preserving-and-resetting-state)** لتتعلم الحياة الزمنية للحالة وكيفية التحكم بها.
 
 </LearnMore>
 

From 18d68ebb349d7237e8be122106c2a2861ee4c81b Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Sat, 19 Aug 2023 02:53:46 +0300
Subject: [PATCH 03/28] Translating managing state     - Extracting state logic
 into a reducer     - Passing data deeply with context     - Scaling up with
 reducer and context

---
 src/content/learn/managing-state.md | 36 ++++++++++++++---------------
 src/sidebarLearn.json               | 10 ++++----
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index b2780bedb..13f8c2faa 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -12,10 +12,10 @@ title: إدارة الحالة
 
 * [كيفية التفكير في تغييرات واجهة المستخدم كتغيرات في الحالة](/learn/reacting-to-input-with-state)
 * [كيفية هيكلة الحالة جيدا](/learn/choosing-the-state-structure)
-* [كيفية "رفع الحالة لمستوى أعلى" لمشاكارتها بين المكونات](/learn/sharing-state-between-components)
+* [كيفية "رفع الحالة لمستوى أعلى (lifting state up)" لمشاكارتها بين المكونات](/learn/sharing-state-between-components)
 * [كيفية التحكم في ما إذا تم حفظ الحالة أم إعادة تعيينها](/learn/preserving-and-resetting-state)
-* [كيفية ترسيخ منطق حالة معقد داخل دالة](/learn/extracting-state-logic-into-a-reducer)
-* [كيفية تمرير معلومات بدون "تسرب الخصائص"](/learn/passing-data-deeply-with-context)
+* [كيفية تجميع منطق حالة معقد داخل دالة](/learn/extracting-state-logic-into-a-reducer)
+* [كيفية تمرير معلومات بدون "تسرب الخصائص (Props drilling)"](/learn/passing-data-deeply-with-context)
 * [كيفية توسيع إدارة الحالة مع نمو تطبيقك](/learn/scaling-up-with-reducer-and-context)
 
 </YouWillLearn>
@@ -232,7 +232,7 @@ label { display: block; margin-bottom: 5px; }
 
 ## مشاركة الحالة بين المكونات {/*sharing-state-between-components*/}
 
-أحيانا، أنت تريد الحالة ذات المكونين أن تتغير دائما مع بعضها البعض. لعمل ذلك، احذف حالة من كليهما، انقلها لأقرب مكون أب، وبعد ذلك مررها لأسفل باستخدام الخصائص. هذا ما يعرف بـ "رفع الحالة لمستوى أعلى"، وهو واحد من أكثر الأشياء شيوعا التي ستسعملها أثناء كتابتك لكود React.
+أحيانا، أنت تريد الحالة ذات المكونين أن تتغير دائما مع بعضها البعض. لعمل ذلك، احذف حالة من كليهما، انقلها لأقرب مكون أب، وبعد ذلك مررها لأسفل باستخدام الخصائص. هذا ما يعرف بـ "رفع الحالة لمستوى أعلى (lifting state up)"، وهو واحد من أكثر الأشياء شيوعا التي ستسعملها أثناء كتابتك لكود React.
 
 في هذا المثال، في كل مرة يجب أن تكون قائمة واحدة فقط نشطة. لتحقيق ذلك، بدلا من حفظ الحالة النشطة داخل كل قائمة بمفردها، المكونّ الأب يحمل الحالة ويحدد الخصائص لمكوناته الأبناء. 
 
@@ -501,9 +501,9 @@ textarea {
 
 </LearnMore>
 
-## Extracting state logic into a reducer {/*extracting-state-logic-into-a-reducer*/}
+## استخلاص منطق الحالة إلى مخفض (reducer) {/*extracting-state-logic-into-a-reducer*/}
 
-Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called "reducer". Your event handlers become concise because they only specify the user "actions". At the bottom of the file, the reducer function specifies how the state should update in response to each action!
+المكونات ذات تحديثات حالة كثيرة المنتشرة خلال كثير من معالجات الأحداث (event handlers) قد تصبح معقدة. لمثل هذه الأحوال، يمكنك تجميع جميع منطق تحديث الحالة خارج مكوّنك داخل دالة واحدة، تدعى "مخفض (reducer)". معالجات الأحداث خاصتك ستصبح موجزة لأنها تحدد "إجراءات (actions)" المستخدم فقط. في أسفل الملف، دالة المخفض تحدد كيف يجب أن تحدث الحالة إستجابة لكل إجراء!
 
 <Sandpack>
 
@@ -694,15 +694,15 @@ ul, li { margin: 0; padding: 0; }
 
 <LearnMore path="/learn/extracting-state-logic-into-a-reducer">
 
-Read **[Extracting State Logic into a Reducer](/learn/extracting-state-logic-into-a-reducer)** to learn how to consolidate logic in the reducer function.
+اقرأ **[استخلاص منطق الحالة إلى مخفض (reducer)](/learn/extracting-state-logic-into-a-reducer)** لتتعلم كيفية تجميع منطق داخل دالة المخفض.
 
 </LearnMore>
 
-## Passing data deeply with context {/*passing-data-deeply-with-context*/}
+## تمرير البيانات إلى عمق باستخدام السياق (context) {/*passing-data-deeply-with-context*/}
 
-Usually, you will pass information from a parent component to a child component via props. But passing props can become inconvenient if you need to pass some prop through many components, or if many components need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep it is—without passing it explicitly through props.
+عادة، سوف تقوم بتمرير معلومات من مكوّن أب إلى مكوّن ابن بواسطة الخصائص (props). لكن تمرير الخصائص قد يكون غير مجدٍ لو احتجت لتمرير بعض الخصائص خلال مكونات عديدة، أو لو أن العديد من المكونات تحتاج نفس المعلومات. السياق (context) يتيح للمكون الأب جعل بعض المعلومات متوفرة لأي مكون أدناه في الشجرة-لا يهم مقدار عمق المكون-بدون تمريرها مباشرة عن طريق الخصائص.
 
-Here, the `Heading` component determines its heading level by "asking" the closest `Section` for its level. Each `Section` tracks its own level by asking the parent `Section` and adding one to it. Every `Section` provides information to all components below it without passing props--it does that through context.
+هنا، المكوّن `Heading` يحدد مستوى عنوانه عن طريق "سؤال" أقرب `Section` لمستواها. كل `Section` يتتبع مستواه الخاص عن طريق سؤال `Section` الأب وإضافة واحد له. كل `Section` بتوفير معلومات لجميع المكونات أدناه دون نقل الخصائص--وهذا يتم عبر السياق (context).
 
 <Sandpack>
 
@@ -796,15 +796,15 @@ export const LevelContext = createContext(0);
 
 <LearnMore path="/learn/passing-data-deeply-with-context">
 
-Read **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-context)** to learn about using context as an alternative to passing props.
+اقرأ **[تمرير البيانات إلى عمق باستخدام السياق (context)](/learn/passing-data-deeply-with-context)** لتتعلم عن استخدام السياق (context) كبديل لتمرير الخصائص.
 
 </LearnMore>
 
-## Scaling up with reducer and context {/*scaling-up-with-reducer-and-context*/}
+## التوسع بواسطة المخفض (reducer) و السياق (context) {/*scaling-up-with-reducer-and-context*/}
 
-Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
+المخفضات (Reducers) تتيح لك تجميع منطق تحديث الحالة لمكون. السياق (Context) تتيح لك تمرير معلومات بعمق إلى أسفل لمكونات أخرى. يمكنك جمع المخفضات والسايق معا لتدير الحالة الخاصة بشاشة معقدة.
 
-With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via context. They can also dispatch actions to update that state.
+مع هذا النهج، يدير المكون الأب حالة معقدة بواسطة مخفض. المكونات الأخرى في أي عمق كانت داخل الشجرة يمكن قراءة حالتها بواسطة السياق. يمكنهم أيضا إرسال الأوامر لتحديث الحالة.
 
 <Sandpack>
 
@@ -1007,12 +1007,12 @@ ul, li { margin: 0; padding: 0; }
 
 <LearnMore path="/learn/scaling-up-with-reducer-and-context">
 
-Read **[Scaling Up with Reducer and Context](/learn/scaling-up-with-reducer-and-context)** to learn how state management scales in a growing app.
+اقرأ **[التوسع بواسطة المخفض (reducer) و السياق (context)](/learn/scaling-up-with-reducer-and-context)** لتتعلم كيف تتوسع إدارة الحالة في تطبيق نامٍ.
 
 </LearnMore>
 
-## What's next? {/*whats-next*/}
+## ماذا بعد ذلك؟ {/*whats-next*/}
 
-Head over to [Reacting to Input with State](/learn/reacting-to-input-with-state) to start reading this chapter page by page!
+توجه إلى [الاستجابة للمدخلات باستخدام الحالة](/learn/reacting-to-input-with-state) لبدء قراءة هذا الفصل صفحة بصفحة!
 
-Or, if you're already familiar with these topics, why not read about [Escape Hatches](/learn/escape-hatches)?
+أو، إذا كنت بالفعل على دراية بهذه المواضيع، لماذا لا تقرأ عن  [بوابات الهروب (Escape Hatches)](/learn/escape-hatches)؟
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index fc43501c1..f3f4e0d69 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -134,23 +134,23 @@
           "path": "/learn/choosing-the-state-structure"
         },
         {
-          "title": "Sharing State Between Components",
+          "title": "مشاكة الحالة بين المكونات",
           "path": "/learn/sharing-state-between-components"
         },
         {
-          "title": "Preserving and Resetting State",
+          "title": "حفظ وإعادة تعيين الحالة",
           "path": "/learn/preserving-and-resetting-state"
         },
         {
-          "title": "Extracting State Logic into a Reducer",
+          "title": "استخلاص منطق الحالة إلى مخفض (reducer)",
           "path": "/learn/extracting-state-logic-into-a-reducer"
         },
         {
-          "title": "Passing Data Deeply with Context",
+          "title": "تمرير البيانات إلى عمق باستخدام السياق (context)",
           "path": "/learn/passing-data-deeply-with-context"
         },
         {
-          "title": "Scaling Up with Reducer and Context",
+          "title": "التوسع بواسطة المخفض (reducer) و السياق (context)",
           "path": "/learn/scaling-up-with-reducer-and-context"
         }
       ]

From 04d11cbcb98a7eeaed02ae94127ab06a5ed24963 Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Sat, 19 Aug 2023 04:08:43 +0300
Subject: [PATCH 04/28] Translating managing state     - Revised mistakes.    
 - Changed some words translations.     - Added translations for code blocks

---
 src/content/learn/managing-state.md | 82 ++++++++++++++---------------
 src/sidebarLearn.json               |  2 +-
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 13f8c2faa..0cf0deeb8 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -1,16 +1,16 @@
 ---
-title: إدارة الحالة
+title: التحكم في الحالة
 ---
 
 <Intro>
 
-  مع نمو تطبيقك، من المفيد كونك أكثر حرصا بشأن أن تكون حالتك منظمة وأن تكون البيانات متدفقة خلال مكوناتك. تكرار أو نسخ الحالة هو مصدر شائع للأخطاء. في هذا الفصل، سوف تتعلم كيفية تهيئة حالتك جيدا، كيفية الحفاظ على منطق تحديث حالتك مصانا، وكيفية مشاركة الحالة بين المكونات المتباعدة.
+  مع نمو تطبيقك، من المفيد كونك أكثر حرصا بشأن أن تكون حالتك منظمة وأن تكون البيانات متدفقة خلال مكوناتك. تكرار أو نسخ الحالة هو مصدر شائع للأخطاء. في هذا الفصل، سوف تتعلم كيفية هيكلة حالتك جيدا، كيفية الحفاظ على منطق تحديث حالتك مصانا، وكيفية مشاركة الحالة بين المكونات المتباعدة.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [كيفية التفكير في تغييرات واجهة المستخدم كتغيرات في الحالة](/learn/reacting-to-input-with-state)
+* [كيفية التفكير في تغييرات واجهة المستخدم (UI) كتغيرات في الحالة](/learn/reacting-to-input-with-state)
 * [كيفية هيكلة الحالة جيدا](/learn/choosing-the-state-structure)
 * [كيفية "رفع الحالة لمستوى أعلى (lifting state up)" لمشاكارتها بين المكونات](/learn/sharing-state-between-components)
 * [كيفية التحكم في ما إذا تم حفظ الحالة أم إعادة تعيينها](/learn/preserving-and-resetting-state)
@@ -22,7 +22,7 @@ title: إدارة الحالة
 
 ## الاستجابة للمدخلات باستخدام الحالة {/*reacting-to-input-with-state*/}
 
-باستخدام React، لن تستطيع تعديل واجهة المستخدم عن طريق الكود مباشرة. على سبيل المثال، لن تكتب أوامر مثل "عطل الزر"، "فعل الزر"، "أظهر رسالة النجاح"، إلخ. بدلا عن ذلك، سوف تصف واجهة المستخدم التي تريد أن ترها للحالات المرئية من مكوناتك ("حالة ابتدائية"، "حالة كتابية"، "حالة ناجحة")، ومن بعدها تنشيط تغيرات الحالة بناءا على مدخل المستخدم. هذا مشابه لتصور المصممين عن واجهة المستخدم.
+باستخدام React، لن تستطيع تعديل واجهة المستخدم (UI) عن طريق الكود مباشرة. على سبيل المثال، لن تكتب أوامر مثل "عطل الزر"، "فعل الزر"، "أظهر رسالة النجاح"، إلخ. بدلا عن ذلك، سوف تصف واجهة المستخدم التي تريد أن تراها للحالات المرئية من مكوناتك ("حالة ابتدائية (initial state)"، "حالة كتابية (typing state)"، "حالة ناجحة (success state)")، ومن بعدها تنشيط تغيرات الحالة بناء على مدخل المستخدم. هذا مشابه لتصور المصممين عن واجهة المستخدم.
 
 هنا نموذج اختبار صمم باستخدام React. لاحظ كيف يستخدم متغير الحالة `status` لكي يحدد ما إذا سيفعل أم سيعطل زر الإرسال، وما إذا ستظهر رسالة نجاح بدلا عن ذلك.
 
@@ -109,7 +109,7 @@ function submitForm(answer) {
 
 <LearnMore path="/learn/reacting-to-input-with-state">
 
-اقرأ **[الاستجابة للمدخلات باستخدام الحالة](/learn/reacting-to-input-with-state)** لكي تتعلم كيفية الوصول لتعاملات مع عقلية معتمدة على الحالة.  
+اقرأ **[الاستجابة للمدخلات باستخدام الحالة](/learn/reacting-to-input-with-state)** لكي تتعلم كيفية التعامل مع التفاعلات بعقلية موجّهة بناء على الحالة.  
 
 </LearnMore>
 
@@ -232,7 +232,7 @@ label { display: block; margin-bottom: 5px; }
 
 ## مشاركة الحالة بين المكونات {/*sharing-state-between-components*/}
 
-أحيانا، أنت تريد الحالة ذات المكونين أن تتغير دائما مع بعضها البعض. لعمل ذلك، احذف حالة من كليهما، انقلها لأقرب مكون أب، وبعد ذلك مررها لأسفل باستخدام الخصائص. هذا ما يعرف بـ "رفع الحالة لمستوى أعلى (lifting state up)"، وهو واحد من أكثر الأشياء شيوعا التي ستسعملها أثناء كتابتك لكود React.
+أحيانا، أنت تريد الحالة ذات المكونين أن تتغير دائما مع بعضها البعض. لعمل ذلك، احذف حالة من كليهما، انقلها لأقرب مكون أب، وبعد ذلك مررها لأسفل باستخدام الخصائص (props). هذا ما يعرف بـ "رفع الحالة لمستوى أعلى (lifting state up)"، وهو واحد من أكثر الأشياء شيوعا التي ستسعملها أثناء كتابتك لكود React.
 
 في هذا المثال، في كل مرة يجب أن تكون قائمة واحدة فقط نشطة. لتحقيق ذلك، بدلا من حفظ الحالة النشطة داخل كل قائمة بمفردها، المكونّ الأب يحمل الحالة ويحدد الخصائص لمكوناته الأبناء. 
 
@@ -258,7 +258,7 @@ export default function Accordion() {
         isActive={activeIndex === 1}
         onShow={() => setActiveIndex(1)}
       >
-        الاسم مأخوذ من <span lang="kk-KZ">алма</span>، الكلمة الكازاخستانية التي تعني "تفاحة" وغالبا تترجم على أنها "مليئة بالتفاح". في الحقيقة، المنطقة المحيطة بـ Almaty تعتبر الموطن الأصلي للتفاحة، والنوع البريّ <i lang="la">Malus sieversii</i> يعتبر أقرب مرشح 
+        الاسم مأخوذ من <span lang="kk-KZ">алма</span>، الكلمة الكازاخستانية التي تعني "تفاحة" وغالبا تترجم على أنها "مليئة بالتفاح". في الحقيقة، المنطقة المحيطة بـ Almaty تعتبر الموطن الأصلي للتفاح، والنوع البريّ <i lang="la">Malus sieversii</i> يعتبر أقرب مرشح لكونه أصل للتفاح المحلي الحديث.
       </Panel>
     </>
   );
@@ -303,7 +303,7 @@ h3, p { margin: 5px 0px; }
 
 ## حفظ وإعادة تعيين الحالة {/*preserving-and-resetting-state*/}
 
-عمدما تعيد تصيير مكون، React تحتاج لتقرر أىّ أجزاء من الشجرة لتحفظها (وتحدثها)، وأيّ أجزاء لتلغيها أو تعيد إنشاءها من الصفر. في أغلب الحالات، التصرف التلقائي لـ React يعمل بشكل جيد كفاية. تلقائياـ React تحفظ الأجزاء من الشجرة التي "تتوافق" مع مكون الشجرة المصيير مسبقا. 
+عندما تعيد تصيير مكون، React تحتاج لتقرر أىّ أجزاء من الشجرة لتحفظها (وتحدثها)، وأيّ أجزاء لتلغيها أو تعيد إنشاءها من الصفر. في أغلب الحالات، التصرف التلقائي لـ React يعمل بشكل جيد كفاية. تلقائيا، React تحفظ الأجزاء من الشجرة التي "تتوافق" مع مكون الشجرة المصيّر مسبقا. 
 
 على كل حال، أحيانا هذا ما لا تريده أنت. في تطبيق المحادثة هذا، كتابة رسالة وتغيير الطرف المستقبل لا يعيد تعيين المدخل. هذا قد يجعل المستخدم يرسل رسالة بغير قصد للشخص الخطأ.
 
@@ -400,7 +400,7 @@ textarea {
 
 </Sandpack>
 
-React تعطيك القدرة على تجاوز السلوك الافتراضي، و*تفرض* على المكون إعادة تعيين حالته عن طريق تمرير `key` مختلف لها، مثل `<Chat key={email} />`. هذا يخبر React أن الطرف المستقبل مختلف، ومن الواجب تعيين مكون `Chat` *مختلف* يكون بحاجة إلى إعادة الإنشاء من الصفر ببايانات جديدة (وواجهة مستخدم مثل المدخلات). الآن الانتقال بين المستقبلين يعيد تعيين حقل الإدخال--حتى بالرغم من أنك تعيد تصيير نفس المكون.
+React تعطيك القدرة على تجاوز السلوك الافتراضي، و*الفرض* على المكون إعادة تعيين حالته عن طريق تمرير `key` مختلف لها، مثل `<Chat key={email} />`. هذا يخبر React أن الطرف المستقبل مختلف، ومن الواجب تعيين مكون `Chat` *مختلف* يكون بحاجة إلى إعادة الإنشاء من الصفر ببايانات جديدة (وواجهة مستخدم مطابقة للمدخلات). الآن الانتقال بين المستقبلين يعيد تعيين حقل الإدخال--حتى بالرغم من أنك تعيد تصيير نفس المكون.
 
 <Sandpack>
 
@@ -497,13 +497,13 @@ textarea {
 
 <LearnMore path="/learn/preserving-and-resetting-state">
 
-اقرأ **[حفظ وإعادة تعيين الحالة](/learn/preserving-and-resetting-state)** لتتعلم الحياة الزمنية للحالة وكيفية التحكم بها.
+اقرأ **[حفظ وإعادة تعيين الحالة](/learn/preserving-and-resetting-state)** لتتعلم عن الحياة الزمنية للحالة وكيفية التحكم بها.
 
 </LearnMore>
 
 ## استخلاص منطق الحالة إلى مخفض (reducer) {/*extracting-state-logic-into-a-reducer*/}
 
-المكونات ذات تحديثات حالة كثيرة المنتشرة خلال كثير من معالجات الأحداث (event handlers) قد تصبح معقدة. لمثل هذه الأحوال، يمكنك تجميع جميع منطق تحديث الحالة خارج مكوّنك داخل دالة واحدة، تدعى "مخفض (reducer)". معالجات الأحداث خاصتك ستصبح موجزة لأنها تحدد "إجراءات (actions)" المستخدم فقط. في أسفل الملف، دالة المخفض تحدد كيف يجب أن تحدث الحالة إستجابة لكل إجراء!
+المكونات ذات تحديثات حالة كثيرة المنتشرة خلال كثير من معالجات الأحداث (event handlers) قد تصبح معقدة. لمثل هذه الأحوال، يمكنك تجميع جميع منطق تحديث الحالة خارج مكوّنك داخل دالة واحدة، تدعى "مخفض (reducer)". معالجات الأحداث خاصتك ستصبح موجزة لأنها تحدد "إجراءات (actions)" المستخدم فقط. في أسفل الملف، دالة المخفض تحدد كيف يجب أن تحدث الحالة استجابةً لكل إجراء!
 
 <Sandpack>
 
@@ -542,7 +542,7 @@ export default function TaskApp() {
 
   return (
     <>
-      <h1>Prague itinerary</h1>
+      <h1>Prague مخطط رحلة</h1>
       <AddTask
         onAddTask={handleAddTask}
       />
@@ -584,9 +584,9 @@ function tasksReducer(tasks, action) {
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Visit Kafka Museum', done: true },
-  { id: 1, text: 'Watch a puppet show', done: false },
-  { id: 2, text: 'Lennon Wall pic', done: false }
+  { id: 0, text: 'زيارة متحف Kafka', done: true },
+  { id: 1, text: 'مشاهدة عرض الدمى', done: false },
+  { id: 2, text: 'Lennon Wall صورة', done: false }
 ];
 ```
 
@@ -598,14 +598,14 @@ export default function AddTask({ onAddTask }) {
   return (
     <>
       <input
-        placeholder="Add task"
+        placeholder="إضافة مهمة"
         value={text}
         onChange={e => setText(e.target.value)}
       />
       <button onClick={() => {
         setText('');
         onAddTask(text);
-      }}>Add</button>
+      }}>أضف</button>
     </>
   )
 }
@@ -649,7 +649,7 @@ function Task({ task, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          حفظ
         </button>
       </>
     );
@@ -658,7 +658,7 @@ function Task({ task, onChange, onDelete }) {
       <>
         {task.text}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          تعديل
         </button>
       </>
     );
@@ -677,7 +677,7 @@ function Task({ task, onChange, onDelete }) {
       />
       {taskContent}
       <button onClick={() => onDelete(task.id)}>
-        Delete
+        حذف
       </button>
     </label>
   );
@@ -702,7 +702,7 @@ ul, li { margin: 0; padding: 0; }
 
 عادة، سوف تقوم بتمرير معلومات من مكوّن أب إلى مكوّن ابن بواسطة الخصائص (props). لكن تمرير الخصائص قد يكون غير مجدٍ لو احتجت لتمرير بعض الخصائص خلال مكونات عديدة، أو لو أن العديد من المكونات تحتاج نفس المعلومات. السياق (context) يتيح للمكون الأب جعل بعض المعلومات متوفرة لأي مكون أدناه في الشجرة-لا يهم مقدار عمق المكون-بدون تمريرها مباشرة عن طريق الخصائص.
 
-هنا، المكوّن `Heading` يحدد مستوى عنوانه عن طريق "سؤال" أقرب `Section` لمستواها. كل `Section` يتتبع مستواه الخاص عن طريق سؤال `Section` الأب وإضافة واحد له. كل `Section` بتوفير معلومات لجميع المكونات أدناه دون نقل الخصائص--وهذا يتم عبر السياق (context).
+هنا، المكوّن `Heading` يحدد مستوى عنوانه عن طريق "سؤال" أقرب `Section` لمستواه. كل `Section` يتتبع مستواه الخاص عن طريق سؤال `Section` الأب وإضافة واحد له. كل `Section` يقوم بتوفير معلومات لجميع المكونات أدناه دون نقل الخصائص--وهذا يتم عبر السياق (context).
 
 <Sandpack>
 
@@ -713,19 +713,19 @@ import Section from './Section.js';
 export default function Page() {
   return (
     <Section>
-      <Heading>Title</Heading>
+      <Heading>عنوان</Heading>
       <Section>
-        <Heading>Heading</Heading>
-        <Heading>Heading</Heading>
-        <Heading>Heading</Heading>
+        <Heading>عنوان رئيسي</Heading>
+        <Heading>عنوان رئيسي</Heading>
+        <Heading>عنوان رئيسي</Heading>
         <Section>
-          <Heading>Sub-heading</Heading>
-          <Heading>Sub-heading</Heading>
-          <Heading>Sub-heading</Heading>
+          <Heading>عنوان فرعي</Heading>
+          <Heading>عنوان فرعي</Heading>
+          <Heading>عنوان فرعي</Heading>
           <Section>
-            <Heading>Sub-sub-heading</Heading>
-            <Heading>Sub-sub-heading</Heading>
-            <Heading>Sub-sub-heading</Heading>
+            <Heading>عنوان فرعي ثانٍ</Heading>
+            <Heading>عنوان فرعي ثانٍ</Heading>
+            <Heading>عنوان فرعي ثانٍ</Heading>
           </Section>
         </Section>
       </Section>
@@ -816,7 +816,7 @@ import { TasksProvider } from './TasksContext.js';
 export default function TaskApp() {
   return (
     <TasksProvider>
-      <h1>Day off in Kyoto</h1>
+      <h1>يوم إجازة في Kyoto</h1>
       <AddTask />
       <TaskList />
     </TasksProvider>
@@ -883,9 +883,9 @@ function tasksReducer(tasks, action) {
 }
 
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true },
-  { id: 1, text: 'Visit the temple', done: false },
-  { id: 2, text: 'Drink matcha', done: false }
+  { id: 0, text: 'Philosopher’الطريق الـ', done: true },
+  { id: 1, text: 'زيارة المعبد', done: false },
+  { id: 2, text: 'شراب الشاي الأخضر (matcha)', done: false }
 ];
 ```
 
@@ -899,7 +899,7 @@ export default function AddTask({ onAddTask }) {
   return (
     <>
       <input
-        placeholder="Add task"
+        placeholder="إضافة مهمة"
         value={text}
         onChange={e => setText(e.target.value)}
       />
@@ -910,7 +910,7 @@ export default function AddTask({ onAddTask }) {
           id: nextId++,
           text: text,
         });
-      }}>Add</button>
+      }}>أضف</button>
     </>
   );
 }
@@ -954,7 +954,7 @@ function Task({ task }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          حفظ
         </button>
       </>
     );
@@ -963,7 +963,7 @@ function Task({ task }) {
       <>
         {task.text}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          تعديل
         </button>
       </>
     );
@@ -990,7 +990,7 @@ function Task({ task }) {
           id: task.id
         });
       }}>
-        Delete
+        حذف
       </button>
     </label>
   );
@@ -1007,7 +1007,7 @@ ul, li { margin: 0; padding: 0; }
 
 <LearnMore path="/learn/scaling-up-with-reducer-and-context">
 
-اقرأ **[التوسع بواسطة المخفض (reducer) و السياق (context)](/learn/scaling-up-with-reducer-and-context)** لتتعلم كيف تتوسع إدارة الحالة في تطبيق نامٍ.
+اقرأ **[التوسع بواسطة المخفض (reducer) و السياق (context)](/learn/scaling-up-with-reducer-and-context)** لتتعلم كيف توسيع إدارة الحالة في تطبيق نامٍ.
 
 </LearnMore>
 
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index f3f4e0d69..f2aadba06 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -121,7 +121,7 @@
       ]
     },
     {
-      "title": "إدارة الحالة",
+      "title": "التحكم في الحالة",
       "path": "/learn/managing-state",
       "tags": ["intermediate"],
       "routes": [

From 3dfb0457b7585c9726e1ab5356967281179883a2 Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Sat, 19 Aug 2023 04:22:49 +0300
Subject: [PATCH 05/28] Transting managing state     - removed an apostrophe

---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 0cf0deeb8..c17796a8c 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -883,7 +883,7 @@ function tasksReducer(tasks, action) {
 }
 
 const initialTasks = [
-  { id: 0, text: 'Philosopher’الطريق الـ', done: true },
+  { id: 0, text: 'Philosopherالطريق الـ', done: true },
   { id: 1, text: 'زيارة المعبد', done: false },
   { id: 2, text: 'شراب الشاي الأخضر (matcha)', done: false }
 ];

From 763989824f9a748992d2af5fa1079118ed97af5e Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Sat, 19 Aug 2023 04:26:44 +0300
Subject: [PATCH 06/28] Translating manging state     - typos mistake in
 sidebarLearn

---
 src/sidebarLearn.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index da7c96bab..f00150d42 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -138,7 +138,7 @@
           "path": "/learn/choosing-the-state-structure"
         },
         {
-          "title": "مشاكة الحالة بين المكونات",
+          "title": "مشاركة الحالة بين المكونات",
           "path": "/learn/sharing-state-between-components"
         },
         {

From 3670ae5a8a80db824299c2f11b99abc660cffe90 Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Sat, 19 Aug 2023 04:50:14 +0300
Subject: [PATCH 07/28] =?UTF-8?q?Translating=20managing=20state=20=20=20?=
 =?UTF-8?q?=20=20-=20Keep=20'Philosopher=E2=80=99s=20Path'=20untranslated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index c17796a8c..73f0557c4 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -883,7 +883,7 @@ function tasksReducer(tasks, action) {
 }
 
 const initialTasks = [
-  { id: 0, text: 'Philosopherالطريق الـ', done: true },
+  { id: 0, text: 'Philosopher’s Path', done: true },
   { id: 1, text: 'زيارة المعبد', done: false },
   { id: 2, text: 'شراب الشاي الأخضر (matcha)', done: false }
 ];

From 4e70aa549f610571da8e956c1f9082a773a4fcdd Mon Sep 17 00:00:00 2001
From: A7med3bdulBaset <A7med3bdulBaset@gmail.com>
Date: Tue, 22 Aug 2023 02:08:57 +0300
Subject: [PATCH 08/28] feat: set dir=rtl & translate users name in an example

---
 src/content/learn/managing-state.md | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 73f0557c4..fbc2fa5d5 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -102,6 +102,7 @@ function submitForm(answer) {
 ```
 
 ```css
+body { direction: rtl; }
 .Error { color: red; }
 ```
 
@@ -217,6 +218,7 @@ export default function Form() {
 ```
 
 ```css
+body { direction: rtl; }
 label { display: block; margin-bottom: 5px; }
 ```
 
@@ -286,6 +288,7 @@ function Panel({
 ```
 
 ```css
+body { direction: rtl; }
 h3, p { margin: 5px 0px; }
 .panel {
   padding: 10px;
@@ -329,9 +332,9 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { name: 'Taylor', email: 'taylor@mail.com' },
-  { name: 'Alice', email: 'alice@mail.com' },
-  { name: 'Bob', email: 'bob@mail.com' }
+  { name: 'علي', email: 'ali12@mail.com' },
+  { name: 'هند', email: 'hend@mail.com' },
+  { name: 'سعد', email: 'sa2d@mail.com' }
 ];
 ```
 
@@ -379,6 +382,7 @@ export default function Chat({ contact }) {
 ```
 
 ```css
+body { direction: rtl; }
 .chat, .contact-list {
   float: left;
   margin-bottom: 20px;
@@ -424,9 +428,9 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { name: 'Taylor', email: 'taylor@mail.com' },
-  { name: 'Alice', email: 'alice@mail.com' },
-  { name: 'Bob', email: 'bob@mail.com' }
+  { name: 'علي', email: 'ali12@mail.com' },
+  { name: 'هند', email: 'hend@mail.com' },
+  { name: 'سعد', email: 'sa2d@mail.com' }
 ];
 ```
 
@@ -474,6 +478,7 @@ export default function Chat({ contact }) {
 ```
 
 ```css
+body { direction: rtl; }
 .chat, .contact-list {
   float: left;
   margin-bottom: 20px;

From 9c0d5d1f822f80e4b81c026df44030ac2716cabe Mon Sep 17 00:00:00 2001
From: A7med3bdulBaset <A7med3bdulBaset@gmail.com>
Date: Tue, 22 Aug 2023 02:23:08 +0300
Subject: [PATCH 09/28] set dir=rtl

---
 src/content/learn/managing-state.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index fbc2fa5d5..a6cb76c38 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -690,6 +690,7 @@ function Task({ task, onChange, onDelete }) {
 ```
 
 ```css
+body { direction: rtl; }
 button { margin: 5px; }
 li { list-style-type: none; }
 ul, li { margin: 0; padding: 0; }
@@ -789,6 +790,7 @@ export const LevelContext = createContext(0);
 ```
 
 ```css
+body { direction: rtl; }
 .section {
   padding: 10px;
   margin: 5px;
@@ -888,7 +890,7 @@ function tasksReducer(tasks, action) {
 }
 
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 0, text: 'شارع Philosopher', done: true },
   { id: 1, text: 'زيارة المعبد', done: false },
   { id: 2, text: 'شراب الشاي الأخضر (matcha)', done: false }
 ];
@@ -1003,6 +1005,7 @@ function Task({ task }) {
 ```
 
 ```css
+body { direction: rtl; }
 button { margin: 5px; }
 li { list-style-type: none; }
 ul, li { margin: 0; padding: 0; }

From c13cf644e7aabeca6bc0506877b3ae3949e94679 Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:37:39 +0300
Subject: [PATCH 10/28] Update Managing State

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index fbc2fa5d5..983e67df2 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -116,7 +116,7 @@ body { direction: rtl; }
 
 ## اختيار هيكل الحالة {/*choosing-the-state-structure*/}
 
-هيكلة الحالة جيدا يستطيع أن يصنع فارقا بين مكوّن قابل للإصلاح والتصحيح، وآخر يمثل مصدرا ثابتا للأخطاء. القاعدة الأكثر أهمية هي أنه لا يجب للحالة أن تحتوي على بيانات مكررة أو منسوخة. لو وجدت حالة غير ضرورية، فمن السهل نسيان تحديثها، وحدوث الأخطاء.
+هيكلة الحالة جيدا يمكن أن يصنع فارقا بين مكوّن قابل للإصلاح والتصحيح، وآخر يمثل مصدرا ثابتا للأخطاء. القاعدة الأكثر أهمية هي أنه لا يجب للحالة أن تحتوي على بيانات مكررة أو منسوخة. لو وجدت حالة غير ضرورية، فمن السهل نسيان تحديثها، وحدوث الأخطاء.
 
 على سبيل المثال، هذا نموذج يتضمن متغير الحالة `fullName` **مكرر**:
 

From a9f07ff1340ad4691070e7ce1eda924762493826 Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:40:14 +0300
Subject: [PATCH 11/28] Fix typos

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 983e67df2..564dbd153 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -171,7 +171,7 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-يمكنك حذفه وتبسيط الكود عن طريق جمع `fullName` بينما يصيّر المكوّن:
+يمكنك حذفه وتبسيط الكود عن طريق جمع `fullName` بينما يُصيّر المكوّن:
 
 <Sandpack>
 

From 328e4625860b0e561c8229a4f5fc0b857ac37b8d Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:41:42 +0300
Subject: [PATCH 12/28] fixing typos & rephrasing

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 564dbd153..b5552ff23 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -234,7 +234,7 @@ label { display: block; margin-bottom: 5px; }
 
 ## مشاركة الحالة بين المكونات {/*sharing-state-between-components*/}
 
-أحيانا، أنت تريد الحالة ذات المكونين أن تتغير دائما مع بعضها البعض. لعمل ذلك، احذف حالة من كليهما، انقلها لأقرب مكون أب، وبعد ذلك مررها لأسفل باستخدام الخصائص (props). هذا ما يعرف بـ "رفع الحالة لمستوى أعلى (lifting state up)"، وهو واحد من أكثر الأشياء شيوعا التي ستسعملها أثناء كتابتك لكود React.
+أحيانا، تريد حالة مكونين أن تتغير دائما مع بعضها البعض. لعمل ذلك، احذف الحالة من كليهما، وانقلها لأقرب مكون أب مشترك، وبعد ذلك مررها لأسفل باستخدام الخصائص (props). هذا ما يعرف بـ "رفع الحالة لمستوى أعلى (lifting state up)"، وهو واحد من أكثر الأشياء شيوعا التي ستستعملها أثناء كتابتك لكود React.
 
 في هذا المثال، في كل مرة يجب أن تكون قائمة واحدة فقط نشطة. لتحقيق ذلك، بدلا من حفظ الحالة النشطة داخل كل قائمة بمفردها، المكونّ الأب يحمل الحالة ويحدد الخصائص لمكوناته الأبناء. 
 

From 15f8c2db855c51eb5435b06f9fe228e6113cdcea Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:42:02 +0300
Subject: [PATCH 13/28] fixing typos & rephrasing

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index b5552ff23..e8e081ea2 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -306,7 +306,7 @@ h3, p { margin: 5px 0px; }
 
 ## حفظ وإعادة تعيين الحالة {/*preserving-and-resetting-state*/}
 
-عندما تعيد تصيير مكون، React تحتاج لتقرر أىّ أجزاء من الشجرة لتحفظها (وتحدثها)، وأيّ أجزاء لتلغيها أو تعيد إنشاءها من الصفر. في أغلب الحالات، التصرف التلقائي لـ React يعمل بشكل جيد كفاية. تلقائيا، React تحفظ الأجزاء من الشجرة التي "تتوافق" مع مكون الشجرة المصيّر مسبقا. 
+عندما تعيد تصيير مكون، React تحتاج لتقرر أىّ أجزاء شجرة المكونات تحفظها (وتحدثها)، وأيّ أجزاءها تلغيها أو تعيد إنشاءها من الصفر. في أغلب الحالات، التصرف التلقائي لـ React يعمل بشكل جيد كفاية. تحفظ React تلقائيًا أجزاء الشجرة التي "تتوافق" مع مكون الشجرة المصيّر مسبقا. 
 
 على كل حال، أحيانا هذا ما لا تريده أنت. في تطبيق المحادثة هذا، كتابة رسالة وتغيير الطرف المستقبل لا يعيد تعيين المدخل. هذا قد يجعل المستخدم يرسل رسالة بغير قصد للشخص الخطأ.
 

From 8e1665b8ba73f2b39d97863c6bcf8eeb61edc8e6 Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:43:10 +0300
Subject: [PATCH 14/28] fixing typos & rephrasing

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index e8e081ea2..abbf9cf7d 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -404,7 +404,7 @@ textarea {
 
 </Sandpack>
 
-React تعطيك القدرة على تجاوز السلوك الافتراضي، و*الفرض* على المكون إعادة تعيين حالته عن طريق تمرير `key` مختلف لها، مثل `<Chat key={email} />`. هذا يخبر React أن الطرف المستقبل مختلف، ومن الواجب تعيين مكون `Chat` *مختلف* يكون بحاجة إلى إعادة الإنشاء من الصفر ببايانات جديدة (وواجهة مستخدم مطابقة للمدخلات). الآن الانتقال بين المستقبلين يعيد تعيين حقل الإدخال--حتى بالرغم من أنك تعيد تصيير نفس المكون.
+تعطيك React القدرة على تجاوز السلوك الافتراضي، و*إجبار* المكون إعادة تعيين حالته عن طريق تمرير `key` مختلف لها، مثل `<Chat key={email} />`. هذا يخبر React أن الطرف المستقبل مختلف، ومن الواجب تعيين مكون `Chat` *مختلف* يكون بحاجة إلى إعادة الإنشاء من الصفر ببايانات جديدة (وواجهة مستخدم مطابقة للمدخلات). الآن الانتقال بين المستقبلين يعيد تعيين حقل الإدخال -- حتى بالرغم من أنك تعيد تصيير نفس المكون.
 
 <Sandpack>
 

From 2d8ac7b36b68698e04f301c8e59428bbaa26dfef Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:44:21 +0300
Subject: [PATCH 15/28] Spacing mistakes

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index abbf9cf7d..de87dc71a 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -705,7 +705,7 @@ ul, li { margin: 0; padding: 0; }
 
 ## تمرير البيانات إلى عمق باستخدام السياق (context) {/*passing-data-deeply-with-context*/}
 
-عادة، سوف تقوم بتمرير معلومات من مكوّن أب إلى مكوّن ابن بواسطة الخصائص (props). لكن تمرير الخصائص قد يكون غير مجدٍ لو احتجت لتمرير بعض الخصائص خلال مكونات عديدة، أو لو أن العديد من المكونات تحتاج نفس المعلومات. السياق (context) يتيح للمكون الأب جعل بعض المعلومات متوفرة لأي مكون أدناه في الشجرة-لا يهم مقدار عمق المكون-بدون تمريرها مباشرة عن طريق الخصائص.
+عادة، سوف تقوم بتمرير معلومات من مكوّن أب إلى مكوّن ابن بواسطة الخصائص (props). لكن تمرير الخصائص قد يكون غير مجدٍ لو احتجت لتمرير بعض الخصائص خلال مكونات عديدة، أو لو أن العديد من المكونات تحتاج نفس المعلومات. السياق (context) يتيح للمكون الأب جعل بعض المعلومات متوفرة لأي مكون أدناه في الشجرة -لا يهم مقدار عمق المكون- بدون تمريرها مباشرة عن طريق الخصائص.
 
 هنا، المكوّن `Heading` يحدد مستوى عنوانه عن طريق "سؤال" أقرب `Section` لمستواه. كل `Section` يتتبع مستواه الخاص عن طريق سؤال `Section` الأب وإضافة واحد له. كل `Section` يقوم بتوفير معلومات لجميع المكونات أدناه دون نقل الخصائص--وهذا يتم عبر السياق (context).
 

From e1108c8f633a731122960457b2cbdd6be1d0fb0b Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:44:57 +0300
Subject: [PATCH 16/28] Spacing mistakes

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index de87dc71a..49892ea73 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -707,7 +707,7 @@ ul, li { margin: 0; padding: 0; }
 
 عادة، سوف تقوم بتمرير معلومات من مكوّن أب إلى مكوّن ابن بواسطة الخصائص (props). لكن تمرير الخصائص قد يكون غير مجدٍ لو احتجت لتمرير بعض الخصائص خلال مكونات عديدة، أو لو أن العديد من المكونات تحتاج نفس المعلومات. السياق (context) يتيح للمكون الأب جعل بعض المعلومات متوفرة لأي مكون أدناه في الشجرة -لا يهم مقدار عمق المكون- بدون تمريرها مباشرة عن طريق الخصائص.
 
-هنا، المكوّن `Heading` يحدد مستوى عنوانه عن طريق "سؤال" أقرب `Section` لمستواه. كل `Section` يتتبع مستواه الخاص عن طريق سؤال `Section` الأب وإضافة واحد له. كل `Section` يقوم بتوفير معلومات لجميع المكونات أدناه دون نقل الخصائص--وهذا يتم عبر السياق (context).
+هنا، المكوّن `Heading` يحدد مستوى عنوانه عن طريق "سؤال" أقرب `Section` لمستواه. كل `Section` يتتبع مستواه الخاص عن طريق سؤال `Section` الأب وإضافة واحد له. كل `Section` يقوم بتوفير معلومات لجميع المكونات أدناه دون نقل الخصائص -- وهذا يتم عبر السياق (context).
 
 <Sandpack>
 

From 86892b19b004b8234638ad9720cb1df0dd206416 Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:46:18 +0300
Subject: [PATCH 17/28] fixing typo

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 49892ea73..432217622 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -807,7 +807,7 @@ export const LevelContext = createContext(0);
 
 ## التوسع بواسطة المخفض (reducer) و السياق (context) {/*scaling-up-with-reducer-and-context*/}
 
-المخفضات (Reducers) تتيح لك تجميع منطق تحديث الحالة لمكون. السياق (Context) تتيح لك تمرير معلومات بعمق إلى أسفل لمكونات أخرى. يمكنك جمع المخفضات والسايق معا لتدير الحالة الخاصة بشاشة معقدة.
+المخفضات (Reducers) تتيح لك تجميع منطق تحديث الحالة لمكون. السياق (Context) يتيح لك تمرير معلومات بعمق إلى أسفل لمكونات أخرى. يمكنك جمع المخفضات والسايق معا لتدير الحالة الخاصة بشاشة معقدة.
 
 مع هذا النهج، يدير المكون الأب حالة معقدة بواسطة مخفض. المكونات الأخرى في أي عمق كانت داخل الشجرة يمكن قراءة حالتها بواسطة السياق. يمكنهم أيضا إرسال الأوامر لتحديث الحالة.
 

From 59ea31da41b0083c066bcd85e01fd48d43311f03 Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:53:49 +0300
Subject: [PATCH 18/28] Undo titles translation

---
 src/sidebarLearn.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index e3f426fca..7b7799245 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -130,31 +130,31 @@
       "tags": ["intermediate"],
       "routes": [
         {
-          "title": "الاستجابة للمدخلات باستخدام الحالة",
+          "title": "Reacting to Input with State",
           "path": "/learn/reacting-to-input-with-state"
         },
         {
-          "title": "اختيار هيكل الحالة",
+          "title": "Chossing 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"
         }
       ]

From ffac50cc3df1191c2e832e3aa75d91add514b9d3 Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 07:55:31 +0300
Subject: [PATCH 19/28] Undo titles translation

---
 src/sidebarLearn.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 7b7799245..fe4779a18 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -125,7 +125,7 @@
       ]
     },
     {
-      "title": "التحكم في الحالة",
+      "title": "Managing State",
       "path": "/learn/managing-state",
       "tags": ["intermediate"],
       "routes": [
@@ -134,7 +134,7 @@
           "path": "/learn/reacting-to-input-with-state"
         },
         {
-          "title": "Chossing the State Structure",
+          "title": "Choosing the State Structure",
           "path": "/learn/choosing-the-state-structure"
         },
         {
@@ -146,7 +146,7 @@
           "path": "/learn/preserving-and-resetting-state"
         },
         {
-          "title": "Extracting State Logic Into a Reducer",
+          "title": "Extracting State Logic into a Reducer",
           "path": "/learn/extracting-state-logic-into-a-reducer"
         },
         {

From 82c72fbf8d16535d64a05d90b4521d516d3523b1 Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 09:55:24 +0300
Subject: [PATCH 20/28] Fix RTL for Code Blocks

---
 src/content/learn/managing-state.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 432217622..b0e38c04f 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -166,6 +166,7 @@ export default function Form() {
 ```
 
 ```css
+body { direction: rtl; }
 label { display: block; margin-bottom: 5px; }
 ```
 
@@ -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 {
@@ -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 {
@@ -690,6 +691,7 @@ function Task({ task, onChange, onDelete }) {
 ```
 
 ```css
+body { direction: rtl; }
 button { margin: 5px; }
 li { list-style-type: none; }
 ul, li { margin: 0; padding: 0; }
@@ -789,6 +791,7 @@ export const LevelContext = createContext(0);
 ```
 
 ```css
+body { direction: rtl; }
 .section {
   padding: 10px;
   margin: 5px;
@@ -1003,6 +1006,7 @@ function Task({ task }) {
 ```
 
 ```css
+body { direction: rtl; }
 button { margin: 5px; }
 li { list-style-type: none; }
 ul, li { margin: 0; padding: 0; }

From 04ac7a473f4dfe998ef170bd251e92f1848e596c Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 09:58:27 +0300
Subject: [PATCH 21/28] Fix RTL

---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index b0e38c04f..d46d19a5b 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -548,7 +548,7 @@ export default function TaskApp() {
 
   return (
     <>
-      <h1>Prague مخطط رحلة</h1>
+      <h1>مخطط رحلة Prague</h1>
       <AddTask
         onAddTask={handleAddTask}
       />

From 282e01e1503b76f2209c2ecf20574588fef4d002 Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 10:02:46 +0300
Subject: [PATCH 22/28] Update Managing State Page     - Fix RTL     - words
 left without translations

---
 src/content/learn/managing-state.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index d46d19a5b..5f4a174d4 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -250,14 +250,14 @@ export default function Accordion() {
     <>
       <h2>Almaty, Kazakhstan</h2>
       <Panel
-        title="About"
+        title="نبذة"
         isActive={activeIndex === 0}
         onShow={() => setActiveIndex(0)}
       >
         مع تعداد سكاني يقارب 2 مليون، Almaty هي أكبر مدينة بـ Kazakhstan. منذ 1929 إلى 1997 كانت هي العاصمة.
       </Panel>
       <Panel
-        title="Etymology"
+        title="أصل الكلمة"
         isActive={activeIndex === 1}
         onShow={() => setActiveIndex(1)}
       >
@@ -568,7 +568,7 @@ function tasksReducer(tasks, action) {
         id: action.id,
         text: action.text,
         done: false
-      }];
+      }];ِ
     }
     case 'changed': {
       return tasks.map(t => {
@@ -592,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 }
 ];
 ```
 

From df89ec80fea49e8621d875207c04bca348f24954 Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 10:22:18 +0300
Subject: [PATCH 23/28] Fix typos

---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 5f4a174d4..9295af494 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -261,7 +261,7 @@ export default function Accordion() {
         isActive={activeIndex === 1}
         onShow={() => setActiveIndex(1)}
       >
-        الاسم مأخوذ من <span lang="kk-KZ">алма</span>، الكلمة الكازاخستانية التي تعني "تفاحة" وغالبا تترجم على أنها "مليئة بالتفاح". في الحقيقة، المنطقة المحيطة بـ Almaty تعتبر الموطن الأصلي للتفاح، والنوع البريّ <i lang="la">Malus sieversii</i> يعتبر أقرب مرشح لكونه أصل للتفاح المحلي الحديث.
+        الاسم مأخوذ من <span lang="kk-KZ">алма</span>، الكلمة الكازاخية التي تعني "تفاحة" وغالبا تترجم على أنها "مليئة بالتفاح". في الحقيقة، المنطقة المحيطة بـ Almaty تعتبر الموطن الأصلي للتفاح، والنوع البريّ <i lang="la">Malus sieversii</i> يعتبر أقرب مرشح لكونه أصل للتفاح المحلي الحديث.
       </Panel>
     </>
   );

From 81b75ef4d2bf561668fcc40100002f0ecacf6d18 Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 11:20:19 +0300
Subject: [PATCH 24/28] Fix Typos

---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 9295af494..9863447ad 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -568,7 +568,7 @@ function tasksReducer(tasks, action) {
         id: action.id,
         text: action.text,
         done: false
-      }];ِ
+      }];
     }
     case 'changed': {
       return tasks.map(t => {

From c9b943f0f1b8f77a7b1da5322c50c2ba2fdd751b Mon Sep 17 00:00:00 2001
From: Rumbustious <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 11:23:49 +0300
Subject: [PATCH 25/28] Translating managing state     - Translate words that
 were left untranslated.

---
 src/content/learn/managing-state.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 9863447ad..f753145ab 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -248,20 +248,20 @@ export default function Accordion() {
   const [activeIndex, setActiveIndex] = useState(0);
   return (
     <>
-      <h2>Almaty, Kazakhstan</h2>
+      <h2>ألماتي، كازاخستان</h2>
       <Panel
         title="نبذة"
         isActive={activeIndex === 0}
         onShow={() => setActiveIndex(0)}
       >
-        مع تعداد سكاني يقارب 2 مليون، Almaty هي أكبر مدينة بـ Kazakhstan. منذ 1929 إلى 1997 كانت هي العاصمة.
+        مع تعداد سكاني يقارب 2 مليون، ألماتي هي أكبر مدينة بكازاخستان. منذ 1929 إلى 1997 كانت هي العاصمة.
       </Panel>
       <Panel
         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>
     </>
   );

From 61241c6de3b29bccaf97d1490baa95896013cb31 Mon Sep 17 00:00:00 2001
From: A7med3bdulBaset <A7med3bdulBaset@gmail.com>
Date: Tue, 22 Aug 2023 11:32:25 +0300
Subject: [PATCH 26/28] translate the sidebar

---
 src/sidebarLearn.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index fe4779a18..6195f31e7 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -125,7 +125,7 @@
       ]
     },
     {
-      "title": "Managing State",
+      "title": "التحكم في الحالة",
       "path": "/learn/managing-state",
       "tags": ["intermediate"],
       "routes": [

From f4d9c503ad39d948f35df3c78c68df545851ddca Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 13:02:02 +0300
Subject: [PATCH 27/28] Translating managing state

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/learn/managing-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index cb4224619..166d0c8ad 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -1,5 +1,5 @@
 ---
-title: التحكم في الحالة
+title: إدارة الحالة
 ---
 
 <Intro>

From 695538812b9a1c7bb0a35ba21edfbce171a8f6f3 Mon Sep 17 00:00:00 2001
From: Ahmed Shazly <99288580+Rumbustious@users.noreply.github.com>
Date: Tue, 22 Aug 2023 13:02:51 +0300
Subject: [PATCH 28/28] Translating managing state

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/sidebarLearn.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 6195f31e7..56de0f4c4 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -125,7 +125,7 @@
       ]
     },
     {
-      "title": "التحكم في الحالة",
+      "title": "إدارة الحالة",
       "path": "/learn/managing-state",
       "tags": ["intermediate"],
       "routes": [