diff --git a/src/content/learn/index.md b/src/content/learn/index.md index b57655bc4..c3ba4926b 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -1,54 +1,56 @@ --- -title: Quick Start +title: بداية سريعة --- -Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis. +أهلا بك في مستندات react، هذه الصفحة ستعطيك مقدمة ل ٨٠٪ من مفاهيم React التي يتم استخدامها بشكل روتيني في مشاريع React. -- How to create and nest components -- How to add markup and styles -- How to display data -- How to render conditions and lists -- How to respond to events and update the screen -- How to share data between components +- كيف تقوم بإنشاء ودمج المكوّنات. +- كيف تضيف تأثيرات على العناصر. +- كيف تقوم بعرض البيانات. +- كيف تستخدم الجمل الشرطية وتعرض عناصر القوائم. +- كيف تتجاوب مع الأحداث المختلفة وتحدث شاشة المستخدم بناءً عليها. +- كيف تشارك البيانات بين أكثر من مكوّن. - -## Creating and nesting components {/*components*/} + -React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. +## إنشاء ودمج المكوّنات {/*components*/} +يتم صناعة تطبيقات React اعتمادا على ما يعرف بـ (المكوّنات - Components). +المكوّن هو جزء مستقل من واجهة المستخدم والتي لها المنطق البرمجي والشكل الخاص بها. يمكنك تشكيل المكوّن بالحجم والشكل المناسب فيتراوح من كونه صغيرا ليمثل (زر) أو كبيرا ليمثل صفحة كاملة. +المكوّنات ليست إلا دوال JavaScript والتي توفر (ترميزا مرئيا) كقيمة مرجعة من الدالة. -React components are JavaScript functions that return markup: ```js function MyButton() { return ( - + ); } ``` +الآن قمت ببناء مكوّن باسم `MyButton`، يمكنك الآن إدخاله في مكون آخر: -Now that you've declared `MyButton`, you can nest it into another component: ```js {5} export default function MyApp() { return (
-

Welcome to my app

+

