From 1896e3fcf127603c6c45d14d38034402dcb1068e Mon Sep 17 00:00:00 2001 From: tmtm8976 Date: Mon, 28 Aug 2023 22:02:04 +0300 Subject: [PATCH 1/3] translating lines 1-338 --- .../learn/state-a-components-memory.md | 248 +++++++++--------- 1 file changed, 124 insertions(+), 124 deletions(-) diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 1dbaab4a9..bb1d016e6 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -1,25 +1,25 @@ --- -title: "State: A Component's Memory" +title: "الحالة: ذاكرة المكون" --- -Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" should put a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state*. +غالبًا ما تحتاج المكونات إلى تغيير ما يظهر على الشاشة نتيجةً لتفاعل ما. يجب تحديث حقل الإدخال عند الكتابة في النموذج ، ويجب تغيير الصورة التي يتم عرضها عند النقر فوق "التالي" في الشرائح الدوارة(image carousel) ، ويجب وضع منتج في سلة التسوق عند النقر فوق "شراء". تحتاج المكونات إلى "تذكر" أشياء: قيمة الإدخال الحالية ، الصورة الحالية ، سلة التسوق. في React ، يُطلق على هذا النوع من الذاكرة المخصصة للمكون باسم *الحالة*. -* How to add a state variable with the [`useState`](/reference/react/useState) Hook -* What pair of values the `useState` Hook returns -* How to add more than one state variable -* Why state is called local +* كيفية إضافة متغير حالة باستخدام خطاف (Hook) [`useState`](/reference/react/useState) +* أي زوج من القيم يعيد خطاف `useState` +* كيفية إضافة أكثر من متغير حالة واحد +* لماذا يُطلق على الحالة اسم محلية -## When a regular variable isn’t enough {/*when-a-regular-variable-isnt-enough*/} +## عندما لا يكفي المتغير العادي {/*when-a-regular-variable-isnt-enough*/} -Here's a component that renders a sculpture image. Clicking the "Next" button should show the next sculpture by changing the `index` to `1`, then `2`, and so on. However, this **won't work** (you can try it!): +هنا مكون يقوم بتقديم صورة منحوت. يجب أن يُظهر النقر على الزر "التالي" الصورة التاليه عن طريق تغيير المؤشر `index` إلى `1` ، ثم `2` ، وهكذا. ومع ذلك ، **لن يعمل** هذا (يمكنك تجربته!): @@ -37,7 +37,7 @@ export default function Gallery() { return ( <>

