Skip to content

[DONE]: Translate JavaScript in JSX with Curly Braces #498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AhmedBaset merged 13 commits into from
Jun 21, 2023
Merged

[DONE]: Translate JavaScript in JSX with Curly Braces #498

Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
39059ca
translate overview section
eihabkhan Jun 20, 2023
389c980
translate 'passing strings with quotes' section
eihabkhan Jun 20, 2023
4353501
translate 'using curly braces' section
eihabkhan Jun 20, 2023
c269b7d
translate 'where to use curly braces' section
eihabkhan Jun 20, 2023
ea43001
translate 'double curlies' section
eihabkhan Jun 20, 2023
b8eb684
translate 'more fun' section
eihabkhan Jun 20, 2023
4f3b331
translate 'recap' section
eihabkhan Jun 20, 2023
ab2a94b
translate 'challenges' section
eihabkhan Jun 20, 2023
14d27ab
remove temporary rtl styles
eihabkhan Jun 20, 2023
03f0f68
from line 1 to line 230
AhmedBaset Jun 21, 2023
e3bd188
from 230 to 587
AhmedBaset Jun 21, 2023
41c0816
translate the name
AhmedBaset Jun 21, 2023
58c8f68
Update sidebarLearn.json
AhmedBaset Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 32 additions & 32 deletions src/content/learn/javascript-in-jsx-with-curly-braces.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
---
title: JavaScript في JSX باستخدام الأقواس المعقوفة
title: JavaScript في JSX باستخدام الأقواس المنحنية
---

<Intro>

تتيح لك JSX كتابة ترميز شبيه بـ HTML داخل ملف JavaScript، مما يسمح بالحفاظ على منطق التصيير والمحتوى في المكان نفسه. في بعض الأحيان، قد ترغب في إضافة بعض منطق لغة JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذه الحالة، يمكنك استخدام الأقواس المعقوفة داخل JSX الخاص بك لفتح نافذة للغة JavaScript.
تتيح لك JSX كتابة ترميز شبيه بـ HTML داخل ملف JavaScript، مما يسمح بالحفاظ على منطق التصيير والمحتوى في المكان نفسه. في بعض الأحيان، قد ترغب في إضافة بعض منطق لغة JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذه الحالة، يمكنك استخدام الأقواس المنحنية داخل JSX الخاص بك لفتح نافذة للغة JavaScript.

</Intro>

<YouWillLearn>

* كيفية تمرير strings باستخدام علامات التنصيص
* كيفية تمرير النصوص (string) باستخدام علامات التنصيص
* كيفية الإشارة إلى متغير JavaScript داخل JSX باستخدام الأقواس المعقوفة
* كيفية استدعاء دالة JavaScript داخل JSX باستخدام الأقواس المعقوفة
* كيفية استدعاء دالة JavaScript داخل JSX باستخدام الأقواس المنحنية
* كيفية استخدام كائن JavaScript داخل JSX باستخدام الأقواس المعقوفة

</YouWillLearn>

## تمرير strings باستخدام علامات التنصيص {/*passing-strings-with-quotes*/}
## تمرير النصوص باستخدام علامات التنصيص {/*passing-strings-with-quotes*/}

عندما ترغب في تمرير خاصية string إلى JSX، يتم وضعها بين علامات تنصيص مفردة أو مزدوجة:
عندما ترغب في تمرير نص إلى JSX، يتم وضعها بين علامات تنصيص مفردة أو مزدوجة:

<Sandpack>

