74 lines
2.0 KiB
Markdown
74 lines
2.0 KiB
Markdown
---
|
|
title: JSX
|
|
localeTitle: JSX
|
|
---
|
|
# JSX
|
|
|
|
> JSX مختصرة لـ JavaScript XML.
|
|
|
|
JSX هو تعبير يستخدم عبارات HTML صالحة داخل JavaScript. يمكنك تعيين هذا التعبير لمتغير واستخدامه في مكان آخر. يمكنك الجمع بين تعبيرات JavaScript سارية أخرى و JSX في عبارات HTML هذه من خلال وضعها ضمن أقواس ( `{}` ). تقوم بابل كذلك بتجميع JSX إلى كائن من النوع `React.createElement()` .
|
|
|
|
### تعبيرات أحادية السطر ومتعددة الأسطر
|
|
|
|
تعبير سطر مفرد سهل الاستخدام.
|
|
|
|
`const one = <h1>Hello World!</h1>;
|
|
`
|
|
|
|
عندما تحتاج إلى استخدام أسطر متعددة في تعبير JSX واحد ، اكتب الرمز داخل قوس واحد.
|
|
|
|
`const two = (
|
|
<ul>
|
|
<li>Once</li>
|
|
<li>Twice</li>
|
|
</ul>
|
|
);
|
|
`
|
|
|
|
### باستخدام علامات HTML فقط
|
|
|
|
`const greet = <h1>Hello World!</h1>;
|
|
`
|
|
|
|
### الجمع بين تعبير JavaScript مع علامات HTML
|
|
|
|
يمكننا استخدام متغيرات جافا سكريبت في الأقواس.
|
|
|
|
`const who = "Quincy Larson";
|
|
const greet = <h1>Hello {who}!</h1>;
|
|
`
|
|
|
|
يمكننا أيضًا استدعاء وظائف JavaScript الأخرى داخل الأقواس.
|
|
|
|
`function who() {
|
|
return "World";
|
|
}
|
|
const greet = <h1>Hello {who()}!</h1>;
|
|
`
|
|
|
|
### يُسمح فقط بعلامة أصل واحدة
|
|
|
|
يجب أن يحتوي تعبير JSX على علامة رئيسية واحدة فقط. يمكننا إضافة عدة علامات متداخلة داخل العنصر الأصل فقط.
|
|
|
|
`// This is valid.
|
|
const tags = (
|
|
<ul>
|
|
<li>Once</li>
|
|
<li>Twice</li>
|
|
</ul>
|
|
);
|
|
|
|
// This is not valid.
|
|
const tags = (
|
|
<h1>Hello World!</h1>
|
|
<h3>This is my special list:</h3>
|
|
<ul>
|
|
<li>Once</li>
|
|
<li>Twice</li>
|
|
</ul>
|
|
);
|
|
`
|
|
|
|
### معلومات اكثر
|
|
|
|
* [تقديم JSX](https://reactjs.org/docs/introducing-jsx.html) |