Skip to content

Commit d8e486f

Browse files
AhmedBasetAhmedBaset
authored
Merge pull request #519 from abdllahdev/fix/translation-errors
Make `Describing the UI` coherent with translations made in the sub-pages of this section
2 parents 3416e30 + f4bc6e1 commit d8e486f

File tree

1 file changed

+66
-67
lines changed

1 file changed

+66
-67
lines changed

‎src/content/learn/describing-the-ui.md

Lines changed: 66 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,26 @@ title: وصف واجهات المستخدم (UI)
44

55
<Intro>
66

7-
تعد React من مكتبات JavaScript المخصَّصة لبناء واجهات المستخدم (UI). يتم بناء واجهات المستخدم من وحدات صغيرة مثل الأزرار والنصوص والصور. تسمح لك React بتجميع هذه العناصر في مكونات (Components) يمكن إعادة استخدامها أو تضمينها داخل بعضها البعض. من مواقع الويب إلى تطبيقات الهاتف الجوال يمكن تقسم كل شئ إلى مكونات. في هذا الفصل، سوف تتعلم كيفية إنشاء وتعديل وعرض مكونات حسب الشروط.
7+
تعد React من مكتبات JavaScript المخصَّصة لبناء واجهات المستخدم (UI). يتم بناء واجهات المستخدم من وحدات صغيرة مثل الأزرار والنصوص والصور. تسمح لك React بتجميع هذه العناصر في مكونات (Components) يمكن إعادة استخدامها أو تضمينها داخل بعضها البعض. من مواقع الويب إلى تطبيقات الهاتف الجوال يمكن تقسم كل شئ إلى مكونات. في هذا الفصل، سوف تتعلم كيفية إنشاء وتعديل وتصيير مكونات حسب الشروط.
88

99
</Intro>
1010

1111
<YouWillLearn isChapter={true}>
1212

