Skip to content

Commit

Permalink
improve example code content
Browse files Browse the repository at this point in the history
  • Loading branch information
@eihabkhan
eihabkhan committed Jun 21, 2023
1 parent 6b3be79 commit aa4ee91
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 67 deletions.
1 change: 1 addition & 0 deletions src/components/Layout/Page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
<Suspense fallback={null}>
<main className="min-w-0 isolate">
<article
dir="rtl"
className="break-words font-normal text-primary dark:text-primary-dark"
key={asPath}>
{content}
Expand Down
134 changes: 67 additions & 67 deletions src/content/learn/javascript-in-jsx-with-curly-braces.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ export default function Avatar() {
return (
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="غريغوريو واي زارا"
src="https://i.imgur.com/NpGVLas.jpg"
alt="نجيب محفوظ"
/>
);
}
Expand All @@ -41,16 +41,16 @@ export default function Avatar() {

</Sandpack>

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

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

<Sandpack>

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

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

</Sandpack>

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

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

function formatDate(date) {
return new Intl.DateTimeFormat(
'en-US',
'ar-EG',
{ weekday: 'long' }
).format(date);
}
Expand All @@ -114,12 +114,12 @@ export default function TodoList() {

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

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

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

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

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

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

```js
const person = {
name: 'غريغوريو واي زارا',
name: 'نجيب محفوظ',
theme: {
backgroundColor: 'black',
color: 'pink'
Expand All @@ -186,16 +186,16 @@ const person = {
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<h1>مهام {person.name}</h1>
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="غريغوريو واي زارا"
src="https://i.imgur.com/NpGVLas.jpg"
alt="نجيب محفوظ"
/>
<ul>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
<li>كتابة روايات وأعمال أدبية</li>
<li>الدفاع عن الحرية الأدبية والتعبير</li>
<li>تعزيز الوعي الثقافي والأدبي</li>
</ul>
</div>
);
Expand All @@ -214,7 +214,7 @@ body > div > div { padding: 20px; }

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

```js
const person = {
name: 'غريغوريو واي زارا',
name: 'نجيب محفوظ',
theme: {
backgroundColor: 'black',
color: 'pink'
Expand All @@ -262,16 +262,16 @@ const person = {
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person}'s Todos</h1>
<h1>مهام {person}</h1>
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
src="https://i.imgur.com/NpGVLas.jpg"
alt="Gregorio Y. Zara"
/>
<ul>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
<li>كتابة روايات وأعمال أدبية</li>
<li>الدفاع عن الحرية الأدبية والتعبير</li>
<li>تعزيز الوعي الثقافي والأدبي</li>
</ul>
</div>
);
Expand Down Expand Up @@ -300,7 +300,7 @@ body > div > div { padding: 20px; }

```js
const person = {
name: 'غريغوريو واي زارا',
name: 'نجيب محفوظ',
theme: {
backgroundColor: 'black',
color: 'pink'
Expand All @@ -310,16 +310,16 @@ const person = {
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<h1>مهام {person.name}</h1>
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="غريغوريو واي زارا"
src="https://i.imgur.com/NpGVLas.jpg"
alt="نجيب محفوظ"
/>
<ul>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
<li>كتابة روايات وأعمال أدبية</li>
<li>الدفاع عن الحرية الأدبية والتعبير</li>
<li>تعزيز الوعي الثقافي والأدبي</li>
</ul>
</div>
);
Expand All @@ -344,7 +344,7 @@ body > div > div { padding: 20px; }

```js
const person = {
name: 'غريغوريو واي زارا',
name: 'نجيب محفوظ',
theme: {
backgroundColor: 'black',
color: 'pink'
Expand All @@ -354,16 +354,16 @@ const person = {
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<h1>مهام {person.name}</h1>
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="غريغوريو واي زارا"
src="https://i.imgur.com/NpGVLas.jpg"
alt="نجيب محفوظ"
/>
<ul>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
<li>كتابة روايات وأعمال أدبية</li>
<li>الدفاع عن الحرية الأدبية والتعبير</li>
<li>تعزيز الوعي الثقافي والأدبي</li>
</ul>
</div>
);
Expand All @@ -386,8 +386,8 @@ body > div > div { padding: 20px; }

```js
const person = {
name: 'غريغوريو واي زارا',
imageUrl: "https://i.imgur.com/7vQD0fPs.jpg",
name: 'نجيب محفوظ',
imageUrl: "https://i.imgur.com/NpGVLas.jpg",
theme: {
backgroundColor: 'black',
color: 'pink'
Expand All @@ -397,16 +397,16 @@ const person = {
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<h1>مهام {person.name}</h1>
<img
className="avatar"
src={person.imageUrl}
alt="غريغوريو واي زارا"
alt="نجيب محفوظ"
/>
<ul>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
<li>كتابة روايات وأعمال أدبية</li>
<li>الدفاع عن الحرية الأدبية والتعبير</li>
<li>تعزيز الوعي الثقافي والأدبي</li>
</ul>
</div>
);
Expand All @@ -427,7 +427,7 @@ body > div > div { padding: 20px; }

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

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

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

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

const baseUrl = 'https://i.imgur.com/';
const person = {
name: 'غريغوريو واي زارا',
imageId: '7vQD0fP',
name: 'نجيب محفوظ',
imageId: 'NpGVLas',
imageSize: 's',
theme: {
backgroundColor: 'black',
Expand All @@ -449,16 +449,16 @@ const person = {
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<h1>مهام {person.name}</h1>
<img
className="avatar"
src="{baseUrl}{person.imageId}{person.imageSize}.jpg"
alt={person.name}
/>
<ul>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
<li>كتابة روايات وأعمال أدبية</li>
<li>الدفاع عن الحرية الأدبية والتعبير</li>
<li>تعزيز الوعي الثقافي والأدبي</li>
</ul>
</div>
);
Expand Down Expand Up @@ -488,8 +488,8 @@ body > div > div { padding: 20px; }
```js
const baseUrl = 'https://i.imgur.com/';
const person = {
name: 'غريغوريو واي زارا',
imageId: '7vQD0fP',
name: 'نجيب محفوظ',
imageId: 'NpGVLas',
imageSize: 's',
theme: {
backgroundColor: 'black',
Expand All @@ -500,16 +500,16 @@ const person = {
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<h1>مهام {person.name}</h1>
<img
className="avatar"
src={baseUrl + person.imageId + person.imageSize + '.jpg'}
alt={person.name}
/>
<ul>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
<li>كتابة روايات وأعمال أدبية</li>
<li>الدفاع عن الحرية الأدبية والتعبير</li>
<li>تعزيز الوعي الثقافي والأدبي</li>
</ul>
</div>
);
Expand All @@ -532,8 +532,8 @@ body > div > div { padding: 20px; }
import { getImageUrl } from './utils.js'

const person = {
name: 'غريغوريو واي زارا',
imageId: '7vQD0fP',
name: 'نجيب محفوظ',
imageId: 'NpGVLas',
imageSize: 's',
theme: {
backgroundColor: 'black',
Expand All @@ -544,16 +544,16 @@ const person = {
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<h1>مهام {person.name}</h1>
<img
className="avatar"
src={getImageUrl(person)}
alt={person.name}
/>
<ul>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
<li>كتابة روايات وأعمال أدبية</li>
<li>الدفاع عن الحرية الأدبية والتعبير</li>
<li>تعزيز الوعي الثقافي والأدبي</li>
</ul>
</div>
);
Expand Down

0 comments on commit aa4ee91

Please sign in to comment.