You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/describing-the-ui.md
+66-67Lines changed: 66 additions & 67 deletions
Original file line number
Diff line number
Diff line change
@@ -4,26 +4,26 @@ title: وصف واجهات المستخدم (UI)
4
4
5
5
<Intro>
6
6
7
-
تعد React من مكتبات JavaScript المخصَّصة لبناء واجهات المستخدم (UI). يتم بناء واجهات المستخدم من وحدات صغيرة مثل الأزرار والنصوص والصور. تسمح لك React بتجميع هذه العناصر في مكونات (Components) يمكن إعادة استخدامها أو تضمينها داخل بعضها البعض. من مواقع الويب إلى تطبيقات الهاتف الجوال يمكن تقسم كل شئ إلى مكونات. في هذا الفصل، سوف تتعلم كيفية إنشاء وتعديل وعرض مكونات حسب الشروط.
7
+
تعد React من مكتبات JavaScript المخصَّصة لبناء واجهات المستخدم (UI). يتم بناء واجهات المستخدم من وحدات صغيرة مثل الأزرار والنصوص والصور. تسمح لك React بتجميع هذه العناصر في مكونات (Components) يمكن إعادة استخدامها أو تضمينها داخل بعضها البعض. من مواقع الويب إلى تطبيقات الهاتف الجوال يمكن تقسم كل شئ إلى مكونات. في هذا الفصل، سوف تتعلم كيفية إنشاء وتعديل وتصيير مكونات حسب الشروط.
8
8
9
9
</Intro>
10
10
11
11
<YouWillLearnisChapter={true}>
12
12
13
13
*[كيفية كتابة أول مكون React لك](/learn/your-first-component)
14
14
*[متى وكيف تنشأ ملفات تحتوى على أكثر من مكون](/learn/importing-and-exporting-components)
15
-
*[كيفية إضافة ترميزات (Markup) إلى JavaScript باستخدام JSX](/learn/writing-markup-with-jsx)
16
-
*[كيفية استخدام الأقواس المجعدة في JSX لاستخدام وظائف JavaScript في مكوناتك (Components)](/learn/javascript-in-jsx-with-curly-braces)
15
+
*[كيفية إضافة ترميز (Markup) إلى JavaScript باستخدام JSX](/learn/writing-markup-with-jsx)
16
+
*[كيفية استخدام الأقواس المنحنية في JSX لاستخدام وظائف JavaScript في مكوناتك (Components)](/learn/javascript-in-jsx-with-curly-braces)
17
17
*[كيفية إعداد المكونات باستخدام الخصائص (Props)](/learn/passing-props-to-a-component)
18
-
*[(Conditional rendering) كيفية عرض المكونات بشكل مشروط](/learn/conditional-rendering)
19
-
*[كيفية عرض أكثر من مكون مرة واحدة](/learn/rendering-lists)
18
+
*[(Conditional rendering) كيفية تصيير المكونات بشكل شرطي](/learn/conditional-rendering)
19
+
*[كيفية تصيير أكثر من مكون مرة واحدة](/learn/rendering-lists)
20
20
*[كيفية تجنب الثغرات المحيرة عن طريق الحفاظ على المكونات نقية](/learn/keeping-components-pure)
21
21
22
22
</YouWillLearn>
23
23
24
-
## أول مكون لك {/*your-first-component*/}
24
+
## مكوّنك الأول {/*your-first-component*/}
25
25
26
-
يتم بناء تطبيقات React باستخدام قطع معزولة من واجهات المستخدم تسمى مكونات. المكون في React هو عبارة عن دالة JavaScript التى يمكنك إضافة ترميزات إليها. المكونات يمكن أن تكون صغيرة كزرار أو كبيرة كصفحة كاملة. هنا المكون `Gallery` يقوم بعرض ثلاث مكونات `Profile`:
26
+
يتم بناء تطبيقات React باستخدام قطع معزولة من واجهات المستخدم تسمى مكونات. المكون في React هو عبارة عن دالة JavaScript التى يمكنك إضافة ترميزات إليها. المكونات يمكن أن تكون صغيرة كزرار أو كبيرة كصفحة كاملة. هنا المكون `Gallery` يقوم بتصيير ثلاث مكونات `Profile`:
يمكنك تعريف أكثر من مكون في ملف واحد، ولكن الملفات الكبيرة يمكن أن تصبح صعبة التصفح. لحل هذه المشكلة يمكنك أن تصدر *export* مكون من الملف الخاص به، ثم استخدام *import* لتستخدم هذا المكون في ملف آخر:
67
67
68
-
69
68
<Sandpack>
70
69
71
70
```js App.js hidden
@@ -84,7 +83,7 @@ import Profile from './Profile.js';
84
83
exportdefaultfunctionGallery() {
85
84
return (
86
85
<section>
87
-
<h1>Amazing scientists</h1>
86
+
<h1>علماء مذهلون</h1>
88
87
<Profile />
89
88
<Profile />
90
89
<Profile />
@@ -98,7 +97,7 @@ export default function Profile() {
## كتابة ترميزات (Markup) باستخدام JSX {/*writing-markup-with-jsx*/}
118
+
## كتابة ترميز البناء بـ JSX {/*writing-markup-with-jsx*/}
120
119
121
-
كل مكون في React عبارة عن دالة JavaScript التى يمكن أن تحتوي على بعض الترميزات التي يمكن لـ React أن تعرضها في المتصفح. المكونات في React تستخدم صيغة معدلة تسمى JSX لكى تمثل هذه الترميزات. JSX تشبه HTML كثيرا، ولكنها صارمة قليلا وتستطيع أن تعرض محتوى ديناميكي.
120
+
كل مكون في React عبارة عن دالة JavaScript التى يمكن أن تحتوي على بعض الترميزات التي يمكن لـ React أن تُصيرها في المتصفح. المكونات في React تستخدم صيغة معدلة تسمى JSX لكى تمثل هذه الترميزات. JSX تشبه HTML كثيرا، ولكنها صارمة قليلا وتستطيع أن تعرض محتوى ديناميكي.
122
121
123
122
إذا قمنا بنسخ ترميزات HTML موجودة سابقا داخل مكون React، لن تعمل دائما:
اقرأ **[كتابة ترميزات (Markup) باستخدام JSX](/learn/writing-markup-with-jsx)** لتتعلم كيفية كتابة JSX صحيحة
183
+
اقرأ **[كتابة ترميز البناء بـ JSX](/learn/writing-markup-with-jsx)** لتتعلم كيفية كتابة JSX صحيحة
185
184
186
185
</LearnMore>
187
186
188
-
## استخدام JavaScript في JSX باستخدام الأقواس المجعدة {/*javascript-in-jsx-with-curly-braces*/}
187
+
## JavaScript في JSX باستخدام الأقواس المنحنية {/*javascript-in-jsx-with-curly-braces*/}
189
188
190
-
تتيح لك JSX أن تكتب ترميزات مشابهة إلى HTML بداخل ملفات JavaScript وأن تعرض محتوى وتبقى المنطق الخاص بالمكونات في نفس المكان. في بعض الأحيان، قد ترغب في إضافة بعض المنطق المكتوب باستخدام JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذا الموقف، يمكنك استخدام الأقواس المجعدة في JSX الخاص بك لفتح نافذة إلى JavaScript:
189
+
تتيح لك JSX أن تكتب ترميزات مشابهة إلى HTML بداخل ملفات JavaScript وأن تُصير محتوى وتبقى المنطق الخاص بالمكونات في نفس المكان. في بعض الأحيان، قد ترغب في إضافة بعض المنطق المكتوب باستخدام JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذا الموقف، يمكنك استخدام الأقواس المنحنية في JSX الخاص بك لفتح نافذة إلى JavaScript:
191
190
192
191
<Sandpack>
193
192
194
193
```js
195
194
constperson= {
196
-
name:'Gregorio Y. Zara',
195
+
name:'جريجوري زارا',
197
196
theme: {
198
197
backgroundColor:'black',
199
198
color:'pink'
@@ -203,16 +202,16 @@ const person = {
203
202
exportdefaultfunctionTodoList() {
204
203
return (
205
204
<div style={person.theme}>
206
-
<h1>{person.name}'s Todos</h1>
205
+
<h1>قائمة مهام {person.name}</h1>
207
206
<img
208
207
className="avatar"
209
208
src="https://i.imgur.com/7vQD0fPs.jpg"
210
-
alt="Gregorio Y. Zara"
209
+
alt="جريجوري زارا"
211
210
/>
212
211
<ul>
213
-
<li>Improve the videophone</li>
214
-
<li>Prepare aeronautics lectures</li>
215
-
<li>Work on the alcohol-fuelled engine</li>
212
+
<li>تحسين هاتف الفيديو</li>
213
+
<li>اعداد محاضرات طيران</li>
214
+
<li>العمل على محرك يعمل بالوقود الكحولي</li>
216
215
</ul>
217
216
</div>
218
217
);
@@ -229,11 +228,11 @@ body > div > div { padding: 20px; }
اقرأ **[استخدام JavaScript في JSX باستخدام الأقواس المجعدة](/learn/javascript-in-jsx-with-curly-braces)** لتتعلم كيفية الوصول إلى بيانات JavaScript في JSX
231
+
اقرأ **[JavaScript في JSX باستخدام الأقواس المنحنية](/learn/javascript-in-jsx-with-curly-braces)** لتتعلم كيفية الوصول إلى بيانات JavaScript في JSX
233
232
234
233
</LearnMore>
235
234
236
-
## تمرير الخصائص (Props) إلى مكون {/*passing-props-to-a-component*/}
235
+
## تمرير الخصائص إلى مكوّن {/*passing-props-to-a-component*/}
237
236
238
237
المكونات في React تتواصل مع بعضها البعض عن طريق الخصائص (Props). كل مكون أب يمكن له أن يمرر بعض المعلومات إلى المكونات الأبناء عن طريق إعطائهم خصائص. الخصائص يمكن أن تذكرك بـ"خصائص HTML"، ولكن يمكنك أن تمرر أي قيمة JavaScript عن طريقهم، هذا يمكن أن يكون كائن (object) أو مصفوفة (array) أو دالة function أو حتى JSX!
239
238
@@ -248,7 +247,7 @@ export default function Profile() {
اقرأ **[تمرير الخصائص (Props) إلى مكون](/learn/passing-props-to-a-component)** لتتعلم كيفية تمرير وقراءة الخصائص.
312
+
اقرأ **[تمرير الخصائص إلى مكوّن](/learn/passing-props-to-a-component)** لتتعلم كيفية تمرير وقراءة الخصائص.
314
313
315
314
</LearnMore>
316
315
317
-
## العرض المشروط (Conditional rendering) {/*conditional-rendering*/}
316
+
## التصيير الشرطي {/*conditional-rendering*/}
318
317
319
-
غالبًا ما تحتاج مكوناتك إلى عرض أشياء مختلفة تعتمد على شروط مختلفة. في React، يمكنك عرض JSX حسب شروط باستخدام صيغ شبيهه بـ JavaScript مثل التعبيرات الشرطية `if` والمعاملات `&&` و `condition ? if true : else`.
318
+
غالبًا ما تحتاج مكوناتك إلى عرض أشياء مختلفة تعتمد على شروط مختلفة. في React، يمكنك تصيير JSX حسب شروط باستخدام صيغ شبيهه بـ JavaScript مثل التعبيرات الشرطية `if` والمعاملات `&&` و `condition ? if true : else`.
320
319
321
-
في هذا المثال، معامل `&&` في JavaScript يستخدم لعرض علامة صح بشكل مشروط:
320
+
في هذا المثال، معامل `&&` في JavaScript يستخدم لتصيير علامة صح بشكل مشروط:
322
321
323
322
<Sandpack>
324
323
@@ -334,19 +333,19 @@ function Item({ name, isPacked }) {
334
333
exportdefaultfunctionPackingList() {
335
334
return (
336
335
<section>
337
-
<h1>Sally Ride's Packing List</h1>
336
+
<h1>قائمة تعبئة سالي رايد</h1>
338
337
<ul>
339
338
<Item
340
339
isPacked={true}
341
-
name="Space suit"
340
+
name="بدلة الفضاء"
342
341
/>
343
342
<Item
344
343
isPacked={true}
345
-
name="Helmet with a golden leaf"
344
+
name="خوذة مع ورقة ذهبية"
346
345
/>
347
346
<Item
348
347
isPacked={false}
349
-
name="Photo of Tam"
348
+
name="صورة لـ تام"
350
349
/>
351
350
</ul>
352
351
</section>
@@ -358,11 +357,11 @@ export default function PackingList() {
358
357
359
358
<LearnMorepath="/learn/conditional-rendering">
360
359
361
-
اقرأ **[العرض المشروط (Conditional rendering)](/learn/conditional-rendering)** لتتعلم الطرق المختلفة لعرض المحتوى بشكل شرطي.
360
+
اقرأ **[التصيير الشرطي](/learn/conditional-rendering)** لتتعلم الطرق المختلفة لتصيير المحتوى بشكل شرطي.
362
361
363
362
</LearnMore>
364
363
365
-
## عرض القوائم (lists) {/*rendering-lists*/}
364
+
## تصيير القوائم {/*rendering-lists*/}
366
365
367
366
غالبًا ما سترغب في عرض عدة مكونات متشابهة من مجموعة البيانات. يمكن استخدام `filter()` و `map()` في JavaScript مع React لتصفية وتحويل مصفوفة البيانات الخاصة بك إلى مصفوفة من المكونات.
368
367
@@ -384,13 +383,13 @@ export default function List() {
384
383
<p>
385
384
<b>{person.name}:</b>
386
385
{''+person.profession+''}
387
-
known for {person.accomplishment}
386
+
معروف بـ {person.accomplishment}
388
387
</p>
389
388
</li>
390
389
);
391
390
return (
392
391
<article>
393
-
<h1>Scientists</h1>
392
+
<h1>علماء</h1>
394
393
<ul>{listItems}</ul>
395
394
</article>
396
395
);
@@ -400,33 +399,33 @@ export default function List() {
400
399
```js data.js
401
400
exportconstpeople= [{
402
401
id:0,
403
-
name: 'Creola Katherine Johnson',
404
-
profession: 'mathematician',
405
-
accomplishment: 'spaceflight calculations',
402
+
name:'كريولا كاثرين جونسون',
403
+
profession:' عالم رياضيات',
404
+
accomplishment:'حسابات الرحلات الفضائية',
406
405
imageId:'MK3eW3A'
407
406
}, {
408
407
id:1,
409
-
name: 'Mario José Molina-Pasquel Henríquez',
410
-
profession: 'chemist',
411
-
accomplishment: 'discovery of Arctic ozone hole',
408
+
name:'ماريو خوسيه مولينا باسكويل هنريكيز',
409
+
profession:'كيميائي',
410
+
accomplishment:'اكتشاف ثقب الأوزون في منطقة القطب الشمالي',
412
411
imageId:'mynHUSa'
413
412
}, {
414
413
id:2,
415
-
name: 'Mohammad Abdus Salam',
416
-
profession: 'physicist',
417
-
accomplishment: 'electromagnetism theory',
414
+
name:'محمد عبد السلام',
415
+
profession:'فزيائى',
416
+
accomplishment:'نظرية الكهرومغناطيسية',
418
417
imageId:'bE7W1ji'
419
418
}, {
420
419
id:3,
421
-
name: 'Percy Lavon Julian',
422
-
profession: 'chemist',
423
-
accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
420
+
name:'بيرسي لافون جوليان',
421
+
profession:'كيميائي',
422
+
accomplishment:'تطوير أدوية الكورتيزون والستيرويدات وحبوب منع الحمل',
424
423
imageId:'IOjWm71'
425
424
}, {
426
425
id:4,
427
-
name: 'Subrahmanyan Chandrasekhar',
428
-
profession: 'astrophysicist',
429
-
accomplishment: 'white dwarf star mass calculations',
426
+
name:'سوبرامانيان شاندراسيخار',
427
+
profession:'عالم فيزياء فلكية',
428
+
accomplishment:'حسابات كتلة نجم قذم أبيض',
430
429
imageId:'lrWQx8l'
431
430
}];
432
431
```
@@ -458,7 +457,7 @@ h2 { font-size: 20px; }
458
457
459
458
<LearnMorepath="/learn/rendering-lists">
460
459
461
-
اقرأ **[عرض القوائم (lists)](/learn/rendering-lists)** لتتعلم كيفية عرض قوائم من المكونات، وكيفية اختيار مفتاح.
460
+
اقرأ **[تصيير القوائم](/learn/rendering-lists)** لتتعلم كيفية تصيير قوائم من المكونات، وكيفية اختيار مفتاح.
462
461
463
462
</LearnMore>
464
463
@@ -479,7 +478,7 @@ let guest = 0;
479
478
functionCup() {
480
479
// سيء: تعديل متغير موجود مسبقًا
481
480
guest = guest +1;
482
-
return<h2>Tea cup for guest #{guest}</h2>;
481
+
return<h2>كوب شاى لضيف #{guest}</h2>;
483
482
}
484
483
485
484
exportdefaultfunctionTeaSet() {
@@ -501,7 +500,7 @@ export default function TeaSet() {
0 commit comments