مرحبًا بكم في تطبيقي

); } ``` -Notice that `` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase. +لاحظ كيف أن المكوّن `` يبدأ بحرف (كبير) في الإنجليزية (M)، وهي طريقة مستخدمة في React للتمييز ومعرفة أن هذه الدالة تمثل مكوّن. أسماء المكوّنات في React يجب أن تبدأ دائما بحرف كبير، بينما يجب أن تكون وسوم ال html المستخدمة بحرف صغير. + +خذ نظرة سريعة على النتيجة: -Have a look at the result: @@ -56,7 +58,7 @@ Have a look at the result: function MyButton() { return ( ); } @@ -64,7 +66,7 @@ function MyButton() { export default function MyApp() { return (
-

Welcome to my app

+

مرحبًا بكم في تطبيقي

); @@ -73,36 +75,45 @@ export default function MyApp() { -The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +عبارة `export default` تحدد المكوّن الأساسي في الملف. إذا لم يكن لديك معرفة كافية عن طريقة بناء وكتابة الكود في JavaScript، فيمكنك الرجوع للمصادر التالية: +[MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) +[javascript.info](https://javascript.info/import-export) + + +## بناء الترميز المرئي للواجهة باستخدام JSX {/*writing-markup-with-jsx*/} -The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box. -JSX is stricter than HTML. You have to close tags like `
`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `
...
` or an empty `<>...` wrapper: + +طريقة بناء جمل ترميز الواجهات الذي شاهدته في الأعلى هو ما يسمى بـ *JSX*. استخدام الـ JSX يعتبر اختياريا، لكن معظم مشاريع React تستخدم الـ JSX لسهولة التعامل معها. كل [الأدوات التي ننصح بها لبيئة التطوير](/learn/installation) تدعم الـ JSX. + + +تعتبر JSX أكثر صرامة من ال HTML. حيث يجب عليك إغلاق العلامات مثل `
`. وكذلك فإن المكوّن الذي تقوم بإنشائه لا يمكن أن يرجع لك مجموعة من علامات ال JSX، بل يجب عليك إحاطتهم بأبٍ مشترك مثل: `
...
` أو حتى غطاء `<>...` الفارغ. + ```js {3,6} function AboutPage() { return ( <> -

About

-

Hello there.
How do you do?

+

عنوان

+

مرحبًا جميعًا.
كيف حالكم?

); } ``` -If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx) +إذا كان لديك الكثير من الأكواد المكتوبة بال HTML والتي ترغب في تحويلها إلى الـ JSX، فيمكنك استخدام [تحويل الـ HTML لـ JSX أون لاين.](https://transform.tools/html-to-jsx) + -## Adding styles {/*adding-styles*/} +## إضافة أنماط تصميمية {/*adding-styles*/} + في React يمكنك تحديد تصنيف باستخدام `className`. حيث أنها تعمل تماما كما تعمل خاصية [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) في الـ HTML: -In React, you specify a CSS class with `className`. It works the same way as the HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute: ```js ``` -Then you write the CSS rules for it in a separate CSS file: +و بعد ذلك يمكنك كتابة قواعد الـ CSS لهذا التصنيف في ملف CSS منفصل: ```css /* In your CSS */ @@ -111,11 +122,14 @@ Then you write the CSS rules for it in a separate CSS file: } ``` -React does not prescribe how you add CSS files. In the simplest case, you'll add a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project. +React لا تحدد لك كيف يجب عليك إضافة ملفات الـ CSS لملف الـ HTML. +ببساطة يمكنك إضافة وسم [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) لملف الـ html الخاص بك. + إذا كنت تستخدم أداة بناء معينة أو إطار عمل فاستفسر عن طريقة إضافة ملفات الـ CSS لمشروعك من خلال المستندات الخاصة بالأداة. -## Displaying data {/*displaying-data*/} -JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`: +## عرض البيانات {/*displaying-data*/} + +تمكنك الـ JSX من إدخال ترميز الواجهة بداخل JavaScript، ويمكنك من خلال الأقواس المعقوفة "الخروج من ترميز الواجهة" والعودة مرة أخرى إلى سياق JavaScript حتى تتمكن من تضمين متغير من أكوادك وعرضه للمستخدم، فمثلا الكود التالي سيُظهر `user.name` للمستخدم على الشاشة: ```js {3} return ( @@ -125,7 +139,7 @@ return ( ); ``` -You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute: +يمكنك كذلك "الخروج إلى سياق JavaScript" من داخل خواص الـ JSX، لكن يجب عليك حينها استخدام الأقواس المعقوفة *بدلا من* علامات التنصيص. فمثلا `className="avatar"` تقوم بتمرير `"avatar"` على أنه التصنيف المستخدم في الـ CSS، ولكن `src={user.imageUrl}` تقوم بقراءة قيمة متغير JavaScript التالي: `user.imageUrl` ومن ثم تقوم بتمرير قيمته لتمثل خاصية الـ `src`: ```js {3,4} return ( @@ -136,13 +150,14 @@ return ( ); ``` -You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary): +يمكنك كذلك وضع تعبيرات برمجية أكثر تعقيدا بداخل أقواس الـ JSX المعقوفة، مثلا [دمج النصوص](https://javascript.info/operators#string-concatenation-with-binary): + ```js const user = { - name: 'Hedy Lamarr', + name: 'هايدي لامار', imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', imageSize: 90, }; @@ -177,11 +192,14 @@ export default function Profile() { -In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables. +في المثال الموضح أعلاه `style={{}}` لا تمثل بناءً خاصا، بل هو كائن JavaScript المعروف `{}` والمعرف بداخل الأقواس المعقوفة الخاصة بال JSX بداخل `style={ }`. يمكنك استخدام خاصية `style` عندما يكون التصميم لديك معتمدا على متغير JavaScript. + + +## التصيير الشرطي {/*conditional-rendering*/} + -## Conditional rendering {/*conditional-rendering*/} +في React، لا يوجد طريقة خاصة لكتابة العبارات الشرطية، وإنما يتم استخدام نفس الطرق المستخدمة في كتابة أكواد JavaScript الاعتيادية، فعلى سبيل المثال يمكنك استخدام عبارة [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) لإظهار الـ JSX بشكل شرطي: -In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX: ```js let content; @@ -196,8 +214,8 @@ return ( ); ``` +و إذا كنت تفضل استخدام كود أكثر اختصارا فيمكنك استخدام [معامل `?` الشرطي](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) وتتميز بإمكانية استخدامها في داخل ال JSX على النقيض من `if` العادية. -If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX: ```js
@@ -209,7 +227,8 @@ If you prefer more compact code, you can use the [conditional `?` operator.](htt
``` -When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): +و في حالة عدم احتياجك لجزئية `else` فيمكنك استخدام [عبارة `&&` المنطقية](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): + ```js
@@ -217,23 +236,25 @@ When you don't need the `else` branch, you can also use a shorter [logical `&&`
``` -All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`. +كل الطرق المذكورة في الأعلى يمكن كذلك استخدامها لتحديد قيم الخواص بشكل شرطي. إذا كان هذا النوع من جمل JavaScript غير مألوفا لديك فيمكنك دائما استخدام عبارة `if...else` الاعتيادية. + + +## تصيير القوائم {/*rendering-lists*/} -## Rendering lists {/*rendering-lists*/} +ستحتاج إلى الاعتماد على ميزات Javascript مثل [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) وكذلك [دالة `map()` الخاصة بالمصفوفات](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) لإظهار القوائم على المكوّنات. -You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components. +على سبيل المثال، لنفترض أن لديك مصفوفة لمجموعة من المنتجات كالتالي: -For example, let's say you have an array of products: ```js const products = [ - { title: 'Cabbage', id: 1 }, - { title: 'Garlic', id: 2 }, - { title: 'Apple', id: 3 }, + { title: 'ملفوف', id: 1 }, + { title: 'خضروات', id: 2 }, + { title: 'تفاح', id: 3 }, ]; ``` +قم باستخدام دالة `map()` بداخل المكوّن الخاص بك لتحويل مصفوفة المنتجات إلى مصفوفة من عناصر الـ `
  • `: -Inside your component, use the `map()` function to transform an array of products into an array of `
  • ` items: ```js const listItems = products.map(product => @@ -247,15 +268,16 @@ return ( ); ``` -Notice how `
  • ` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items. +لاحظ أن كل `
  • ` لديه خاصية باسم `key`. كل عنصر في أي قائمة يجب أن يتم تمرير رقم أو سلسلة نصية إليه لتميّزه عن كل العناصر الأخرى الموجودة في نفس القائمة. هذه الخاصية عادة ما يتم تعبئتها من صلب البيانات الخاصة بمشروعك مثل الـ ID الخاص بقاعدة البيانات. هذا المفتاح (key) يتم استخدامه من React ولمعرفة ما الذي حدث تحديدا في حال قمت لاحقا بإضافة، حذف أو إعادة ترتيب لعناصر القائمة. + ```js const products = [ - { title: 'Cabbage', isFruit: false, id: 1 }, - { title: 'Garlic', isFruit: false, id: 2 }, - { title: 'Apple', isFruit: true, id: 3 }, + { title: 'ملفوف', isFruit: false, id: 1 }, + { title: 'خضروات', isFruit: false, id: 2 }, + { title: 'تفاح', isFruit: true, id: 3 }, ]; export default function ShoppingList() { @@ -278,37 +300,41 @@ export default function ShoppingList() { -## Responding to events {/*responding-to-events*/} +## الاستجابة للأحداث {/*responding-to-events*/} + +يمكنك الاستجابة للأحداث عن طريق تعريف (معالج الحدث) أو الـ *event handler* بداخل المكوّن الخاص بك: -You can respond to events by declaring *event handler* functions inside your components: ```js {2-4,7} function MyButton() { function handleClick() { - alert('You clicked me!'); + alert('لقد ضغطت هنا!'); } return ( ); } ``` -Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button. +لاحظ أن `onClick={handleClick}` لا تحتوي على أقواس الاستدعاء في النهاية! لا تقم _باستدعاء_ معالج الحدث، يكفيك أن تقوم بتمرير اسمها فقط. حيث أن React ستقوم باستدعاء دالة معالجة الحدث عندما يقوم المستخدم بالضغط على الزر. -## Updating the screen {/*updating-the-screen*/} -Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component. +## تحديث الشاشة {/*updating-the-screen*/} + +غالبا ستحتاج أن "يتذكر" المكوّن المعلومات ويعرضها على الشاشة. فمثلا، قد تحتاج إلى عرض عدد المرات التي تم فيها الضغط على زر ما. لتنفيذ ذلك قم بإضافة ما يعرف ب *حالة* أو الـ *state* الخاصة بالمكون: + + +في البداية، قم باستيراد [`useState`](/reference/react/useState) من React: -First, import [`useState`](/reference/react/useState) from React: ```js import { useState } from 'react'; ``` +والآن يمكنك تعريف *متغير الحالة* أو الـ *state variable* بداخل المكوّن: -Now you can declare a *state variable* inside your component: ```js function MyButton() { @@ -316,9 +342,10 @@ function MyButton() { // ... ``` -You’ll get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to write `[something, setSomething]`. +ستحصل على شيئين من دالة `useState`: الحالة الحالية (`count`)، وكذلك الدالة التي تمكنك من تحديث القيمة (`setCount`). يمكنك تسميتهما ما تشاء، ولكن المتعارف عليه أن يتم تسميتها بالشكل التالي: `[something, setSomething]`. + +في المرة الأولى التي يظهر فيها الزر ستكون قيمة `coount` تساوي `0` وذلك لأنك قمت بتمرير `0` كبارامتر لدالة `useState()`. عندما تريد تغيير الحالة، قم باستدعاء `setCount()` وتمرير القيمة الجديدة لها. وبالتالي فإن الضغط على هذا الزر سيزيد العداد `count`. -The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter: ```js {5} function MyButton() { @@ -336,9 +363,8 @@ function MyButton() { } ``` -React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on. - -If you render the same component multiple times, each will get its own state. Click each button separately: +الآن ستقوم React باستدعاء المكوّن الخاص بك مجددا. في هذه المرة قيمة `count` ستكون `1`، ومن ثم ستكون `2`، وهكذا. +إذا قمت تصيير المكوّن عدة مرات فإن كل مرة ستكون لها الحالة المستقلة الخاصة بها. قم بتجربة الضغط على كل زر على حدة: @@ -348,7 +374,7 @@ import { useState } from 'react'; export default function MyApp() { return (
    -

    Counters that update separately

    +

    العدادات التي تتغير مستقلة

    @@ -379,59 +405,66 @@ button {     -Notice how each button "remembers" its own `count` state and doesn't affect other buttons. +لاحظ كيف أن كل زر قادر على "تذكر" حالة الـ `count` الخاصة به دون أي تعارض مع حالة الزر الآخر. -## Using Hooks {/*using-hooks*/} -Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [API reference.](/reference/react) You can also write your own Hooks by combining the existing ones. +## استخدام الخطافات {/*using-hooks*/} -Hooks are more restrictive than other functions. You can only call Hooks *at the top* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there. -## Sharing data between components {/*sharing-data-between-components*/} +الدوال التي تبدأ بـ `use` تسمى *الخطافات* أو *Hooks*. تعتبر `useState` أحد الخطافات المجهّزة والتي توفرها React. وبإمكانك العثور على قائمة الخطافات المختلفة التي توفرها React في [API مرجع.](/reference/react) ، يمكنك كذلك كتابة الخطافات الخاصة بك عن طريق الجمع بين الخطافات الجاهزة والموفّرة من React. -In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed: +الخطافات أكثر صرامة من الدوال الأخرى. يمكنك استدعاء الخطاف في مقدمة المكوّن (أو في مقدمة أي خطاف آخر). إذا أردت استخدام `useState` في عبارة شرطية أو في حملة تكرار فقم ببناء مكوّن مستقل ومن ثم استخدامها هناك. + + + +## مشاركة البيانات بين المكوّنات {/*sharing-data-between-components*/} + +في المثال السابق، كل `MyButton` كان لديه حالة الـ `count` المستقلة الخاصة به، وعندما يتم الضغط على أي منهما حينها يتم تعديل الـ `count` الخاصة بذلك الزر فقط: - + + +مبدئيا، حالة `count` الخاصة بكل زر تساوي `0` -Initially, each `MyButton`'s `count` state is `0` - + + +مكوّن `MyButton` الأول سيقوم بتحديث حالة الـ `count` الخاصة به إلى `1` -The first `MyButton` updates its `count` to `1` -However, often you'll need components to *share data and always update together*. - -To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. +و بالرغم من ذلك، فإنك غالبا ستحتاج أن *تشارك المكوّنات البيانات وأن يتم تحديثها معا* +و لجعل كلا المكونين `MyButton` يقومان بعرض نفس الـ `count` ويتم تحديثهما معا فسنحتاج إلى نقل الحالة من كل زر بشكل مستقل "إلى الأعلى" لأقرب مكوّن يحوي كلا المكوّنين. +في هذا المثال `MyApp` يمثل هذا هذا المكون الأب الذي يحوي كل المكونين: -In this example, it is `MyApp`: - + + +في البداية حالة الـ `count` الخاصة بال `MyApp` تساوي `0`، ويتم تمريرها للأسفل لكلا الابنين. -Initially, `MyApp`'s `count` state is `0` and is passed down to both children - + -On click, `MyApp` updates its `count` state to `1` and passes it down to both children +عند الضغط على أي من الزرين سيقوم ال `MyApp` بتحديث حالة الـ `count` الخاصة به إلى `1` ومن ثم يمرر القيمة إلى الأسفل لكلا الإبنين -Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code. +و الآن عند الضغط على أي من الزرين، فإن الـ `count` في `MyApp` ستتغير، وبالتالي سيغير ذلك بدوره كلا العدادين المتواجدين في `MyButton`. يمكنك تمثيل ذلك بالكود كالتالي: + +في البداية قم *بنقل الحالة للأعلى* من `MyButton` إلى `MyApp`: -First, *move the state up* from `MyButton` into `MyApp`: ```js {2-6,18} export default function MyApp() { @@ -443,7 +476,7 @@ export default function MyApp() { return (
    -

    Counters that update separately

    +

    العدادات التي تتغير مستقلة

    @@ -451,12 +484,12 @@ export default function MyApp() { } function MyButton() { - // ... we're moving code from here ... + // ... نقلت كودا من هنا ... } ``` +و من ثم قم *بتمرير الحالة للأسفل* من `MyApp` لكلا مكوّني الـ `MyButton` بالإضافة إلى دالة معالجة الضغط على الزر (click handler). بإمكانك إرسال معلومات إلى `MyButton` باستخدام أقواس الـ JSX المعقوفة، تماما كما فعلت سابقا في الأوسمة الجاهزة مثل وسم ``: -Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: ```js {11-12} export default function MyApp() { @@ -468,7 +501,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    العدادات التي تتغير معا

    @@ -476,21 +509,24 @@ export default function MyApp() { } ``` -The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons. +هذه المعلومات التي تقوم بتمريرها للأسفل تسمى _props_ أو _خواص المكوّن_. والآن مكون `MyApp` يحتوي على حالة الـ `count` بالإضافة لمعالج الحدث باسم `handleClick`، ويقوم *بإرسالهما للأسفل* لكلا الزرين. + + +أخيرا غيًر كود `MyButton` *ليقرأ* خواص المكوّن التي قمت بتمريرها إليه من مكوّن الأب: -Finally, change `MyButton` to *read* the props you have passed from its parent component: ```js {1,3} function MyButton({ count, onClick }) { return ( ); } ``` -When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components. +عندما تقوم بالضغط على الزر سيتم تشغيل معالج الحدث الذي يحمل اسم `onClick`. خاصية معالجة الحدث المرسلة لكلا الزرين والتي تحمل اسم `onClick` في كليهما هي في حقيقة الأمر تمثل دالة الـ `handleClick` المعرّفة بداخل الـ `MyApp`، وبالتالي سيتم تنفيذ الكود المعرّف بداخلها. ذلك الكود سيقوم باستدعاء `setCount(count + 1)`، والذي بدوره سيزيد حالة الـ `count`. ومن ثم فإن القيمة الجديدة للـ `count` سيتم تمريرها لكلي الزرين وبالتالي فإن كليهما سيُظهران نفس القيمة. هذا ما يعرف بـ "نقل الحالة للأعلى". بنقلك للحالة للأعلى تكون قد جعلت الحالة مشتركة بين المكوّنات. + @@ -506,7 +542,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    العدادات التي تتغير معًا

    @@ -516,7 +552,7 @@ export default function MyApp() { function MyButton({ count, onClick }) { return ( ); } @@ -531,8 +567,8 @@ button {     -## Next Steps {/*next-steps*/} +## الخطوات القادمة {/*next-steps*/} -By now, you know the basics of how to write React code! +والآن أنت تعرف أساسيات بناء كود React! +اطّلع على [هذا الدرس التطبيقي](/learn/tutorial-tic-tac-toe) لتفعيل هذه الأساسيات بشكل عملي وبناء مشروعك المصغّر الأوّل باستخدام React. -Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React.