diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 501c9f620..936c27214 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,30 +1,30 @@ --- -title: Adding Interactivity +title: إضافة التفاعلية --- -Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. +بعض الاشياء على الشاشة يتم تحديثها للاستجابة لمدخلات المستخدم. على سبيل المثال، النقر على معرض صور يغير الصورة المعروضة. فى React، البيانات التي تتغير على مر الزمن تسمى *حالة (state)*. يمكنك إضافة حالة إلى أي مكون، وتحديثها على حسب احتياجك. فى هذا الفصل، سوف تتعلم كيفية كتابة مكونات يمكنها أن تتعامل مع تفاعلات المستخدم، وتحديث حالتها، وعرض مخرجات مختلفة باختلاف المدخلات. -* [How to handle user-initiated events](/learn/responding-to-events) -* [How to make components "remember" information with state](/learn/state-a-components-memory) -* [How React updates the UI in two phases](/learn/render-and-commit) -* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot) -* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates) -* [How to update an object in state](/learn/updating-objects-in-state) -* [How to update an array in state](/learn/updating-arrays-in-state) +* [كيفية التعامل مع الأحداث التي يبدأها المستخدم](/learn/responding-to-events) +* [كيفية جعل المكونات تتذكر المعلومات باستخدام الحالة](/learn/state-a-components-memory) +* [كيفية تحديث واجهة المستخدم في React في مرحلتين](/learn/render-and-commit) +* [لماذا لا تتحدث الحالة مباشرة بعد تغييرها](/learn/state-as-a-snapshot) +* [كيفية جدولة تحديثات عديدة للحالة](/learn/queueing-a-series-of-state-updates) +* [كيفية تحديث كائن فى حالة](/learn/updating-objects-in-state) +* [كيفية تحديث مصفوفة فى حالة](/learn/updating-arrays-in-state) -## Responding to events {/*responding-to-events*/} +## الاستجابة الى الأحداث {/*responding-to-events*/} -React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on. +تتيح لك React إضافة *معالجي الأحداث (event handlers)* إلى JSX الخاص بك. معالجة الأحداث هم الدوال الخاصة التي سيتم تنشيطها استجابةً لتفاعلات المستخدم مثل النقر، والتمرير، والتركيز على مدخلات النموذج، وما إلى ذلك. -Built-in components like ` ); @@ -68,22 +68,22 @@ button { margin-right: 10px; } -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +اقرأ **[الاستجابة إلى الأحداث](/learn/responding-to-events)** لتعلم كيفية إضافة معالجى الأحداث. -## State: a component's memory {/*state-a-components-memory*/} +## الحالة: ذاكرة المكون {/*state-a-components-memory*/} -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" puts 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.* +غالبًا تحتاج المكونات إلى تغيير محتوى الشاشة نتيجةً لتفاعل المستخدم. مثلا، الكتابة فى نموذج يجب أن يحدث حقل الإدخال، والنقر على "التالي" على دائرة الصور يجب ان يغير الصورة المعروضة، والضغط على "شراء" يضع المنتج فى سلة المشتريات، وهكذا. المكونات تحتاج أن تتذكر اشياء مثل: القيمة الحالية لحقل الإدخال، الصورة الحالية، سلة المشتريات. فى React، هذا النوع من الذاكرة الخاصة بالمكون يسمى "حالة" -You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. +يمكنك إضافة حالة إلى مكون عن طريق استخدام خطاف [`useState`](/reference/react/useState). *الخطاطيف (hooks)* هي دوال خاصة تتيح لك أن تستخدم مميزات React (الحالة واحدة من هذه المميزات). خطاف `useState` يتيح لك أن تعرف متغير حالة. هذا الخطاف يأخذ الحالة المبدأية ويرجع قيمتين: الحالة الحالية، ودالة معين الحالة التي تتيح لك أن تغير الحالة. ```js const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); ``` -Here is how an image gallery uses and updates state on click: +هنا كيف يقوم معرض صور تحديض الحالة (state) عند النقر: @@ -112,17 +112,17 @@ export default function Gallery() { return ( <>

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

- ({index + 1} of {sculptureList.length}) + ({index + 1} من {sculptureList.length})

{showMore &&

{sculpture.description}

} -Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +اقرأ **[الحالة: ذاكرة المكون](/learn/state-a-components-memory)** لتتعلم كيفية حفظ القيم وتحديثها عند التفاعل. -## Render and commit {/*render-and-commit*/} +## التصيير والإيداع {/*render-and-commit*/} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +قبل أن يتم عرض مكوناتك على الشاشة، يجب أن تُصير بواسطة React. سيساعدك فهم الخطوات في هذه العملية على التفكير في كيفية تنفيذ التعليمات البرمجية الخاصة بك وشرح سلوكها. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +تخيل أن مكوناتك هي طهاة فى مطبخ، يقومون بتجميع وجبات شهية من مكونات. فى هذا السيناريو، React هى النادل الذي ياخذ الطلبات من العملاء ويقوم باحضارها لهم. هذا العميلة من طلب وعرض واجهة المستخدم تطلب ثلاث خطوات: -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **تحفيز** المُصير (توصيل طلب العشاء الى المطبخ) +2. **تصيير** المكون (تحضير الطلب فى المطبخ) +3. **إيداع** إلى الـ DOM (وضع الطلب على الطاولة) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +اقرأ **[تصيير وإيداع](/learn/render-and-commit)** لتتعلم دورة حياة تحديثات واجهة المستخدم -## State as a snapshot {/*state-as-a-snapshot*/} +## الحالة كأنها نسخة {/*state-as-a-snapshot*/} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +على عكس متغيرات JavaScript العادية، تتصرف حالة React مثل نسخة. لا يؤدي تعيينها إلى تغيير متغير الحالة الذي لديك بالفعل، ولكنه يؤدي بدلاً من ذلك إلى إعادة تصيير. قد يكون هذا مفاجئًا في البداية! ```js console.log(count); // 0 @@ -265,7 +265,7 @@ setCount(count + 1); // Request a re-render with 1 console.log(count); // Still 0! ``` -This behavior help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +يساعدك هذا السلوك على تجنب الثغرات. هنا تطبيق دردشة صغير. حاول تخمين ما يحدث إذا ضغطت على "إرسال" أولاً *ثم* غير المستلم إلى بوب. من سيظهر اسمه في "التنبيه" بعد خمس ثوانٍ؟ @@ -273,33 +273,33 @@ This behavior help you avoid subtle bugs. Here is a little chat app. Try to gues import { useState } from 'react'; export default function Form() { - const [to, setTo] = useState('Alice'); - const [message, setMessage] = useState('Hello'); + const [to, setTo] = useState('أليس'); + const [message, setMessage] = useState('مرحبا'); function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`انت قولت ${message} إلى ${to}`); }, 5000); } return (