1313
* [كيفية كتابة أول مكون React لك](/learn/your-first-component)
1414
* [متى وكيف تنشأ ملفات تحتوى على أكثر من مكون](/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)
1717
* [كيفية إعداد المكونات باستخدام الخصائص (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)
2020
* [كيفية تجنب الثغرات المحيرة عن طريق الحفاظ على المكونات نقية](/learn/keeping-components-pure)
2121

2222
</YouWillLearn>
2323

24-
## أول مكون لك {/*your-first-component*/}
24+
## مكوّنك الأول {/*your-first-component*/}
2525

26-
يتم بناء تطبيقات React باستخدام قطع معزولة من واجهات المستخدم تسمى مكونات. المكون في React هو عبارة عن دالة JavaScript التى يمكنك إضافة ترميزات إليها. المكونات يمكن أن تكون صغيرة كزرار أو كبيرة كصفحة كاملة. هنا المكون `Gallery` يقوم بعرض ثلاث مكونات `Profile`:
26+
يتم بناء تطبيقات React باستخدام قطع معزولة من واجهات المستخدم تسمى مكونات. المكون في React هو عبارة عن دالة JavaScript التى يمكنك إضافة ترميزات إليها. المكونات يمكن أن تكون صغيرة كزرار أو كبيرة كصفحة كاملة. هنا المكون `Gallery` يقوم بتصيير ثلاث مكونات `Profile`:
2727

2828
<Sandpack>
2929

@@ -32,15 +32,15 @@ function Profile() {
3232
return (
3333
<img
3434
src="https://i.imgur.com/MK3eW3As.jpg"
35-
alt="Katherine Johnson"
35+
alt="كاثرين جونسون"
3636
/>
3737
);
3838
}
3939

4040
export default function Gallery() {
4141
return (
4242
<section>
43-
<h1>Amazing scientists</h1>
43+
<h1>علماء مذهلون</h1>
4444
<Profile />
4545
<Profile />
4646
<Profile />
@@ -57,15 +57,14 @@ img { margin: 0 10px 10px 0; height: 90px; }
5757

5858
<LearnMore path="/learn/your-first-component">
5959

60-
اقرأ **[مكونك الأول](/learn/your-first-component)** لتتعلم كيفية تعريف واستخدام مكونات React.
60+
اقرأ **[مكوّنك الأول](/learn/your-first-component)** لتتعلم كيفية تعريف واستخدام مكونات React.
6161

6262
</LearnMore>
6363

6464
## استيراد وتصدير المكونات {/*importing-and-exporting-components*/}
6565

6666
يمكنك تعريف أكثر من مكون في ملف واحد، ولكن الملفات الكبيرة يمكن أن تصبح صعبة التصفح. لحل هذه المشكلة يمكنك أن تصدر *export* مكون من الملف الخاص به، ثم استخدام *import* لتستخدم هذا المكون في ملف آخر:
6767

68-
6968
<Sandpack>
7069

7170
```js App.js hidden
@@ -84,7 +83,7 @@ import Profile from './Profile.js';
8483
export default function Gallery() {
8584
return (
8685
<section>
87-
<h1>Amazing scientists</h1>
86+
<h1>علماء مذهلون</h1>
8887
<Profile />
8988
<Profile />
9089
<Profile />
@@ -98,7 +97,7 @@ export default function Profile() {
9897
return (
9998
<img
10099
src="https://i.imgur.com/QIrZWGIs.jpg"
101-
alt="Alan L. Hart"
100+
alt="آلان إل. هارت"
102101
/>
103102
);
104103
}
@@ -116,9 +115,9 @@ img { margin: 0 10px 10px 0; }
116115

117116
</LearnMore>
118117

119-
## كتابة ترميزات (Markup) باستخدام JSX {/*writing-markup-with-jsx*/}
118+
## كتابة ترميز البناء بـ JSX {/*writing-markup-with-jsx*/}
120119

121-
كل مكون في React عبارة عن دالة JavaScript التى يمكن أن تحتوي على بعض الترميزات التي يمكن لـ React أن تعرضها في المتصفح. المكونات في React تستخدم صيغة معدلة تسمى JSX لكى تمثل هذه الترميزات. JSX تشبه HTML كثيرا، ولكنها صارمة قليلا وتستطيع أن تعرض محتوى ديناميكي.
120+
كل مكون في React عبارة عن دالة JavaScript التى يمكن أن تحتوي على بعض الترميزات التي يمكن لـ React أن تُصيرها في المتصفح. المكونات في React تستخدم صيغة معدلة تسمى JSX لكى تمثل هذه الترميزات. JSX تشبه HTML كثيرا، ولكنها صارمة قليلا وتستطيع أن تعرض محتوى ديناميكي.
122121

123122
إذا قمنا بنسخ ترميزات HTML موجودة سابقا داخل مكون React، لن تعمل دائما:
124123

@@ -127,17 +126,17 @@ img { margin: 0 10px 10px 0; }
127126
```js
128127
export default function TodoList() {
129128
return (
130-
// This doesn't quite work!
131-
<h1>Hedy Lamarr's Todos</h1>
129+
// هذا لن يعمل
130+
<h1>قائمة مهام هيدي لامار</h1>
132131
<img
133132
src="https://i.imgur.com/yXOvdOSs.jpg"
134133
alt="Hedy Lamarr"
135134
class="photo"
136135
>
137136
<ul>
138-
<li>Invent new traffic lights
139-
<li>Rehearse a movie scene
140-
<li>Improve spectrum technology
137+
<li>اختراع إشارة مرور جديدة
138+
<li>تدرب على مشهد فيلم
139+
<li>تحسين تكنولوجيا الطيف
141140
</ul>
142141
);
143142
}
@@ -157,16 +156,16 @@ img { height: 90px; }
157156
export default function TodoList() {
158157
return (
159158
<>
160-
<h1>Hedy Lamarr's Todos</h1>
159+
<h1>قائمة مهام هيدي لامار</h1>
161160
<img
162161
src="https://i.imgur.com/yXOvdOSs.jpg"
163-
alt="Hedy Lamarr"
162+
alt="هيدي لامار"
164163
className="photo"
165164
/>
166165
<ul>
167-
<li>Invent new traffic lights</li>
168-
<li>Rehearse a movie scene</li>
169-
<li>Improve spectrum technology</li>
166+
<li>اختراع إشارة مرور جديدة</li>
167+
<li>تدرب على مشهد فيلم</li>
168+
<li>تحسين تكنولوجيا الطيف</li>
170169
</ul>
171170
</>
172171
);
@@ -181,19 +180,19 @@ img { height: 90px; }
181180

182181
<LearnMore path="/learn/writing-markup-with-jsx">
183182

184-
اقرأ **[كتابة ترميزات (Markup) باستخدام JSX](/learn/writing-markup-with-jsx)** لتتعلم كيفية كتابة JSX صحيحة
183+
اقرأ **[كتابة ترميز البناء بـ JSX](/learn/writing-markup-with-jsx)** لتتعلم كيفية كتابة JSX صحيحة
185184

186185
</LearnMore>
187186

188-
## استخدام JavaScript في JSX باستخدام الأقواس المجعدة {/*javascript-in-jsx-with-curly-braces*/}
187+
## JavaScript في JSX باستخدام الأقواس المنحنية {/*javascript-in-jsx-with-curly-braces*/}
189188

190-
تتيح لك JSX أن تكتب ترميزات مشابهة إلى HTML بداخل ملفات JavaScript وأن تعرض محتوى وتبقى المنطق الخاص بالمكونات في نفس المكان. في بعض الأحيان، قد ترغب في إضافة بعض المنطق المكتوب باستخدام JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذا الموقف، يمكنك استخدام الأقواس المجعدة في JSX الخاص بك لفتح نافذة إلى JavaScript:
189+
تتيح لك JSX أن تكتب ترميزات مشابهة إلى HTML بداخل ملفات JavaScript وأن تُصير محتوى وتبقى المنطق الخاص بالمكونات في نفس المكان. في بعض الأحيان، قد ترغب في إضافة بعض المنطق المكتوب باستخدام JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذا الموقف، يمكنك استخدام الأقواس المنحنية في JSX الخاص بك لفتح نافذة إلى JavaScript:
191190

192191
<Sandpack>
193192

194193
```js
195194
const person = {
196-
name: 'Gregorio Y. Zara',
195+
name: 'جريجوري زارا',
197196
theme: {
198197
backgroundColor: 'black',
199198
color: 'pink'
@@ -203,16 +202,16 @@ const person = {
203202
export default function TodoList() {
204203
return (
205204
<div style={person.theme}>
206-
<h1>{person.name}'s Todos</h1>
205+
<h1>قائمة مهام {person.name}</h1>
207206
<img
208207
className="avatar"
209208
src="https://i.imgur.com/7vQD0fPs.jpg"
210-
alt="Gregorio Y. Zara"
209+
alt="جريجوري زارا"
211210
/>
212211
<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>
216215
</ul>
217216
</div>
218217
);
@@ -229,11 +228,11 @@ body > div > div { padding: 20px; }
229228

230229
<LearnMore path="/learn/javascript-in-jsx-with-curly-braces">
231230

232-
اقرأ **[استخدام JavaScript في JSX باستخدام الأقواس المجعدة](/learn/javascript-in-jsx-with-curly-braces)** لتتعلم كيفية الوصول إلى بيانات JavaScript في JSX
231+
اقرأ **[JavaScript في JSX باستخدام الأقواس المنحنية](/learn/javascript-in-jsx-with-curly-braces)** لتتعلم كيفية الوصول إلى بيانات JavaScript في JSX
233232

234233
</LearnMore>
235234

236-
## تمرير الخصائص (Props) إلى مكون {/*passing-props-to-a-component*/}
235+
## تمرير الخصائص إلى مكوّن {/*passing-props-to-a-component*/}
237236

238237
المكونات في React تتواصل مع بعضها البعض عن طريق الخصائص (Props). كل مكون أب يمكن له أن يمرر بعض المعلومات إلى المكونات الأبناء عن طريق إعطائهم خصائص. الخصائص يمكن أن تذكرك بـ"خصائص HTML"، ولكن يمكنك أن تمرر أي قيمة JavaScript عن طريقهم، هذا يمكن أن يكون كائن (object) أو مصفوفة (array) أو دالة function أو حتى JSX!
239238

@@ -248,7 +247,7 @@ export default function Profile() {
248247
<Avatar
249248
size={100}
250249
person={{
251-
name: 'Katsuko Saruhashi',
250+
name: 'قاتسوكو ساروهاشي',
252251
imageId: 'YfeOqp2'
253252
}}
254253
/>
@@ -310,15 +309,15 @@ export function getImageUrl(person, size = 's') {
310309

311310
<LearnMore path="/learn/passing-props-to-a-component">
312311

313-
اقرأ **[تمرير الخصائص (Props) إلى مكون](/learn/passing-props-to-a-component)** لتتعلم كيفية تمرير وقراءة الخصائص.
312+
اقرأ **[تمرير الخصائص إلى مكوّن](/learn/passing-props-to-a-component)** لتتعلم كيفية تمرير وقراءة الخصائص.
314313

315314
</LearnMore>
316315

317-
## العرض المشروط (Conditional rendering) {/*conditional-rendering*/}
316+
## التصيير الشرطي {/*conditional-rendering*/}
318317

319-
غالبًا ما تحتاج مكوناتك إلى عرض أشياء مختلفة تعتمد على شروط مختلفة. في React، يمكنك عرض JSX حسب شروط باستخدام صيغ شبيهه بـ JavaScript مثل التعبيرات الشرطية `if` والمعاملات `&&` و `condition ? if true : else`.
318+
غالبًا ما تحتاج مكوناتك إلى عرض أشياء مختلفة تعتمد على شروط مختلفة. في React، يمكنك تصيير JSX حسب شروط باستخدام صيغ شبيهه بـ JavaScript مثل التعبيرات الشرطية `if` والمعاملات `&&` و `condition ? if true : else`.
320319

321-
في هذا المثال، معامل `&&` في JavaScript يستخدم لعرض علامة صح بشكل مشروط:
320+
في هذا المثال، معامل `&&` في JavaScript يستخدم لتصيير علامة صح بشكل مشروط:
322321

323322
<Sandpack>
324323

@@ -334,19 +333,19 @@ function Item({ name, isPacked }) {
334333
export default function PackingList() {
335334
return (
336335
<section>
337-
<h1>Sally Ride's Packing List</h1>
336+
<h1>قائمة تعبئة سالي رايد</h1>
338337
<ul>
339338
<Item
340339
isPacked={true}
341-
name="Space suit"
340+
name="بدلة الفضاء"
342341
/>
343342
<Item
344343
isPacked={true}
345-
name="Helmet with a golden leaf"
344+
name="خوذة مع ورقة ذهبية"
346345
/>
347346
<Item
348347
isPacked={false}
349-
name="Photo of Tam"
348+
name="صورة لـ تام"
350349
/>
351350
</ul>
352351
</section>
@@ -358,11 +357,11 @@ export default function PackingList() {
358357

359358
<LearnMore path="/learn/conditional-rendering">
360359

361-
اقرأ **[العرض المشروط (Conditional rendering)](/learn/conditional-rendering)** لتتعلم الطرق المختلفة لعرض المحتوى بشكل شرطي.
360+
اقرأ **[التصيير الشرطي](/learn/conditional-rendering)** لتتعلم الطرق المختلفة لتصيير المحتوى بشكل شرطي.
362361

363362
</LearnMore>
364363

365-
## عرض القوائم (lists) {/*rendering-lists*/}
364+
## تصيير القوائم {/*rendering-lists*/}
366365

367366
غالبًا ما سترغب في عرض عدة مكونات متشابهة من مجموعة البيانات. يمكن استخدام `filter()` و `map()` في JavaScript مع React لتصفية وتحويل مصفوفة البيانات الخاصة بك إلى مصفوفة من المكونات.
368367

@@ -384,13 +383,13 @@ export default function List() {
384383
<p>
385384
<b>{person.name}:</b>
386385
{' ' + person.profession + ' '}
387-
known for {person.accomplishment}
386+
معروف بـ {person.accomplishment}
388387
</p>
389388
</li>
390389
);
391390
return (
392391
<article>
393-
<h1>Scientists</h1>
392+
<h1>علماء</h1>
394393
<ul>{listItems}</ul>
395394
</article>
396395
);
@@ -400,33 +399,33 @@ export default function List() {
400399
```js data.js
401400
export const people = [{
402401
id: 0,
403-
name: 'Creola Katherine Johnson',
404-
profession: 'mathematician',
405-
accomplishment: 'spaceflight calculations',
402+
name: 'كريولا كاثرين جونسون',
403+
profession: ' عالم رياضيات',
404+
accomplishment: 'حسابات الرحلات الفضائية',
406405
imageId: 'MK3eW3A'
407406
}, {
408407
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: 'اكتشاف ثقب الأوزون في منطقة القطب الشمالي',
412411
imageId: 'mynHUSa'
413412
}, {
414413
id: 2,
415-
name: 'Mohammad Abdus Salam',
416-
profession: 'physicist',
417-
accomplishment: 'electromagnetism theory',
414+
name: 'محمد عبد السلام',
415+
profession: 'فزيائى',
416+
accomplishment: 'نظرية الكهرومغناطيسية',
418417
imageId: 'bE7W1ji'
419418
}, {
420419
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: 'تطوير أدوية الكورتيزون والستيرويدات وحبوب منع الحمل',
424423
imageId: 'IOjWm71'
425424
}, {
426425
id: 4,
427-
name: 'Subrahmanyan Chandrasekhar',
428-
profession: 'astrophysicist',
429-
accomplishment: 'white dwarf star mass calculations',
426+
name: 'سوبرامانيان شاندراسيخار',
427+
profession: 'عالم فيزياء فلكية',
428+
accomplishment: 'حسابات كتلة نجم قذم أبيض',
430429
imageId: 'lrWQx8l'
431430
}];
432431
```
@@ -458,7 +457,7 @@ h2 { font-size: 20px; }
458457

459458
<LearnMore path="/learn/rendering-lists">
460459

461-
اقرأ **[عرض القوائم (lists)](/learn/rendering-lists)** لتتعلم كيفية عرض قوائم من المكونات، وكيفية اختيار مفتاح.
460+
اقرأ **[تصيير القوائم](/learn/rendering-lists)** لتتعلم كيفية تصيير قوائم من المكونات، وكيفية اختيار مفتاح.
462461

463462
</LearnMore>
464463

@@ -479,7 +478,7 @@ let guest = 0;
479478
function Cup() {
480479
// سيء: تعديل متغير موجود مسبقًا
481480
guest = guest + 1;
482-
return <h2>Tea cup for guest #{guest}</h2>;
481+
return <h2>كوب شاى لضيف #{guest}</h2>;
483482
}
484483

485484
export default function TeaSet() {
@@ -501,7 +500,7 @@ export default function TeaSet() {
501500

502501
```js
503502
function Cup({ guest }) {
504-
return <h2>Tea cup for guest #{guest}</h2>;
503+
return <h2>كوب شاى لضيف #{guest}</h2>;
505504
}
506505

507506
export default function TeaSet() {

0 commit comments

Comments
 (0)