Skip to content

Commit aa4ee91

Browse files
eihabkhaneihabkhan
committed
improve example code content
1 parent 6b3be79 commit aa4ee91

2 files changed

Lines changed: 68 additions & 67 deletions

File tree

‎src/components/Layout/Page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
135135
<Suspense fallback={null}>
136136
<main className="min-w-0 isolate">
137137
<article
138+
dir="rtl"
138139
className="break-words font-normal text-primary dark:text-primary-dark"
139140
key={asPath}>
140141
{content}

‎src/content/learn/javascript-in-jsx-with-curly-braces.md‎

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ export default function Avatar() {
2828
return (
2929
<img
3030
className="avatar"
31-
src="https://i.imgur.com/7vQD0fPs.jpg"
32-
alt="غريغوريو واي زارا"
31+
src="https://i.imgur.com/NpGVLas.jpg"
32+
alt="نجيب محفوظ"
3333
/>
3434
);
3535
}
@@ -41,16 +41,16 @@ export default function Avatar() {
4141

4242
</Sandpack>
4343

44-
هنا، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"` و `"غريغوريو واي زارا"` كنصوص.
44+
هنا، يتم تمرير `"https://i.imgur.com/NpGVLas.jpg"` و `"نجيب محفوظ"` كنصوص.
4545

4646
ولكن ماذا لو كنت ترغب في تحديد `src` أو نص `alt` بشكل ديناميكي؟ يمكنك **استخدام قيمة من JavaScript عن طريق استبدال `"`و `"` بـ `{`و `}`**:
4747

4848
<Sandpack>
4949

5050
```js
5151
export default function Avatar() {
52-
const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
53-
const description = 'غريغوريو واي زارا';
52+
const avatar = 'https://i.imgur.com/NpGVLas.jpg';
53+
const description = 'نجيب محفوظ';
5454
return (
5555
<img
5656
className="avatar"
@@ -77,7 +77,7 @@ JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه
7777

7878
```js
7979
export default function TodoList() {
80-
const name = 'غريغوريو واي زارا';
80+
const name = 'نجيب محفوظ';
8181
return (
8282
<h1>قائمة مهام {name}</h1>
8383
);
@@ -86,7 +86,7 @@ export default function TodoList() {
8686

8787
</Sandpack>
8888

89-
حاول تغيير قيمة `name` من `'غريغوريو واي زارا'` إلى `'هايدي لامار'`. لاحظ كيف يتغير عنوان القائمة؟
89+
حاول تغيير قيمة `name` من `'نجيب محفوظ'` إلى `'أحمد زويل'`. لاحظ كيف يتغير عنوان القائمة؟
9090

9191
أي تعبير JavaScript سيعمل بين الأقواس المنحنية، بما في ذلك استدعاءات الدوال مثل `formatDate()`:
9292
<Sandpack>
@@ -96,7 +96,7 @@ const today = new Date();
9696

9797
function formatDate(date) {
9898
return new Intl.DateTimeFormat(
99-
'en-US',
99+
'ar-EG',
100100
{ weekday: 'long' }
101101
).format(date);
102102
}
@@ -114,12 +114,12 @@ export default function TodoList() {
114114

115115
يمكنك استخدام الأقواس المنحنية في JSX بطريقتين فقط:
116116

117-
1. **كنص** مباشرة داخل وسم JSX: `<h1>{name}'s قائمة المهام</h1>` يعمل، ولكن `<{tag}>قائمة المهام لـغريغوريو واي زارا </{tag}>` لن يعمل.
117+
1. **كنص** مباشرة داخل وسم JSX: `<h1>{name}لـ قائمة المهام</h1>` يعمل، ولكن `<{tag}>قائمة المهام لـنجيب محفوظ </{tag}>` لن يعمل.
118118
2. **كخصائص** تأتي فورًا بعد علامة `=`: `src={avatar}` ستقرأ قيمة المتغير `avatar`، ولكن `src="{avatar}"` ستمرره `"{avatar}"` كنص.
119119

120120
## استخدام "أقواس منحنية مزدوجة": CSS وكائنات أخرى داخل JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
121121

122-
بالإضافة إلى النصوص والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المنحنية، مثل `{ name: "هايدي لامار", inventions: 5 }`. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المنحنية: `person={{ name: "هايدي لامار", inventions: 5 }}`.
122+
بالإضافة إلى النصوص والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المنحنية، مثل `{ name: "أحمد زويل", inventions: 5 }`. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المنحنية: `person={{ name: "أحمد زويل", inventions: 5 }}`.
123123

124124
قد ترى ذلك في أنماط CSS المضمنة فيJSX. React لا تتطلب منك استخدام أنماط CSS مضمنة (فئة CSS يعمل جيداً في معظم الحالات). ولكن عندما تحتاج إلى أسلوب مضمن، يمكنك تمرير كائن إلى خاصية `style`:
125125

@@ -132,9 +132,9 @@ export default function TodoList() {
132132
backgroundColor: 'black',
133133
color: 'pink'
134134
}}>
135-
<li>تحسين الهاتف</li>
136-
<li>تجهيز محاضرات عن الطيران</li>
137-
<li>العمل على محرك بالوقود الكحولي</li>
135+
<li>كتابة روايات وأعمال أدبية</li>
136+
<li>الدفاع عن الحرية الأدبية والتعبير</li>
137+
<li>تعزيز الوعي الثقافي والأدبي</li>
138138
</ul>
139139
);
140140
}
@@ -176,7 +176,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
176176

177177
```js
178178
const person = {
179-
name: 'غريغوريو واي زارا',
179+
name: 'نجيب محفوظ',
180180
theme: {
181181
backgroundColor: 'black',
182182
color: 'pink'
@@ -186,16 +186,16 @@ const person = {
186186
export default function TodoList() {
187187
return (
188188
<div style={person.theme}>
189-
<h1>{person.name}'s Todos</h1>
189+
<h1>مهام {person.name}</h1>
190190
<img
191191
className="avatar"
192-
src="https://i.imgur.com/7vQD0fPs.jpg"
193-
alt="غريغوريو واي زارا"
192+
src="https://i.imgur.com/NpGVLas.jpg"
193+
alt="نجيب محفوظ"
194194
/>
195195
<ul>
196-
<li>تحسين الهاتف</li>
197-
<li>تجهيز محاضرات عن الطيران</li>
198-
<li>العمل على محرك بالوقود الكحولي</li>
196+
<li>كتابة روايات وأعمال أدبية</li>
197+
<li>الدفاع عن الحرية الأدبية والتعبير</li>
198+
<li>تعزيز الوعي الثقافي والأدبي</li>
199199
</ul>
200200
</div>
201201
);
@@ -214,7 +214,7 @@ body > div > div { padding: 20px; }
214214

215215
```js
216216
const person = {
217-
name: 'غريغوريو واي زارا',
217+
name: 'نجيب محفوظ',
218218
theme: {
219219
backgroundColor: 'black',
220220
color: 'pink'
@@ -252,7 +252,7 @@ JSXهي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظ
252252

253253
```js
254254
const person = {
255-
name: 'غريغوريو واي زارا',
255+
name: 'نجيب محفوظ',
256256
theme: {
257257
backgroundColor: 'black',
258258
color: 'pink'
@@ -262,16 +262,16 @@ const person = {
262262
export default function TodoList() {
263263
return (
264264
<div style={person.theme}>
265-
<h1>{person}'s Todos</h1>
265+
<h1>مهام {person}</h1>
266266
<img
267267
className="avatar"
268-
src="https://i.imgur.com/7vQD0fPs.jpg"
268+
src="https://i.imgur.com/NpGVLas.jpg"
269269
alt="Gregorio Y. Zara"
270270
/>
271271
<ul>
272-
<li>تحسين الهاتف</li>
273-
<li>تجهيز محاضرات عن الطيران</li>
274-
<li>العمل على محرك بالوقود الكحولي</li>
272+
<li>كتابة روايات وأعمال أدبية</li>
273+
<li>الدفاع عن الحرية الأدبية والتعبير</li>
274+
<li>تعزيز الوعي الثقافي والأدبي</li>
275275
</ul>
276276
</div>
277277
);
@@ -300,7 +300,7 @@ body > div > div { padding: 20px; }
300300

301301
```js
302302
const person = {
303-
name: 'غريغوريو واي زارا',
303+
name: 'نجيب محفوظ',
304304
theme: {
305305
backgroundColor: 'black',
306306
color: 'pink'
@@ -310,16 +310,16 @@ const person = {
310310
export default function TodoList() {
311311
return (
312312
<div style={person.theme}>
313-
<h1>{person.name}'s Todos</h1>
313+
<h1>مهام {person.name}</h1>
314314
<img
315315
className="avatar"
316-
src="https://i.imgur.com/7vQD0fPs.jpg"
317-
alt="غريغوريو واي زارا"
316+
src="https://i.imgur.com/NpGVLas.jpg"
317+
alt="نجيب محفوظ"
318318
/>
319319
<ul>
320-
<li>تحسين الهاتف</li>
321-
<li>تجهيز محاضرات عن الطيران</li>
322-
<li>العمل على محرك بالوقود الكحولي</li>
320+
<li>كتابة روايات وأعمال أدبية</li>
321+
<li>الدفاع عن الحرية الأدبية والتعبير</li>
322+
<li>تعزيز الوعي الثقافي والأدبي</li>
323323
</ul>
324324
</div>
325325
);
@@ -344,7 +344,7 @@ body > div > div { padding: 20px; }
344344

345345
```js
346346
const person = {
347-
name: 'غريغوريو واي زارا',
347+
name: 'نجيب محفوظ',
348348
theme: {
349349
backgroundColor: 'black',
350350
color: 'pink'
@@ -354,16 +354,16 @@ const person = {
354354
export default function TodoList() {
355355
return (
356356
<div style={person.theme}>
357-
<h1>{person.name}'s Todos</h1>
357+
<h1>مهام {person.name}</h1>
358358
<img
359359
className="avatar"
360-
src="https://i.imgur.com/7vQD0fPs.jpg"
361-
alt="غريغوريو واي زارا"
360+
src="https://i.imgur.com/NpGVLas.jpg"
361+
alt="نجيب محفوظ"
362362
/>
363363
<ul>
364-
<li>تحسين الهاتف</li>
365-
<li>تجهيز محاضرات عن الطيران</li>
366-
<li>العمل على محرك بالوقود الكحولي</li>
364+
<li>كتابة روايات وأعمال أدبية</li>
365+
<li>الدفاع عن الحرية الأدبية والتعبير</li>
366+
<li>تعزيز الوعي الثقافي والأدبي</li>
367367
</ul>
368368
</div>
369369
);
@@ -386,8 +386,8 @@ body > div > div { padding: 20px; }
386386

387387
```js
388388
const person = {
389-
name: 'غريغوريو واي زارا',
390-
imageUrl: "https://i.imgur.com/7vQD0fPs.jpg",
389+
name: 'نجيب محفوظ',
390+
imageUrl: "https://i.imgur.com/NpGVLas.jpg",
391391
theme: {
392392
backgroundColor: 'black',
393393
color: 'pink'
@@ -397,16 +397,16 @@ const person = {
397397
export default function TodoList() {
398398
return (
399399
<div style={person.theme}>
400-
<h1>{person.name}'s Todos</h1>
400+
<h1>مهام {person.name}</h1>
401401
<img
402402
className="avatar"
403403
src={person.imageUrl}
404-
alt="غريغوريو واي زارا"
404+
alt="نجيب محفوظ"
405405
/>
406406
<ul>
407-
<li>تحسين الهاتف</li>
408-
<li>تجهيز محاضرات عن الطيران</li>
409-
<li>العمل على محرك بالوقود الكحولي</li>
407+
<li>كتابة روايات وأعمال أدبية</li>
408+
<li>الدفاع عن الحرية الأدبية والتعبير</li>
409+
<li>تعزيز الوعي الثقافي والأدبي</li>
410410
</ul>
411411
</div>
412412
);
@@ -427,7 +427,7 @@ body > div > div { padding: 20px; }
427427

428428
في الكائن أدناه، يتم تقسيم العنوان الكامل للصورة إلى أربعة أجزاء: العنوان الأساس و`imageId` و`imageSize` وامتداد الملف.
429429

430-
نريد أن يتم دمج عنوان URL للصورة باستخدام هذه الخصائص معًا: العنوان الأساس (دائمًا `'https://i.imgur.com/'`) و`imageId` (`'7vQD0fP'`) و `imageSize` (`'s'`)، وامتداد الملف (دائمًا `'.jpg'`). ومع ذلك، هناك خطأ في كيفية تحديد الوسم `<img>` لخاصية `src` الخاصة به.
430+
نريد أن يتم دمج عنوان URL للصورة باستخدام هذه الخصائص معًا: العنوان الأساس (دائمًا `'https://i.imgur.com/'`) و`imageId` (`'NpGVLas'`) و `imageSize` (`'s'`)، وامتداد الملف (دائمًا `'.jpg'`). ومع ذلك، هناك خطأ في كيفية تحديد الوسم `<img>` لخاصية `src` الخاصة به.
431431

432432
هل يمكنك إصلاح الخطأ؟
433433

@@ -437,8 +437,8 @@ body > div > div { padding: 20px; }
437437

438438
const baseUrl = 'https://i.imgur.com/';
439439
const person = {
440-
name: 'غريغوريو واي زارا',
441-
imageId: '7vQD0fP',
440+
name: 'نجيب محفوظ',
441+
imageId: 'NpGVLas',
442442
imageSize: 's',
443443
theme: {
444444
backgroundColor: 'black',
@@ -449,16 +449,16 @@ const person = {
449449
export default function TodoList() {
450450
return (
451451
<div style={person.theme}>
452-
<h1>{person.name}'s Todos</h1>
452+
<h1>مهام {person.name}</h1>
453453
<img
454454
className="avatar"
455455
src="{baseUrl}{person.imageId}{person.imageSize}.jpg"
456456
alt={person.name}
457457
/>
458458
<ul>
459-
<li>تحسين الهاتف</li>
460-
<li>تجهيز محاضرات عن الطيران</li>
461-
<li>العمل على محرك بالوقود الكحولي</li>
459+
<li>كتابة روايات وأعمال أدبية</li>
460+
<li>الدفاع عن الحرية الأدبية والتعبير</li>
461+
<li>تعزيز الوعي الثقافي والأدبي</li>
462462
</ul>
463463
</div>
464464
);
@@ -488,8 +488,8 @@ body > div > div { padding: 20px; }
488488
```js
489489
const baseUrl = 'https://i.imgur.com/';
490490
const person = {
491-
name: 'غريغوريو واي زارا',
492-
imageId: '7vQD0fP',
491+
name: 'نجيب محفوظ',
492+
imageId: 'NpGVLas',
493493
imageSize: 's',
494494
theme: {
495495
backgroundColor: 'black',
@@ -500,16 +500,16 @@ const person = {
500500
export default function TodoList() {
501501
return (
502502
<div style={person.theme}>
503-
<h1>{person.name}'s Todos</h1>
503+
<h1>مهام {person.name}</h1>
504504
<img
505505
className="avatar"
506506
src={baseUrl + person.imageId + person.imageSize + '.jpg'}
507507
alt={person.name}
508508
/>
509509
<ul>
510-
<li>تحسين الهاتف</li>
511-
<li>تجهيز محاضرات عن الطيران</li>
512-
<li>العمل على محرك بالوقود الكحولي</li>
510+
<li>كتابة روايات وأعمال أدبية</li>
511+
<li>الدفاع عن الحرية الأدبية والتعبير</li>
512+
<li>تعزيز الوعي الثقافي والأدبي</li>
513513
</ul>
514514
</div>
515515
);
@@ -532,8 +532,8 @@ body > div > div { padding: 20px; }
532532
import { getImageUrl } from './utils.js'
533533

534534
const person = {
535-
name: 'غريغوريو واي زارا',
536-
imageId: '7vQD0fP',
535+
name: 'نجيب محفوظ',
536+
imageId: 'NpGVLas',
537537
imageSize: 's',
538538
theme: {
539539
backgroundColor: 'black',
@@ -544,16 +544,16 @@ const person = {
544544
export default function TodoList() {
545545
return (
546546
<div style={person.theme}>
547-
<h1>{person.name}'s Todos</h1>
547+
<h1>مهام {person.name}</h1>
548548
<img
549549
className="avatar"
550550
src={getImageUrl(person)}
551551
alt={person.name}
552552
/>
553553
<ul>
554-
<li>تحسين الهاتف</li>
555-
<li>تجهيز محاضرات عن الطيران</li>
556-
<li>العمل على محرك بالوقود الكحولي</li>
554+
<li>كتابة روايات وأعمال أدبية</li>
555+
<li>الدفاع عن الحرية الأدبية والتعبير</li>
556+
<li>تعزيز الوعي الثقافي والأدبي</li>
557557
</ul>
558558
</div>
559559
);

0 commit comments

Comments
 (0)