{sculpture.name} @@ -60,77 +60,77 @@ export default function Gallery() { ```js data.js export const sculptureList = [{ - name: 'Homenaje a la Neurocirugía', - artist: 'Marta Colvin Andrade', - description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + name: 'تحية لجراحة الأعصاب', + artist: 'مارتا كولفين أندرادي', + description: 'على الرغم من أن كولفين معروفة بشكل أساسي بالمواضيع المجردة التي تلمح إلى الرموز ما قبل الهيسبانية، إلا أن هذا التمثال العملاق، تحية لجراحة الأعصاب، هو واحد من أكثر قطع الفن العامة التي يمكن التعرف عليها.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + alt: 'تمثال من البرونز ليدين متقاطعتين تحملان براغين الدماغ البشري بأطراف أصابعهما بعناية.' }, { - name: 'Floralis Genérica', - artist: 'Eduardo Catalano', - description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + name: 'فلوراليس جينيريكا', + artist: 'إدواردو كاتالانو', + description: 'هذه الزهرة الفضية الضخمة (75 قدمًا أو 23 مترًا) تقع في بوينس آيرس. تم تصميمها للتحرك، حيث تُغلق بتلاتها في المساء أو عندما تكون الرياح قوية وتُفتح في الصباح.', url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' + alt: 'تمثال ضخم من المعدن الفضي يتميز بتلات مرآة تعكس الضوء وسيقان قوية.' }, { - name: 'Eternal Presence', - artist: 'John Woodrow Wilson', - description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + name: 'الوجود الأبدي', + artist: 'جون وودرو ويلسون', + description: 'شتُهر ويلسون بشدقه بالمساواة والعدالة الاجتماعية، وكذلك الصفات الأساسية والروحية للبشرية. يمثل هذا التمثال البرونزي الضخم (7 أقدام أو 2.13 متر) ما وصفه بأنه "وجود أسود رمزي مشبوب بشعور بالإنسانية العالمية"', url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' + alt: 'التمثال الذي يصوّر رأس إنسان يبدو حاضرًا وجديًا دائمًا. إنه ينبعث منه الهدوء والسكينة.' }, { - name: 'Moai', - artist: 'Unknown Artist', - description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + name: 'مواي', + artist: 'فنان مجهول', + description: 'تقع على جزيرة الفصح، وهناك 1000 تمثال مواي، أو تماثيل ضخمة موجودة، تم إنشاؤها من قبل شعب رابا نوي الأول في وقت مبكر، ويعتقد البعض أنها تمثل أسلافًا مجسدين.', url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' + alt: 'ثلاثة تماثيل حجرية ضخمة لرؤوس بأوجه كبيرة نسبيًا وتعابير وجوه متجهمة.' }, { - name: 'Blue Nana', - artist: 'Niki de Saint Phalle', - description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + name: 'نانا الزرقاء', + artist: 'نيكي دي سانت فال', + description: 'النانا هي مخلوقات ظافرة، رموز للأنوثة والأمومة. في البداية، استخدمت سانت فال القماش والأشياء المعثور عليها للنانا، وفي وقت لاحق قدمت البوليستر لتحقيق تأثير أكثر حيوية.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' + alt: 'تمثال موزاييكي كبير لشخصية أنثوية راقصة غريبة في زي ملون تنبع منها الفرح.' }, { - name: 'Ultimate Form', - artist: 'Barbara Hepworth', - description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + name: 'النموذج النهائي', + artist: 'باربارا هيبورث', + description: 'هذا التمثال البرونزي المجرد هو جزء من سلسلة "عائلة الإنسان" الموجودة في حديقة يوركشاير للنحت. اختارت هيبورث عدم إنشاء تمثيلات حرفية للعالم ولكنها طوّرت أشكالًا مجردة مستوحاة من البشر والمناظر الطبيعية..', url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' + alt: 'تمثال طويل مصنوع من ثلاثة عناصر مرصوصة فوق بعضها البعض تشبه شكل إنسان.' }, { - name: 'Cavaliere', - artist: 'Lamidi Olonade Fakeye', - description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + name: 'كافاليير', + artist: 'لاميدي أولونادي فاكيهي', + description: "نزلت أعمال فاكيهي من أربعة أجيال من نحاتي الخشب، ودمجت أعماله بين المواضيع التقليدية واليوروبية المعاصرة.", url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' + alt: 'تمثال خشبي معقد لمحارب ذو وجه مركزي على حصان مزين بزخارف.' }, { - name: 'Big Bellies', - artist: 'Alina Szapocznikow', - description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + name: 'بطون كبيرة', + artist: 'ألينا شابوتشنيكوف', + description: "شابوتشنيكوف معروفة بتماثيلها المكسورة للجسم كاستعارة لهشاشة وعدم الدوام للشباب والجمال. يصور هذا التمثال بطونًا كبيرة واقعية جدًا مكدسة فوق بعضها البعض، تبلغ ارتفاع كل واحدة حوالي خمسة أقدام (1.5 متر).", url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' + alt: 'التمثال يذكر بشلال من الطيات، مختلف تمامًا عن البطون في التماثيل الكلاسيكية.' }, { name: 'Terracotta Army', - artist: 'Unknown Artist', - description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + artist: 'فنان غير معروف', + description: 'جيش التراكوتا هو مجموعة من تماثيل التراكوتا تصور جيوش قين شي هوانغ، أول إمبراطور للصين. يتألف الجيش من أكثر من 8000 جندي، و130 عربة مع 520 حصانًا، و150 حصانًا فرسانيًا.', url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' + alt: '12 تمثالًا من التراكوتا لمحاربين جادين، يتميز كل منهم بتعبير وجه فريد' }, { - name: 'Lunar Landscape', - artist: 'Louise Nevelson', - description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + name: 'منظر طبيعي قمري', + artist: 'لويز نيفلسون', + description: 'كانت نيفلسون معروفة بالتجميع من الأشياء المتناثرة في شوارع مدينة نيويورك، والتي كانت تقوم بتجميعها لاحقًا في إبداعات ضخمة. في هذا العمل، استخدمت أجزاء متنوعة مثل ساق سرير، وعصا تلاعب، وجزء من مقعد، وقامت بتثبيتها ولصقها في صناديق تعكس تأثير التجريد الهندسي للمكعبات في الفن التكعيبي على الفضاء والشكل.', url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' + alt: ' منحوتة سوداء مطفأة حيث يكون من الصعب في البداية تمييز العناصر الفردية.' }, { - name: 'Aureole', - artist: 'Ranjani Shettar', - description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + name: 'هالة ضوئية', + artist: ' رانجاني شيتار', + description: 'تدمج شيتار بين التقاليد والحداثة، وبين الطبيعة والصناعة. يركز فنها على العلاقة بين الإنسان والطبيعة. وقد وصفت أعمالها بأنها جذابة بشكل مجرد ومجازي، وتتحدى الجاذبية، وتمثل "توليفًا رائعًا لمواد غير متوقعة."', url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' + alt: 'منحوتة شبيهة بالأسلاك الفاتحة مركبة على جدار من الخرسانة وممتدة على الأرض. تبدو خفيفة.' }, { - name: 'Hippos', - artist: 'Taipei Zoo', - description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + name: 'فرسان نهر', + artist: 'حديقة حيوان تايبيه', + description: 'قد قامت حديقة حيوان تايبيه بطلب ساحة للفرسان النهريين تتضمن فرسان النهر المغمورين في اللعب.', url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' + alt: 'مجموعة من منحوتات فرسان النهر المصنوعة من البرونز تظهر وكأنها تسبح خارجة من الرصيف كأنها تسبح.' }]; ``` @@ -151,46 +151,46 @@ button { -The `handleClick` event handler is updating a local variable, `index`. But two things prevent that change from being visible: +معالج الحدث `handleClick` يقوم بتحديث المتغير المحلي `index`. ولكن هناك عاملين يمنعان ظهور هذا التغيير: -1. **Local variables don't persist between renders.** When React renders this component a second time, it renders it from scratch—it doesn't consider any changes to the local variables. -2. **Changes to local variables won't trigger renders.** React doesn't realize it needs to render the component again with the new data. +1. **المتغيرات المحلية لا تستمر بين عمليات التصيير.** عندما يقوم React بتصيير هذا المكون للمرة الثانية، فإنه يعرضه من البداية—لا يأخذ في الاعتبار أي تغييرات في المتغيرات المحلية. +2. **التغييرات على المتغيرات المحلية لن تؤدي إلى تنشيط عمليات التصيير.** React لا يدرك أنه يحتاج إلى إعادة تصيير المكون مرة أخرى بالبيانات الجديدة. -To update a component with new data, two things need to happen: +لتحديث المكون ببيانات جديدة، تحتاج إلى حدوث شيئين: -1. **Retain** the data between renders. -2. **Trigger** React to render the component with new data (re-rendering). +1. **الاحتفاظ** بالبيانات بين عمليات التصيير. +2. **تنشيط** React لإعادة تصيير المكون بالبيانات الجديدة (إعادة التصيير). -The [`useState`](/reference/react/useState) Hook provides those two things: +يوفر [`useState`](/reference/react/useState) هذين العنصرين: -1. A **state variable** to retain the data between renders. -2. A **state setter function** to update the variable and trigger React to render the component again. +1. **متغير حالة** للاحتفاظ بالبيانات بين عمليات التصيير +2. **دالة معينة للحالة** لتحديث المتغير وتنشيط React لإعادة تصيير المكون مرة أخرى. ## Adding a state variable {/*adding-a-state-variable*/} -To add a state variable, import `useState` from React at the top of the file: +لإضافة متغير حالة، استورد(import) `useState` من في أعلى الملف: ```js import { useState } from 'react'; ``` -Then, replace this line: +ثم، استبدل هذا السطر: ```js let index = 0; ``` -with +بهذا ```js const [index, setIndex] = useState(0); ``` -`index` is a state variable and `setIndex` is the setter function. +`index` هو متغير حالة و `setIndex` هو دالة التعيين. -> The `[` and `]` syntax here is called [array destructuring](https://javascript.info/destructuring-assignment) and it lets you read values from an array. The array returned by `useState` always has exactly two items. +> بناء الجملة `[` و `]` هنا يسمى [تفكيك المصفوفات](https://javascript.info/destructuring-assignment) ويتيح لك قراءة القيم من مصفوفة. تحتوي المصفوفة التي يعيدها `useState` دائمًا على عنصرين بالضبط. -This is how they work together in `handleClick`: +هكذا يعملان معًا في `handleClick`: ```js function handleClick() { @@ -198,7 +198,7 @@ function handleClick() { } ``` -Now clicking the "Next" button switches the current sculpture: +الآن عند النقر على زر "التالي"، يتم تبديل النموذج النحتي الحالي: @@ -217,11 +217,11 @@ export default function Gallery() { return ( <>

{sculpture.name} - by {sculpture.artist} + بواسطة {sculpture.artist}

({index + 1} of {sculptureList.length}) @@ -240,77 +240,77 @@ export default function Gallery() { ```js data.js export const sculptureList = [{ - name: 'Homenaje a la Neurocirugía', - artist: 'Marta Colvin Andrade', - description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + name: 'تحية لجراحة الأعصاب', + artist: 'مارتا كولفين أندرادي', + description: 'على الرغم من أن كولفين معروفة بشكل أساسي بالمواضيع المجردة التي تلمح إلى الرموز ما قبل الهيسبانية، إلا أن هذا التمثال العملاق، تحية لجراحة الأعصاب، هو واحد من أكثر قطع الفن العامة التي يمكن التعرف عليها.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + alt: 'تمثال من البرونز ليدين متقاطعتين تحملان براغين الدماغ البشري بأطراف أصابعهما بعناية.' }, { - name: 'Floralis Genérica', - artist: 'Eduardo Catalano', - description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + name: 'فلوراليس جينيريكا', + artist: 'إدواردو كاتالانو', + description: 'هذه الزهرة الفضية الضخمة (75 قدمًا أو 23 مترًا) تقع في بوينس آيرس. تم تصميمها للتحرك، حيث تُغلق بتلاتها في المساء أو عندما تكون الرياح قوية وتُفتح في الصباح.', url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' + alt: 'تمثال ضخم من المعدن الفضي يتميز بتلات مرآة تعكس الضوء وسيقان قوية.' }, { - name: 'Eternal Presence', - artist: 'John Woodrow Wilson', - description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + name: 'الوجود الأبدي', + artist: 'جون وودرو ويلسون', + description: 'شتُهر ويلسون بشدقه بالمساواة والعدالة الاجتماعية، وكذلك الصفات الأساسية والروحية للبشرية. يمثل هذا التمثال البرونزي الضخم (7 أقدام أو 2.13 متر) ما وصفه بأنه "وجود أسود رمزي مشبوب بشعور بالإنسانية العالمية"', url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' + alt: 'التمثال الذي يصوّر رأس إنسان يبدو حاضرًا وجديًا دائمًا. إنه ينبعث منه الهدوء والسكينة.' }, { - name: 'Moai', - artist: 'Unknown Artist', - description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + name: 'مواي', + artist: 'فنان مجهول', + description: 'تقع على جزيرة الفصح، وهناك 1000 تمثال مواي، أو تماثيل ضخمة موجودة، تم إنشاؤها من قبل شعب رابا نوي الأول في وقت مبكر، ويعتقد البعض أنها تمثل أسلافًا مجسدين.', url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' + alt: 'ثلاثة تماثيل حجرية ضخمة لرؤوس بأوجه كبيرة نسبيًا وتعابير وجوه متجهمة.' }, { - name: 'Blue Nana', - artist: 'Niki de Saint Phalle', - description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + name: 'نانا الزرقاء', + artist: 'نيكي دي سانت فال', + description: 'النانا هي مخلوقات ظافرة، رموز للأنوثة والأمومة. في البداية، استخدمت سانت فال القماش والأشياء المعثور عليها للنانا، وفي وقت لاحق قدمت البوليستر لتحقيق تأثير أكثر حيوية.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' + alt: 'تمثال موزاييكي كبير لشخصية أنثوية راقصة غريبة في زي ملون تنبع منها الفرح.' }, { - name: 'Ultimate Form', - artist: 'Barbara Hepworth', - description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + name: 'النموذج النهائي', + artist: 'باربارا هيبورث', + description: 'هذا التمثال البرونزي المجرد هو جزء من سلسلة "عائلة الإنسان" الموجودة في حديقة يوركشاير للنحت. اختارت هيبورث عدم إنشاء تمثيلات حرفية للعالم ولكنها طوّرت أشكالًا مجردة مستوحاة من البشر والمناظر الطبيعية..', url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' + alt: 'تمثال طويل مصنوع من ثلاثة عناصر مرصوصة فوق بعضها البعض تشبه شكل إنسان.' }, { - name: 'Cavaliere', - artist: 'Lamidi Olonade Fakeye', - description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + name: 'كافاليير', + artist: 'لاميدي أولونادي فاكيهي', + description: "نزلت أعمال فاكيهي من أربعة أجيال من نحاتي الخشب، ودمجت أعماله بين المواضيع التقليدية واليوروبية المعاصرة.", url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' + alt: 'تمثال خشبي معقد لمحارب ذو وجه مركزي على حصان مزين بزخارف.' }, { - name: 'Big Bellies', - artist: 'Alina Szapocznikow', - description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + name: 'بطون كبيرة', + artist: 'ألينا شابوتشنيكوف', + description: "شابوتشنيكوف معروفة بتماثيلها المكسورة للجسم كاستعارة لهشاشة وعدم الدوام للشباب والجمال. يصور هذا التمثال بطونًا كبيرة واقعية جدًا مكدسة فوق بعضها البعض، تبلغ ارتفاع كل واحدة حوالي خمسة أقدام (1.5 متر).", url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' + alt: 'التمثال يذكر بشلال من الطيات، مختلف تمامًا عن البطون في التماثيل الكلاسيكية.' }, { name: 'Terracotta Army', - artist: 'Unknown Artist', - description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + artist: 'فنان غير معروف', + description: 'جيش التراكوتا هو مجموعة من تماثيل التراكوتا تصور جيوش قين شي هوانغ، أول إمبراطور للصين. يتألف الجيش من أكثر من 8000 جندي، و130 عربة مع 520 حصانًا، و150 حصانًا فرسانيًا.', url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' + alt: '12 تمثالًا من التراكوتا لمحاربين جادين، يتميز كل منهم بتعبير وجه فريد' }, { - name: 'Lunar Landscape', - artist: 'Louise Nevelson', - description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + name: 'منظر طبيعي قمري', + artist: 'لويز نيفلسون', + description: 'كانت نيفلسون معروفة بالتجميع من الأشياء المتناثرة في شوارع مدينة نيويورك، والتي كانت تقوم بتجميعها لاحقًا في إبداعات ضخمة. في هذا العمل، استخدمت أجزاء متنوعة مثل ساق سرير، وعصا تلاعب، وجزء من مقعد، وقامت بتثبيتها ولصقها في صناديق تعكس تأثير التجريد الهندسي للمكعبات في الفن التكعيبي على الفضاء والشكل.', url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' + alt: ' منحوتة سوداء مطفأة حيث يكون من الصعب في البداية تمييز العناصر الفردية.' }, { - name: 'Aureole', - artist: 'Ranjani Shettar', - description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + name: 'هالة ضوئية', + artist: ' رانجاني شيتار', + description: 'تدمج شيتار بين التقاليد والحداثة، وبين الطبيعة والصناعة. يركز فنها على العلاقة بين الإنسان والطبيعة. وقد وصفت أعمالها بأنها جذابة بشكل مجرد ومجازي، وتتحدى الجاذبية، وتمثل "توليفًا رائعًا لمواد غير متوقعة."', url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' + alt: 'منحوتة شبيهة بالأسلاك الفاتحة مركبة على جدار من الخرسانة وممتدة على الأرض. تبدو خفيفة.' }, { - name: 'Hippos', - artist: 'Taipei Zoo', - description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + name: 'فرسان نهر', + artist: 'حديقة حيوان تايبيه', + description: 'قد قامت حديقة حيوان تايبيه بطلب ساحة للفرسان النهريين تتضمن فرسان النهر المغمورين في اللعب.', url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' + alt: 'مجموعة من منحوتات فرسان النهر المصنوعة من البرونز تظهر وكأنها تسبح خارجة من الرصيف كأنها تسبح.' }]; ``` @@ -331,11 +331,11 @@ button { -### Meet your first Hook {/*meet-your-first-hook*/} +### تعرف على الخطاف الأول الخاص بك {/*meet-your-first-hook*/} -In React, `useState`, as well as any other function starting with "`use`", is called a Hook. +في React, `useState`, بالإضافة إلى أي وظيفة أخرى تبدأ بـ "`use`" ، يُطلق عليها اسم خطاف -*Hooks* are special functions that are only available while React is [rendering](/learn/render-and-commit#step-1-trigger-a-render) (which we'll get into in more detail on the next page). They let you "hook into" different React features. +*الخطافات* are special functions that are only available while React is [rendering](/learn/render-and-commit#step-1-trigger-a-render) (which we'll get into in more detail on the next page). They let you "hook into" different React features. State is just one of those features, but you will meet the other Hooks later. From 823d0f5907b0d41b12c4b283d282c75a9b48227f Mon Sep 17 00:00:00 2001 From: tmtm8976 Date: Sat, 2 Sep 2023 21:43:41 +0300 Subject: [PATCH 2/3] translating State: A Component's Memory --- .../learn/state-a-components-memory.md | 716 +++++++++--------- src/sidebarLearn.json | 2 +- 2 files changed, 359 insertions(+), 359 deletions(-) diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index bb1d016e6..5a29d4328 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -1,10 +1,10 @@ --- -title: "الحالة: ذاكرة المكون" +title: "الحالة: ذاكرة المكوّن" --- -غالبًا ما تحتاج المكونات إلى تغيير ما يظهر على الشاشة نتيجةً لتفاعل ما. يجب تحديث حقل الإدخال عند الكتابة في النموذج ، ويجب تغيير الصورة التي يتم عرضها عند النقر فوق "التالي" في الشرائح الدوارة(image carousel) ، ويجب وضع منتج في سلة التسوق عند النقر فوق "شراء". تحتاج المكونات إلى "تذكر" أشياء: قيمة الإدخال الحالية ، الصورة الحالية ، سلة التسوق. في React ، يُطلق على هذا النوع من الذاكرة المخصصة للمكون باسم *الحالة*. +غالبًا ما تحتاج المكوّنات إلى تغيير ما يظهر على الشاشة نتيجةً لتفاعل ما. يجب تحديث حقل الإدخال عند الكتابة في إستمارة ، ويجب تغيير الصورة التي يتم عرضها عند النقر فوق "التالي" في الشرائح الدوارة (image carousel) ، ويجب وضع منتج في سلة التسوق عند النقر فوق "شراء". تحتاج المكوّنات إلى "تذكر" أشياء: قيمة الإدخال الحالية ، الصورة الحالية ، سلة التسوق. في React ، يُطلق على هذا النوع من الذاكرة المخصصة للمكوّن باسم *الحالة*. @@ -19,7 +19,7 @@ title: "الحالة: ذاكرة المكون" ## عندما لا يكفي المتغير العادي {/*when-a-regular-variable-isnt-enough*/} -هنا مكون يقوم بتقديم صورة منحوت. يجب أن يُظهر النقر على الزر "التالي" الصورة التاليه عن طريق تغيير المؤشر `index` إلى `1` ، ثم `2` ، وهكذا. ومع ذلك ، **لن يعمل** هذا (يمكنك تجربته!): +هنا مكوّن يقوم بتقديم صورة منحوت. يجب أن يُظهر النقر على الزر "التالي" الصورة التاليه عن طريق تغيير المؤشر `index` إلى `1` ، ثم `2` ، وهكذا. ومع ذلك ، **لن يعمل** هذا (يمكنك تجربته!): @@ -153,22 +153,22 @@ button { معالج الحدث `handleClick` يقوم بتحديث المتغير المحلي `index`. ولكن هناك عاملين يمنعان ظهور هذا التغيير: -1. **المتغيرات المحلية لا تستمر بين عمليات التصيير.** عندما يقوم React بتصيير هذا المكون للمرة الثانية، فإنه يعرضه من البداية—لا يأخذ في الاعتبار أي تغييرات في المتغيرات المحلية. -2. **التغييرات على المتغيرات المحلية لن تؤدي إلى تنشيط عمليات التصيير.** React لا يدرك أنه يحتاج إلى إعادة تصيير المكون مرة أخرى بالبيانات الجديدة. +1. **المتغيرات المحلية لا تستمر بين عمليات التصيير.** عندما يقوم React بتصيير هذا المكوّن للمرة الثانية، فإنه يقوم بتصييره من البداية—لا يأخذ في الاعتبار أي تغييرات في المتغيرات المحلية. +2. **التغييرات على المتغيرات المحلية لن تؤدي إلى تنشيط عمليات التصيير.** React لا يدرك أنه يحتاج إلى إعادة تصيير المكوّن مرة أخرى بالبيانات الجديدة. -لتحديث المكون ببيانات جديدة، تحتاج إلى حدوث شيئين: +لتحديث المكوّن ببيانات جديدة، تحتاج إلى حدوث شيئين: 1. **الاحتفاظ** بالبيانات بين عمليات التصيير. -2. **تنشيط** React لإعادة تصيير المكون بالبيانات الجديدة (إعادة التصيير). +2. **تنشيط** React لإعادة تصيير المكوّن بالبيانات الجديدة (إعادة التصيير). يوفر [`useState`](/reference/react/useState) هذين العنصرين: 1. **متغير حالة** للاحتفاظ بالبيانات بين عمليات التصيير -2. **دالة معينة للحالة** لتحديث المتغير وتنشيط React لإعادة تصيير المكون مرة أخرى. +2. **دالة معينة للحالة** لتحديث المتغير وتنشيط React لإعادة تصيير المكوّن مرة أخرى. -## Adding a state variable {/*adding-a-state-variable*/} +## إضافة متغير حالة. {/*adding-a-state-variable*/} -لإضافة متغير حالة، استورد(import) `useState` من في أعلى الملف: +لإضافة متغير حالة، استورد (import) `useState` من في أعلى الملف: ```js import { useState } from 'react'; @@ -333,55 +333,55 @@ button { ### تعرف على الخطاف الأول الخاص بك {/*meet-your-first-hook*/} -في React, `useState`, بالإضافة إلى أي وظيفة أخرى تبدأ بـ "`use`" ، يُطلق عليها اسم خطاف +في React, `useState`, بالإضافة إلى أي وظيفة أخرى تبدأ بـ "`use`" ، يُطلق عليها اسم خطاف (Hook) -*الخطافات* are special functions that are only available while React is [rendering](/learn/render-and-commit#step-1-trigger-a-render) (which we'll get into in more detail on the next page). They let you "hook into" different React features. +*الخطافات* هي وظائف خاصة تكون متاحة فقط أثناء عملية [التصيير](/learn/render-and-commit#step-1-trigger-a-render) في React (سنتناول هذا بالتفصيل في الصفحة التالية). تتيح لك الخطافات "ربط" ميزات مختلفة في React. -State is just one of those features, but you will meet the other Hooks later. +الحالة هي احد هذه الميزات، ولكنك ستتعرف على الخطافات الأخرى لاحقًا. -**Hooks—functions starting with `use`—can only be called at the top level of your components or [your own Hooks.](/learn/reusing-logic-with-custom-hooks)** You can't call Hooks inside conditions, loops, or other nested functions. Hooks are functions, but it's helpful to think of them as unconditional declarations about your component's needs. You "use" React features at the top of your component similar to how you "import" modules at the top of your file. +**وظائف-الخطافات التي تبدأ بـ `use`—يمكن استدعاؤها فقط في المستوى الاعلى من مكوّناتك أو [خطافاتك الخاصة.](/learn/reusing-logic-with-custom-hooks)** لا يمكن استدعاء الخطافات داخل شروط أو حلقات التكرار أو وظائف متداخلة أخرى. الخطافات هي وظائف، ولكن من الأفضل التفكير فيها كتصريحات غير مشروطة حول احتياجات مكوّنك. يجب "استخدام" ميزات React في الجزء العلوي من مكوّنك بنفس الطريقة التي تقوم فيها بـ "استيراد (import)" الوحدات في أعلى الملف الخاص بك. -### Anatomy of `useState` {/*anatomy-of-usestate*/} +### تشريح `useState` {/*anatomy-of-usestate*/} -When you call [`useState`](/reference/react/useState), you are telling React that you want this component to remember something: +عند استدعاء [`useState`](/reference/react/useState), فإنك تخبر React بأنك ترغب في أن يتذكر هذا المكوّن شيئًا: ```js const [index, setIndex] = useState(0); ``` -In this case, you want React to remember `index`. +في هذه الحالة، ترغب في أن يتذكر React القيمة الحالية ل `index`. -The convention is to name this pair like `const [something, setSomething]`. You could name it anything you like, but conventions make things easier to understand across projects. +المقتضى هو أن تسمي هذا الزوج كـ `const [something, setSomething]`. يمكنك أن تسميه بأي اسم تختاره، ولكن المقتضيات تجعل الأمور أسهل في الفهم عبر المشاريع. -The only argument to `useState` is the **initial value** of your state variable. In this example, the `index`'s initial value is set to `0` with `useState(0)`. +المعامل الوحيد ل`useState` هو **القيمة الابتدائية** لمتغير الحالة الخاص بك. في هذا المثال، تم تعيين قيمة ابتدائية ل`index` ب`0` باستخدام `useState(0)`. -Every time your component renders, `useState` gives you an array containing two values: +في كل مرة يتم فيها تصيير مكوّنك، يقدم `useState` مصفوفة تحتوي على قيمتين: -1. The **state variable** (`index`) with the value you stored. -2. The **state setter function** (`setIndex`) which can update the state variable and trigger React to render the component again. +1. **متغير الحالة** (`index`) مع القيمة المخزنة. +2. **دالة تحديث الحالة** (`setIndex`) التي يمكنها تحديث المتغير الحالي وتقوم بتنشيط React لإعادة تصيير المكوّن مرة أخرى. -Here's how that happens in action: +هكذا يحدث ذلك عملياً: ```js const [index, setIndex] = useState(0); ``` -1. **Your component renders the first time.** Because you passed `0` to `useState` as the initial value for `index`, it will return `[0, setIndex]`. React remembers `0` is the latest state value. -2. **You update the state.** When a user clicks the button, it calls `setIndex(index + 1)`. `index` is `0`, so it's `setIndex(1)`. This tells React to remember `index` is `1` now and triggers another render. -3. **Your component's second render.** React still sees `useState(0)`, but because React *remembers* that you set `index` to `1`, it returns `[1, setIndex]` instead. -4. And so on! +1. **يتم تصيير المكوّن الخاص بك للمرة الأولى.** نظرًا لأنك قمت بتمرير القيمة `0` إلى `useState` كقيمة بدائية لـ `index`, ستعيد الدالة `[0, setIndex]`. يتذكر React أن القيمة `0` هي أحدث قيمة للحالة. +2. **تقوم بتحديث الحالة.** عندما يقوم المستخدم بالنقر فوق الزر، يتم استدعاء `setIndex(index + 1)`. حيث أن قيمة `index` هي `0`, لذالك تكون `setIndex(1)`. يخبر ذلك React بتذكر أن قيمة `index` الآن هي `1` ويؤدي إلى التصيير مرة أخرى. +3. **تصيير المكوّن الخاص بك للمرة الثانية.** لا يزال React يرى `useState(0)`, ولكن بسبب أن React *يتذكر* أنك قمت بتعيين `index` إلى `1`, فإنه يعيد `[1, setIndex]` بدلاً من ذلك. +4. وهكذا ما إلى آخره! -## Giving a component multiple state variables {/*giving-a-component-multiple-state-variables*/} +## إعطاء المكوّن متغيرات حالة متعددة {/*giving-a-component-multiple-state-variables*/} -You can have as many state variables of as many types as you like in one component. This component has two state variables, a number `index` and a boolean `showMore` that's toggled when you click "Show details": +يمكنك أن تمتلك العديد من متغيرات الحالة من أنواع مختلفة كما تحب في مكوّن واحد. يحتوي هذا المكوّن على متغيري حالة، رقم وهو `index` و منطق بوليني وهو `showMore` يتم تبديله عند النقر على "إظهار التفاصيل": @@ -405,17 +405,17 @@ export default function Gallery() { return ( <>

{sculpture.name} - by {sculpture.artist} + بواسطة {sculpture.artist}

({index + 1} of {sculptureList.length})

{showMore &&

{sculpture.description}

} -It is a good idea to have multiple state variables if their state is unrelated, like `index` and `showMore` in this example. But if you find that you often change two state variables together, it might be easier to combine them into one. For example, if you have a form with many fields, it's more convenient to have a single state variable that holds an object than state variable per field. Read [Choosing the State Structure](/learn/choosing-the-state-structure) for more tips. +من الجيد أن يكون لديك متغيرات حالة متعددة إذا كانت حالتها غير متصلة ، مثل `index` و `showMore` في المثال السابق. لكن إذا وجدت أنك غالبًا ما تقوم بتغيير متغيري حالة اثنين معًا، فقد يكون من الأسهل دمجهما في متغير واحد. على سبيل المثال ، إذا كان لديك استمارة تحتوي على العديد من الحقول ، فمن الأكثر ملاءمة أن يكون لديك متغير حالة واحد يحتوي على كائن بدلاً من متغير حالة لكل حقل. اقرأ [ختيار هيكل الحالة](/learn/choosing-the-state-structure) للحصول على المزيد من النصائح. -#### How does React know which state to return? {/*how-does-react-know-which-state-to-return*/} +#### كيف يعرف React أي حالة يجب إرجاعها؟ {/*how-does-react-know-which-state-to-return*/} -You might have noticed that the `useState` call does not receive any information about *which* state variable it refers to. There is no "identifier" that is passed to `useState`, so how does it know which of the state variables to return? Does it rely on some magic like parsing your functions? The answer is no. +قد تكون لاحظت أن استدعاء `useState` لا يتلقى *أي* معلومات حول متغير الحالة الذي يشير إليه. لا يوجد "معرف" يتم تمريره إلى `useState`، فكيف يعرف أي من المتغيرات الحالة يجب إرجاعه؟ هل يعتمد على بعض السحر مثل تحليل الوظائفك؟ الإجابة هي لا. -Instead, to enable their concise syntax, Hooks **rely on a stable call order on every render of the same component.** This works well in practice because if you follow the rule above ("only call Hooks at the top level"), Hooks will always be called in the same order. Additionally, a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) catches most mistakes. +بدلاً من ذلك ، الخطافات **تعتمد على ترتيب استدعاء ثابت في كل مرة يتم فيها تصيير نفس المكوّن.** هذا يعمل بشكل جيد في الواقع لأنه إذا اتبعت القاعدة أعلاه ("استدعاء الخطافات فقط في الطبقة العليا") ، فسيتم استدعاء الخطافات دائمًا بنفس الترتيب. بالإضافة إلى ذلك ، يمتلك [ملحق تحليل](https://www.npmjs.com/package/eslint-plugin-react-hooks) يلتقط معظم الأخطاء. -Internally, React holds an array of state pairs for every component. It also maintains the current pair index, which is set to `0` before rendering. Each time you call `useState`, React gives you the next state pair and increments the index. You can read more about this mechanism in [React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) +داخليًا ، يحتفظ React بمصفوفة من أزواج الحالة لكل مكوّن. كما يحتفظ بفهرس الزوج الحالي ، والذي يتم تعيينه على `0` قبل التصيير. في كل مرة تستدعي فيها `useState` ، يعطيك React الزوج التالي من الحالة ويزيد من الفهرس. يمكنك قراءة المزيد عن هذه الآلية في [خطافات React: ليست سحراً، فقط مصفوفات](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) -This example **doesn't use React** but it gives you an idea of how `useState` works internally: +هذا المثال **لا يستخدم React** ولكنه يعطيك فكرة عن كيفية عمل `useState` داخليًا: @@ -540,37 +540,37 @@ This example **doesn't use React** but it gives you an idea of how `useState` wo let componentHooks = []; let currentHookIndex = 0; -// How useState works inside React (simplified). +// كيف تعمل useState داخل React (مبسطة). function useState(initialState) { let pair = componentHooks[currentHookIndex]; if (pair) { - // This is not the first render, - // so the state pair already exists. - // Return it and prepare for next Hook call. + // هذا ليس التصيير الاول، + // لذالك زوج الحالة موجود مسبقاً . + // ارجعه و جهز لإستدعاء الخطاف القادم. currentHookIndex++; return pair; } - // This is the first time we're rendering, - // so create a state pair and store it. + // هذه هي المرة الاولى التي نقوم فيها بالتصيير، + // لذالك اصنع زوج الحالة وقم بتخزينه. pair = [initialState, setState]; function setState(nextState) { - // When the user requests a state change, - // put the new value into the pair. + // عندما يطلب المستخدم تغيير حالة، + // ضع القيمة الجدبدة الي الزوج pair[0] = nextState; updateDOM(); } - // Store the pair for future renders - // and prepare for the next Hook call. + // قم بتخزين الزوج للتصييرات القادمه + // و جهز لإستدعاء الخطاف القادم. componentHooks[currentHookIndex] = pair; currentHookIndex++; return pair; } function Gallery() { - // Each useState() call will get the next pair. + // كل إستدعاء useState() سيحصل على الزوج القادم. const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); @@ -583,14 +583,14 @@ function Gallery() { } let sculpture = sculptureList[index]; - // This example doesn't use React, so - // return an output object instead of JSX. + // هذا المثال لا يستخدم ريأكت، لذا + // قم بإرجاع كائن إخراج بدلاً من JSX return { onNextClick: handleNextClick, onMoreClick: handleMoreClick, - header: `${sculpture.name} by ${sculpture.artist}`, - counter: `${index + 1} of ${sculptureList.length}`, - more: `${showMore ? 'Hide' : 'Show'} details`, + header: `${sculpture.name} بواسطة ${sculpture.artist}`, + counter: `${index + 1} من ${sculptureList.length}`, + more: `${showMore ? 'إخفاء' : 'إظهار'} التفاصيل`, description: showMore ? sculpture.description : null, imageSrc: sculpture.url, imageAlt: sculpture.alt @@ -598,13 +598,13 @@ function Gallery() { } function updateDOM() { - // Reset the current Hook index - // before rendering the component. + // أعد تعيين فهرس الخطاف الحالي + // قبل تصيير المكوّن. currentHookIndex = 0; let output = Gallery(); - // Update the DOM to match the output. - // This is the part React does for you. + // حدث ال DOM لتُطابق الإخراج. + // هذا هو الجزء الذي يقوم به React من أجلك nextButton.onclick = output.onNextClick; header.textContent = output.header; moreButton.onclick = output.onMoreClick; @@ -625,86 +625,86 @@ let moreButton = document.getElementById('moreButton'); let description = document.getElementById('description'); let image = document.getElementById('image'); let sculptureList = [{ - name: 'Homenaje a la Neurocirugía', - artist: 'Marta Colvin Andrade', - description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + name: 'تحية لجراحة الأعصاب', + artist: 'مارتا كولفين أندرادي', + description: 'على الرغم من أن كولفين معروفة بشكل أساسي بالمواضيع المجردة التي تلمح إلى الرموز ما قبل الهيسبانية، إلا أن هذا التمثال العملاق، تحية لجراحة الأعصاب، هو واحد من أكثر قطع الفن العامة التي يمكن التعرف عليها.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + alt: 'تمثال من البرونز ليدين متقاطعتين تحملان براغين الدماغ البشري بأطراف أصابعهما بعناية.' }, { - name: 'Floralis Genérica', - artist: 'Eduardo Catalano', - description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + name: 'فلوراليس جينيريكا', + artist: 'إدواردو كاتالانو', + description: 'هذه الزهرة الفضية الضخمة (75 قدمًا أو 23 مترًا) تقع في بوينس آيرس. تم تصميمها للتحرك، حيث تُغلق بتلاتها في المساء أو عندما تكون الرياح قوية وتُفتح في الصباح.', url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' + alt: 'تمثال ضخم من المعدن الفضي يتميز بتلات مرآة تعكس الضوء وسيقان قوية.' }, { - name: 'Eternal Presence', - artist: 'John Woodrow Wilson', - description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + name: 'الوجود الأبدي', + artist: 'جون وودرو ويلسون', + description: 'شتُهر ويلسون بشدقه بالمساواة والعدالة الاجتماعية، وكذلك الصفات الأساسية والروحية للبشرية. يمثل هذا التمثال البرونزي الضخم (7 أقدام أو 2.13 متر) ما وصفه بأنه "وجود أسود رمزي مشبوب بشعور بالإنسانية العالمية"', url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' + alt: 'التمثال الذي يصوّر رأس إنسان يبدو حاضرًا وجديًا دائمًا. إنه ينبعث منه الهدوء والسكينة.' }, { - name: 'Moai', - artist: 'Unknown Artist', - description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + name: 'مواي', + artist: 'فنان مجهول', + description: 'تقع على جزيرة الفصح، وهناك 1000 تمثال مواي، أو تماثيل ضخمة موجودة، تم إنشاؤها من قبل شعب رابا نوي الأول في وقت مبكر، ويعتقد البعض أنها تمثل أسلافًا مجسدين.', url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' + alt: 'ثلاثة تماثيل حجرية ضخمة لرؤوس بأوجه كبيرة نسبيًا وتعابير وجوه متجهمة.' }, { - name: 'Blue Nana', - artist: 'Niki de Saint Phalle', - description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + name: 'نانا الزرقاء', + artist: 'نيكي دي سانت فال', + description: 'النانا هي مخلوقات ظافرة، رموز للأنوثة والأمومة. في البداية، استخدمت سانت فال القماش والأشياء المعثور عليها للنانا، وفي وقت لاحق قدمت البوليستر لتحقيق تأثير أكثر حيوية.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' + alt: 'تمثال موزاييكي كبير لشخصية أنثوية راقصة غريبة في زي ملون تنبع منها الفرح.' }, { - name: 'Ultimate Form', - artist: 'Barbara Hepworth', - description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + name: 'النموذج النهائي', + artist: 'باربارا هيبورث', + description: 'هذا التمثال البرونزي المجرد هو جزء من سلسلة "عائلة الإنسان" الموجودة في حديقة يوركشاير للنحت. اختارت هيبورث عدم إنشاء تمثيلات حرفية للعالم ولكنها طوّرت أشكالًا مجردة مستوحاة من البشر والمناظر الطبيعية..', url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' + alt: 'تمثال طويل مصنوع من ثلاثة عناصر مرصوصة فوق بعضها البعض تشبه شكل إنسان.' }, { - name: 'Cavaliere', - artist: 'Lamidi Olonade Fakeye', - description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + name: 'كافاليير', + artist: 'لاميدي أولونادي فاكيهي', + description: "نزلت أعمال فاكيهي من أربعة أجيال من نحاتي الخشب، ودمجت أعماله بين المواضيع التقليدية واليوروبية المعاصرة.", url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' + alt: 'تمثال خشبي معقد لمحارب ذو وجه مركزي على حصان مزين بزخارف.' }, { - name: 'Big Bellies', - artist: 'Alina Szapocznikow', - description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + name: 'بطون كبيرة', + artist: 'ألينا شابوتشنيكوف', + description: "شابوتشنيكوف معروفة بتماثيلها المكسورة للجسم كاستعارة لهشاشة وعدم الدوام للشباب والجمال. يصور هذا التمثال بطونًا كبيرة واقعية جدًا مكدسة فوق بعضها البعض، تبلغ ارتفاع كل واحدة حوالي خمسة أقدام (1.5 متر).", url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' + alt: 'التمثال يذكر بشلال من الطيات، مختلف تمامًا عن البطون في التماثيل الكلاسيكية.' }, { name: 'Terracotta Army', - artist: 'Unknown Artist', - description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + artist: 'فنان غير معروف', + description: 'جيش التراكوتا هو مجموعة من تماثيل التراكوتا تصور جيوش قين شي هوانغ، أول إمبراطور للصين. يتألف الجيش من أكثر من 8000 جندي، و130 عربة مع 520 حصانًا، و150 حصانًا فرسانيًا.', url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' + alt: '12 تمثالًا من التراكوتا لمحاربين جادين، يتميز كل منهم بتعبير وجه فريد' }, { - name: 'Lunar Landscape', - artist: 'Louise Nevelson', - description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + name: 'منظر طبيعي قمري', + artist: 'لويز نيفلسون', + description: 'كانت نيفلسون معروفة بالتجميع من الأشياء المتناثرة في شوارع مدينة نيويورك، والتي كانت تقوم بتجميعها لاحقًا في إبداعات ضخمة. في هذا العمل، استخدمت أجزاء متنوعة مثل ساق سرير، وعصا تلاعب، وجزء من مقعد، وقامت بتثبيتها ولصقها في صناديق تعكس تأثير التجريد الهندسي للمكعبات في الفن التكعيبي على الفضاء والشكل.', url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' + alt: ' منحوتة سوداء مطفأة حيث يكون من الصعب في البداية تمييز العناصر الفردية.' }, { - name: 'Aureole', - artist: 'Ranjani Shettar', - description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + name: 'هالة ضوئية', + artist: ' رانجاني شيتار', + description: 'تدمج شيتار بين التقاليد والحداثة، وبين الطبيعة والصناعة. يركز فنها على العلاقة بين الإنسان والطبيعة. وقد وصفت أعمالها بأنها جذابة بشكل مجرد ومجازي، وتتحدى الجاذبية، وتمثل "توليفًا رائعًا لمواد غير متوقعة."', url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' + alt: 'منحوتة شبيهة بالأسلاك الفاتحة مركبة على جدار من الخرسانة وممتدة على الأرض. تبدو خفيفة.' }, { - name: 'Hippos', - artist: 'Taipei Zoo', - description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + name: 'فرسان نهر', + artist: 'حديقة حيوان تايبيه', + description: 'قد قامت حديقة حيوان تايبيه بطلب ساحة للفرسان النهريين تتضمن فرسان النهر المغمورين في اللعب.', url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' + alt: 'مجموعة من منحوتات فرسان النهر المصنوعة من البرونز تظهر وكأنها تسبح خارجة من الرصيف كأنها تسبح.' }]; -// Make UI match the initial state. +// إجعل واجهة المستخدم تطابق الحالة الاولى updateDOM(); ``` ```html public/index.html @@ -724,15 +724,15 @@ button { display: block; margin-bottom: 10px; } -You don't have to understand it to use React, but you might find this a helpful mental model. +لا تحتاج إلى فهمه لاستخدام React ، ولكن قد تجد هذا النموذج العقلي مفيدًا. -## State is isolated and private {/*state-is-isolated-and-private*/} +## الحالة معزولة وخاصة {/*state-is-isolated-and-private*/} -State is local to a component instance on the screen. In other words, **if you render the same component twice, each copy will have completely isolated state!** Changing one of them will not affect the other. +الحالة محلية لمثيل المكوّن على الشاشة. بعبارة أخرى ، **إذا قمت بتصيير نفس المكوّن مرتين ، فستملك كل نسخة حالة معزولة تمامًا!** تغيير واحد منها لن يؤثر على الآخر. -In this example, the `Gallery` component from earlier is rendered twice with no changes to its logic. Try clicking the buttons inside each of the galleries. Notice that their state is independent: +في هذا المثال ، يتم تصيير مكوّن `Gallery` من وقت سابق مرتين دون أي تغيير في منطقه. حاول النقر على الأزرار داخل كل من المعارض. لاحظ أن حالتها مستقلة. @@ -770,17 +770,17 @@ export default function Gallery() { return (

{sculpture.name} - by {sculpture.artist} + بواسطة {sculpture.artist}

({index + 1} of {sculptureList.length})

{showMore &&

{sculpture.description}

} -This is what makes state different from regular variables that you might declare at the top of your module. State is not tied to a particular function call or a place in the code, but it's "local" to the specific place on the screen. You rendered two `` components, so their state is stored separately. +هذا هو ما يجعل الحالة مختلفة عن المتغيرات العادية التي قد تعلنها في أعلى الوحدة الخاصة بك. الحالة ليست مرتبطة بإستدعاء وظيفة معينة أو مكان في الكود ، ولكنها "محلية" للمكان المحدد على الشاشة. قمت بتصيير اثنين من مكوّنات `` لذا يتم تخزين حالتها بشكل منفصل. -Also notice how the `Page` component doesn't "know" anything about the `Gallery` state or even whether it has any. Unlike props, **state is fully private to the component declaring it.** The parent component can't change it. This lets you add state to any component or remove it without impacting the rest of the components. +لاحظ أيضًا كيف أن مكوّن ال `Page` لا "يعرف" أي شيء عن حالة `Gallery` أو حتى ما إذا كان لديها أي حالة. على عكس الخصائص (props) **الحالة خاصة تمامًا للمكوّن الذي يعلنها.** لا يمكن للمكوّن الأب تغييرها. يتيح لك ذلك إضافة حالة إلى أي مكوّن أو إزالتها دون التأثير على بقية المكوّنات. -What if you wanted both galleries to keep their states in sync? The right way to do it in React is to *remove* state from child components and add it to their closest shared parent. The next few pages will focus on organizing state of a single component, but we will return to this topic in [Sharing State Between Components.](/learn/sharing-state-between-components) +ماذا لو أردت أن تحافظ على حالة كلتا المعرضين متزامنتين؟ الطريقة الصحيحة للقيام بذلك في React هي *إزالة* الحالة من المكوّنات الفرعية وإضافتها إلى أقرب والديها المشترك. ستركز الصفحات القليلة المقبلة على تنظيم حالة مكوّن واحد فقط، ولكننا سنعود إلى هذا الموضوع في [مشاركة الحالة بين المكوّنات.](/learn/sharing-state-between-components) -* Use a state variable when a component needs to "remember" some information between renders. -* State variables are declared by calling the `useState` Hook. -* Hooks are special functions that start with `use`. They let you "hook into" React features like state. -* Hooks might remind you of imports: they need to be called unconditionally. Calling Hooks, including `useState`, is only valid at the top level of a component or another Hook. -* The `useState` Hook returns a pair of values: the current state and the function to update it. -* You can have more than one state variable. Internally, React matches them up by their order. -* State is private to the component. If you render it in two places, each copy gets its own state. +* استخدم متغير الحالة عندما يحتاج المكوّن إلى "تذكر" بعض المعلومات بين عمليات التصيير. +* يتم إعلان متغيرات الحالة عن طريق استدعاء خطاف `useState`. +* الخطافات هي وظائف خاصة تبدأ بـ `use`. تتيح لك "ربط" ميزات React مثل الحالة. +* قد تذكرك الخطافات بالاستيرادات: يجب استدعاؤها بغض النظر عن الشروط. إستدعاء الخطفات ، بما في ذلك `useState`, صالح فقط على المستوى الأعلى للمكوّن أو خطاف آخر . +* يعيد خطاف `useState` زوجًا من القيم: الحالة الحالية والدالة لتحديثها. +* يمكنك أن تمتلك أكثر من متغير حالة واحد. داخليًا ، يقوم React بمطابقتها حسب ترتيبها. +* الحالة خاصة بالمكوّن. إذا قمت بتصييره في مكانين ، تحصل كل نسخة على حالتها الخاصة. @@ -913,11 +913,11 @@ What if you wanted both galleries to keep their states in sync? The right way to -#### Complete the gallery {/*complete-the-gallery*/} +#### أكمل المعرض {/*complete-the-gallery*/} -When you press "Next" on the last sculpture, the code crashes. Fix the logic to prevent the crash. You may do this by adding extra logic to event handler or by disabling the button when the action is not possible. +عند الضغط على "التالي" في آخر منحوتة ، يتعطل الكود. قم بتصحيح المنطق لمنع التعطل. يمكنك القيام بذلك عن طريق إضافة منطق إضافي إلى معالج الحدث أو عن طريق تعطيل الزر عندما لا يكون الإجراء ممكنًا. -After fixing the crash, add a "Previous" button that shows the previous sculpture. It shouldn't crash on the first sculpture. +بعد إصلاح التعطل ، أضف زر "السابق" الذي يعرض المنحوتة السابقة. لا يجب أن يتعطل عند الوصول إلى أول منحوتة. @@ -941,17 +941,17 @@ export default function Gallery() { return ( <>

{sculpture.name} - by {sculpture.artist} + بواسطة {sculpture.artist}

({index + 1} of {sculptureList.length})

{showMore &&

{sculpture.description}

} -This adds a guarding condition inside both event handlers and disables the buttons when needed: +يتم إضافة شرط حماية داخل كل من معالجات الحدث ويتم تعطيل الأزرار عند الحاجة: @@ -1097,23 +1097,23 @@ export default function Gallery() { onClick={handlePrevClick} disabled={!hasPrev} > - Previous + السابق

{sculpture.name} - by {sculpture.artist} + بواسطة {sculpture.artist}

({index + 1} of {sculptureList.length})

{showMore &&

{sculpture.description}

} -Notice how `hasPrev` and `hasNext` are used *both* for the returned JSX and inside the event handlers! This handy pattern works because event handler functions ["close over"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) any variables declared while rendering. +لاحظ كيف يتم استخدام `hasPrev` و `hasNext` في *كلا* ال JSX المرجعه وداخل معالجات الحدث! يعمل هذه النمط المفيد لأن وظائف معالج الحدث ["تُغلق"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) على أي متغيرات تم اعلانها أثناء التصيير. -#### Fix stuck form inputs {/*fix-stuck-form-inputs*/} +#### إصلاح إدخالات الاستمارة المُعَلَّقَة {/*fix-stuck-form-inputs*/} -When you type into the input fields, nothing appears. It's like the input values are "stuck" with empty strings. The `value` of the first `` is set to always match the `firstName` variable, and the `value` for the second `` is set to always match the `lastName` variable. This is correct. Both inputs have `onChange` event handlers, which try to update the variables based on the latest user input (`e.target.value`). However, the variables don't seem to "remember" their values between re-renders. Fix this by using state variables instead. +عندما تكتب في حقول الإدخال، لا يظهر شيء. يبدو أن قيم الإدخال "محتجزة" بسلاسل فارغة. تم تعيين قيمة `value` العنصر الأول `` دائمًا لتتطابق مع المتغير `firstName`، وتم تعيين قيمة `value` العنصر الثاني `` دائمًا لتتطابق مع المتغير `lastName`. هذا صحيح. كلا الإدخالات لديها معالجات حدث `onChange`، التي تحاول تحديث المتغيرات استنادًا إلى أحدث إدخال للمستخدم (`e.target.value`). ومع ذلك، لا يبدو أن المتغيرات "تتذكر" قيمها بين إعادة التصيير. قم بإصلاح هذا باستخدام متغيرات الحالة بدلاً من ذلك. @@ -1259,8 +1259,8 @@ export default function Form() { value={lastName} onChange={handleLastNameChange} /> -

Hi, {firstName} {lastName}

- +

مرحباً، {firstName} {lastName}

+ ); } @@ -1274,7 +1274,7 @@ h1 { margin-top: 10px; } -First, import `useState` from React. Then replace `firstName` and `lastName` with state variables declared by calling `useState`. Finally, replace every `firstName = ...` assignment with `setFirstName(...)`, and do the same for `lastName`. Don't forget to update `handleReset` too so that the reset button works. +أولاً ، قم بإستيراد `useState` من React. ثم استبدل `firstName` و `lastName` بمتغيرات الحالة التي تم إعلانها باستدعاء `useState`. أخيرًا ، قم بإستبدال كل تعيين `firstName = ...` بـ `setFirstName(...)`، وافعل الشيء نفسه للـ `lastName`. لا تنس تحديث `handleReset` أيضًا بحيث يعمل زر الإعادة. @@ -1310,8 +1310,8 @@ export default function Form() { value={lastName} onChange={handleLastNameChange} /> -

Hi, {firstName} {lastName}

- +

مرحباً، {firstName} {lastName}

+ ); } @@ -1325,13 +1325,13 @@ h1 { margin-top: 10px; } -#### Fix a crash {/*fix-a-crash*/} +#### أصلح عطل {/*fix-a-crash*/} -Here is a small form that is supposed to let the user leave some feedback. When the feedback is submitted, it's supposed to display a thank-you message. However, it crashes with an error message saying "Rendered fewer hooks than expected". Can you spot the mistake and fix it? +هنا إستمارة صغيرة من المفترض أن تسمح للمستخدم بترك بعض التعليقات. عندما يتم إرسال التعليق ، من المفترض أن تعرض رسالة شكر. ومع ذلك ، يتعطل ويعرض رسالة خطأ تقول "تم تصيير خطافات أقل مما كان متوقعًا". هل يمكنك اكتشاف الخطأ وإصلاحه؟ -Are there any limitations on _where_ Hooks may be called? Does this component break any rules? Check if there are any comments disabling the linter checks--this is where the bugs often hide! +هل هناك أي قيود على أماكن استدعاء الخطافات؟ هل ينتهك هذا المكوّن أي قواعد؟ تحقق مما إذا كان هناك أي تعليقات تعطّل فحوصات linter - هنا حيث يختبئ الأخطاء في كثير من الأحيان! @@ -1343,7 +1343,7 @@ import { useState } from 'react'; export default function FeedbackForm() { const [isSent, setIsSent] = useState(false); if (isSent) { - return

Thank you!

; + return

شكراَ لك!

; } else { // eslint-disable-next-line const [message, setMessage] = useState(''); @@ -1359,7 +1359,7 @@ export default function FeedbackForm() { onChange={e => setMessage(e.target.value)} />
- + ); } @@ -1370,9 +1370,9 @@ export default function FeedbackForm() { -Hooks can only be called at the top level of the component function. Here, the first `isSent` definition follows this rule, but the `message` definition is nested in a condition. +يمكن استدعاء الخطافات فقط على المستوى العلوي لدالة المكوّن. هنا ، يتبع تعريف `isSent` هذه القاعدة ، ولكن تعريف الرسالة `message` متداخل في شرط. -Move it out of the condition to fix the issue: +قم بنقلها من الشرط لإصلاح المشكلة: @@ -1384,7 +1384,7 @@ export default function FeedbackForm() { const [message, setMessage] = useState(''); if (isSent) { - return

Thank you!

; + return

شكراَ لك!

; } else { return (
{ @@ -1398,7 +1398,7 @@ export default function FeedbackForm() { onChange={e => setMessage(e.target.value)} />
- +
); } @@ -1407,9 +1407,9 @@ export default function FeedbackForm() { -Remember, Hooks must be called unconditionally and always in the same order! +تذكر ، يجب استدعاء الخطافات بدون قيود وبنفس الترتيب دائمًا! -You could also remove the unnecessary `else` branch to reduce the nesting. However, it's still important that all calls to Hooks happen *before* the first `return`. +يمكنك أيضًا إزالة الفرع `else` الغير الضروري لتقليل التداخل. ومع ذلك ، من المهم أن تحدث جميع استدعاءات الخطافات *قبل* أول `return`. @@ -1421,7 +1421,7 @@ export default function FeedbackForm() { const [message, setMessage] = useState(''); if (isSent) { - return

Thank you!

; + return

شكراَ لك!

; } return ( @@ -1436,7 +1436,7 @@ export default function FeedbackForm() { onChange={e => setMessage(e.target.value)} />
- + ); } @@ -1444,19 +1444,19 @@ export default function FeedbackForm() { -Try moving the second `useState` call after the `if` condition and notice how this breaks it again. +حاول نقل استدعاء `useState` الثاني بعد الشرط `if` ولاحظ كيف يتعطل مرة أخرى. -If your linter is [configured for React](/learn/editor-setup#linting), you should see a lint error when you make a mistake like this. If you don't see an error when you try the faulty code locally, you need to set up linting for your project. +إذا كان مُحلل البرمجيات الخاص بك [مُعدَّ لـ React](/learn/editor-setup#linting)، يجب أن ترى رسالة خطأ (lint error) عندما ترتكب أخطاء مثل هذه الأخطاء. إذا لم ترَ رسالة خطأ عند تجربة الكود الخاطئ محليًا ، فيجب عليك إعداد التحليل البرمجي لمشروعك. -#### Remove unnecessary state {/*remove-unnecessary-state*/} +#### إزالة الحالة الغير ضرورية {/*remove-unnecessary-state*/} -When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason it always shows "Hello, !". +عند النقر على الزر ، يجب أن يطلب هذا المثال اسم المستخدم ومن ثم يعرض تنبيهًا يُحَيِّيه. حاولت استخدام الحالة للحفاظ على الاسم ، ولكن لسبب ما يظهر دائمًا "مرحبًا ، !". -To fix this code, remove the unnecessary state variable. (We will discuss about [why this didn't work](/learn/state-as-a-snapshot) later.) +لإصلاح هذا الكود ، قم بإزالة المتغير الغير ضروري للحالة. (سنناقش لاحقًا [لماذا لم تعمل هذه الطريقة.](/learn/state-as-a-snapshot) ) -Can you explain why this state variable was unnecessary? +هل يمكنك شرح سبب عدم الحاجة إلى متغير الحالة هذا؟ @@ -1467,13 +1467,13 @@ export default function FeedbackForm() { const [name, setName] = useState(''); function handleClick() { - setName(prompt('What is your name?')); - alert(`Hello, ${name}!`); + setName(prompt('ما هو إسمك؟')); + alert(`مرحباً، ${name}!`); } return ( ); } @@ -1483,7 +1483,7 @@ export default function FeedbackForm() { -Here is a fixed version that uses a regular `name` variable declared in the function that needs it: +في النسخة المصححة أدناه ، يتم استخدام متغير الاسم `name` العادي المعلن في الدالة التي يحتاجها: @@ -1492,13 +1492,13 @@ import { useState } from 'react'; export default function FeedbackForm() { function handleClick() { - const name = prompt('What is your name?'); - alert(`Hello, ${name}!`); + const name = prompt('ما هو إسمك؟'); + alert(`مرحباً، ${name}!`); } return ( ); } @@ -1506,7 +1506,7 @@ export default function FeedbackForm() { -A state variable is only necessary to keep information between re-renders of a component. Within a single event handler, a regular variable will do fine. Don't introduce state variables when a regular variable works well. +متغير الحالة ضروري فقط للحفاظ على المعلومات بين إعادة تصيير المكوّن. في معالج حدث واحد ، يكفي استخدام متغير عادي. لا تقم بإضافة متغيرات حالة إذا كان بإمكان متغير عادي القيام بالعمل بشكل جيد. diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 56de0f4c4..a3e0928d5 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -99,7 +99,7 @@ "path": "/learn/responding-to-events" }, { - "title": "State: A Component's Memory", + "title": "الحالة: ذاكرة المكون.", "path": "/learn/state-a-components-memory" }, { From 0092d42a34376d3e8112301e1e560930d3da5fec Mon Sep 17 00:00:00 2001 From: tmtm8976 Date: Mon, 4 Sep 2023 15:26:54 +0300 Subject: [PATCH 3/3] removed dot from sidbar title --- src/sidebarLearn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index a3e0928d5..c0785ac3e 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -99,7 +99,7 @@ "path": "/learn/responding-to-events" }, { - "title": "الحالة: ذاكرة المكون.", + "title": "الحالة: ذاكرة المكون", "path": "/learn/state-a-components-memory" }, {