Expand All @@ -41,7 +41,7 @@ export default function Avatar() {

</Sandpack>

هنا ، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"` و `"Gregorio Y. Zara"` في صورة strings.
هنا، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"` و `"Gregorio Y. Zara"` كنصوص.

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

Expand All @@ -67,19 +67,19 @@ export default function Avatar() {

</Sandpack>

لاحظ الاختلاف بين `className="avatar"`، الذي يحدد اسم صنف CSS `"avatar"` الذي يجعل الصورة دائرية، و `src={avatar}` الذي يقرأ قيمة متغير JavaScript المسمى `avatar`. هذا لأن الأقواس المعقوفة تتيح لك العمل مع لغة JavaScript مباشرة داخل الترميز الخاصة بك!
لاحظ الاختلاف بين `className="avatar"`، الذي يحدد اسم فئة CSS `"avatar"` الذي يجعل الصورة دائرية، و`src={avatar}` الذي يقرأ قيمة متغير JavaScript المسمى `avatar`. هذا لأن الأقواس المنحنية تتيح لك العمل مع لغة JavaScript مباشرة داخل الترميز الخاصة بك!

## استخدام الأقواس المعقوفة: نافذة إلى عالم JavaScript {/*using-curly-braces-a-window-into-the-javascript-world*/}
## استخدام الأقواس المنحنية: نافذة إلى عالم JavaScript {/*using-curly-braces-a-window-into-the-javascript-world*/}

JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه يمكن استخدام JavaScript داخلها - باستخدام الأقواس المعقوفة `{ }`. في المثال أدناه، يتم تعريف اسم للعالم، `name`، ثم يتم تضمينه بواسطة الأقواس المعقوفة داخل عنصر `<h1>`.
JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه يمكن استخدام JavaScript داخلها - باستخدام الأقواس المعقوفة `{ }`. في المثال أدناه، يتم تعريف اسم للعالِم، `name`، ثم يتم تضمينه بواسطة الأقواس المنحنية داخل عنصر `<h1>`.

<Sandpack>

```js
export default function TodoList() {
const name = 'Gregorio Y. Zara';
return (
<h1>{name}'s To Do List</h1>
<h1>قائمة مهام {name}</h1>
);
}
```
Expand All @@ -103,25 +103,25 @@ function formatDate(date) {

export default function TodoList() {
return (
<h1>To Do List for {formatDate(today)}</h1>
<h1>قائمة مهام لـ {formatDate(today)}</h1>
Copy link
Copy Markdown
Author

@eihabkhan2 eihabkhan2 Jun 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

هل مسموح لنا بتعديل هذا الكود بحيث يتم تغيير DateTimeFormat من en-us إلى مثلا ar-eg؟

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'ar-eg',
    { weekday: 'long' }
  ).format(date);
}

هذا سيحسن من شكل النص المصيّر, بحيث يكون الناتج:
قائمة مهام لـ الأربعاء
بدلا من
قائمة مهام لـ Wednesday

Copy link
Copy Markdown
Collaborator

@AhmedBaset AhmedBaset Jun 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

بالطبع يمكنك طالما لا تؤثر على فكرة الكود

Copy link
Copy Markdown
Author

@eihabkhan2 eihabkhan2 Jun 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

حسنا سأقوم بإنشاء طلب سحب جديد يحتوي على هذا التغيير

Copy link
Copy Markdown
Collaborator

@AhmedBaset AhmedBaset Jun 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

إذن عدل المعلومات عن شخص معروف مثلا هذه معلومات بديلة عن أحمد زويل باستخدام chatGPT

const person = {
  name: 'أحمد زويل',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>مهام {person.name}</h1>
      <img
        className="avatar"
        src="https://i.ibb.co/KDFmRmy/5.jpg"
        alt="أحمد زويل"
      />
      <ul>
        <li>العمل على تطوير العلوم والأبحاث في مصر</li>
        <li>تعزيز التعليم العلمي وتشجيع الشباب على الاهتمام بالعلوم</li>
        <li>تطوير تكنولوجيا المعلومات والاتصالات</li>
        <li>دعم الابتكار والاختراع في مجالات متعددة</li>
      </ul>
    </div>
  );
}

غير ما يلزم من الكود
يمكنك تعديا البيانات أو تغيير الشخص كما تحب

Copy link
Copy Markdown
Author

@eihabkhan2 eihabkhan2 Jun 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

نعم سأستبدل محتوى الأمثلة كما اقترحت بأمثلة مألوفة للمستخدمين العرب.

);
}
```

</Sandpack>

### أين يجب استخدام الأقواس المعقوفة؟ {/*where-to-use-curly-braces*/}
### أين يجب استخدام الأقواس المنحنية؟ {/*where-to-use-curly-braces*/}

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

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

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

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

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

<Sandpack>

Expand All @@ -132,9 +132,9 @@ export default function TodoList() {
backgroundColor: 'black',
color: 'pink'
}}>
<li>Improve the videophone</li>
Copy link
Copy Markdown
Collaborator

@AhmedBaset AhmedBaset Jun 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

سيكون الأمر أفضل لو ترجمت المحتوى بين الكود

Copy link
Copy Markdown
Author

@eihabkhan2 eihabkhan2 Jun 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

صحيح، سأتأكد من أن أترجم محتوى الكود في المرة القادمة.

<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
</ul>
);
}
Expand All @@ -149,7 +149,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }

حاول تغيير قيم `backgroundColor` و `color`.

يمكنك رؤية كائن JavaScript بوضوح داخل الأقواس المعقوفة عندما تكتبه بهذه الطريقة:
يمكنك رؤية كائن JavaScript بوضوح داخل الأقواس المنحنية عندما تكتبه بهذه الطريقة:

```js {2-5}
<ul style={
Expand All @@ -160,17 +160,17 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
}>
```

في المرة القادمة التي ترى `{{` و `}}` في JSX، أعلم أنه ليس سوى كائن داخل أقواس JSX المعقوفة!
في المرة القادمة التي ترى `{{` و `}}` في JSX، أعلم أنه ليس سوى كائن داخل أقواس JSX المنحنية!

<Pitfall>

خصائص `style` المضمنة تكتب بتنسيق camelCase. على سبيل المثال، عنصر HTML `<ul style="background-color: black">` يتم كتابته في المكون الخاص بك على النحو التالي: `<ul style={{ backgroundColor: 'black' }}>`.
خصائص `style` المضمنة تكتب بتنسيق camelCase. على سبيل المثال، عنصرHTML `<ul style="background-color: black">` يتم كتابته في المكون الخاص بك على النحو التالي: `<ul style={{ backgroundColor: 'black' }}>`.

</Pitfall>

## المزيد من المرح مع كائنات JavaScript والأقواس المعقوفة! {/*more-fun-with-javascript-objects-and-curly-braces*/}
## المزيد من المرح مع كائنات JavaScript والأقواس المنحنية! {/*more-fun-with-javascript-objects-and-curly-braces*/}

يمكنك دمج العديد من التعابير في كائن واحد والإشارة لهم في JSX الخاص بك داخل الأقواس المعقوفة:
يمكنك دمج العديد من التعابير في كائن واحد والإشارة لهم في JSX الخاص بك داخل الأقواس المنحنية:

<Sandpack>

Expand All @@ -193,9 +193,9 @@ export default function TodoList() {
alt="Gregorio Y. Zara"
/>
<ul>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
<li>تحسين الهاتف</li>
<li>تجهيز محاضرات عن الطيران</li>
<li>العمل على محرك بالوقود الكحولي</li>
</ul>
</div>
);
Expand All @@ -210,7 +210,7 @@ body > div > div { padding: 20px; }

</Sandpack>

في هذا المثال، يحتوي كائن JavaScript `person` على string `name` وكائن `theme`:
في هذا المثال، يحتوي كائنJavaScript `person` على نص `name` وكائن `theme`:

```js
const person = {
Expand All @@ -226,10 +226,10 @@ const person = {

```js
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<h1>قائمة مهام {person.name}</h1>
```

JSX هي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظيم البيانات والمنطق باستخدام JavaScript.
JSXهي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظيم البيانات والمنطق باستخدام JavaScript.

<Recap>

Expand Down