Skip to content

Commit

Permalink
Merge pull request #499 from eihabkhan/javascript-in-jsx-with-curly-b…
Browse files Browse the repository at this point in the history 
…races

Improve translation of `Javascript in JSX with curly braces`

Co-authered-by: Eihab <mastereihab@gmail.com>
  • Loading branch information
@AhmedBaset
AhmedBaset committed Jun 22, 2023
2 parents 036f616 + c949346 commit 34ff7e3
Showing 1 changed file with 67 additions and 67 deletions.
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 34ff7e3

Please sign in to comment.