You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/javascript-in-jsx-with-curly-braces.md
+5-7Lines changed: 5 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,6 @@ title: JavaScript في JSX باستخدام الأقواس المعقوفة
4
4
5
5
<Intro>
6
6
7
-
JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
8
-
9
7
تتيح لك JSX كتابة ترميز شبيه بـ HTML داخل ملف JavaScript، مما يسمح بالحفاظ على منطق التصيير والمحتوى في المكان نفسه. في بعض الأحيان، قد ترغب في إضافة بعض منطق لغة JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذه الحالة، يمكنك استخدام الأقواس المعقوفة داخل JSX الخاص بك لفتح نافذة للغة JavaScript.
10
8
11
9
</Intro>
@@ -19,9 +17,9 @@ JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering
19
17
20
18
</YouWillLearn>
21
19
22
-
## Passing strings with quotes {/*passing-strings-with-quotes*/}
20
+
## تمرير strings باستخدام علامات التنصيص {/*passing-strings-with-quotes*/}
23
21
24
-
When you want to pass a string attribute to JSX, you put it in single or double quotes:
22
+
عندما ترغب في تمرير خاصية string إلى JSX، يتم وضعها بين علامات تنصيص مفردة أو مزدوجة:
25
23
26
24
<Sandpack>
27
25
@@ -43,9 +41,9 @@ export default function Avatar() {
43
41
44
42
</Sandpack>
45
43
46
-
Here, `"https://i.imgur.com/7vQD0fPs.jpg"`and`"Gregorio Y. Zara"`are being passed as strings.
44
+
هنا ، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"`و`"Gregorio Y. Zara"`في صورة strings.
47
45
48
-
But what if you want to dynamically specify the `src`or `alt`text? You could**use a value from JavaScript by replacing `"` and `"`with`{` and`}`**:
46
+
ولكن ماذا لو كنت ترغب في تحديد `src`أو نص `alt`بشكل ديناميكي؟ يمكنك**استخدام قيمة من JavaScript عن طريق استبدال `"`و `"`بـ`{`و`}`**:
49
47
50
48
<Sandpack>
51
49
@@ -69,7 +67,7 @@ export default function Avatar() {
69
67
70
68
</Sandpack>
71
69
72
-
Notice the difference between `className="avatar"`, which specifies an `"avatar"`CSS class name that makes the image round, and `src={avatar}`that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup!
70
+
لاحظ الاختلاف بين `className="avatar"`، الذي يحدد اسم صنف CSS `"avatar"`الذي يجعل الصورة دائرية، و `src={avatar}`الذي يقرأ قيمة متغير JavaScript المسمى `avatar`. هذا لأن الأقواس المعقوفة تتيح لك العمل مع لغة JavaScript مباشرة داخل الترميز الخاصة بك!
73
71
74
72
## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
0 commit comments