2018-10-12 20:35:31 +00:00
---
title: JSX
localeTitle: JSX
---
# JSX
2018-10-29 10:01:44 +00:00
> JSX اختصاراً لـ JavaScript XML.
2018-10-12 20:35:31 +00:00
2018-10-29 10:01:44 +00:00
JSX هو تعبير يستخدم عبارات HTML صالحة داخل JavaScript. يمكنك تعيين هذا التعبير لمتغير واستخدامه في مكان آخر. يمكنك الجمع بين تعبيرات JavaScript سارية أخرى و JSX في عبارات HTML هذه من خلال وضعها ضمن أقواس ( `{}` ). تقوم Babel كذلك بتجميع JSX إلى مكوّن من النوع `React.createElement()` .
2018-10-12 20:35:31 +00:00
### تعبيرات أحادية السطر ومتعددة الأسطر
2018-10-29 10:01:44 +00:00
تعبير في سطر مفرد سهل الاستخدام.
2018-10-12 20:35:31 +00:00
`const one = < h1 > Hello World!< / h1 > ;
`
2018-10-29 10:01:44 +00:00
عندما تحتاج إلى استخدام أسطر متعددة في تعبير JSX واحد ، اكتب شفرتك داخل قوس واحد.
2018-10-12 20:35:31 +00:00
`const two = (
< ul >
< li > Once< / li >
< li > Twice< / li >
< / ul >
);
`
2018-10-29 10:01:44 +00:00
### بإمكانك استخدام علامات HTML فقط
2018-10-12 20:35:31 +00:00
`const greet = < h1 > Hello World!< / h1 > ;
`
### الجمع بين تعبير JavaScript مع علامات HTML
2018-10-29 10:01:44 +00:00
يمكننا استخدام متغيرات JavaScript في الأقواس.
2018-10-12 20:35:31 +00:00
`const who = "Quincy Larson";
const greet = < h1 > Hello {who}!< / h1 > ;
`
يمكننا أيضًا استدعاء وظائف JavaScript الأخرى داخل الأقواس.
`function who() {
return "World";
}
const greet = < h1 > Hello {who()}!< / h1 > ;
`
### يُسمح فقط بعلامة أصل واحدة
2018-10-29 10:01:44 +00:00
يجب أن يحيط تعبير JSX على عنصر رئيسي واحد فقط. يمكننا إضافة عدة علامات متداخلة داخل العنصر الأصل فقط.
2018-10-12 20:35:31 +00:00
`// 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 >
);
`
### معلومات اكثر
2018-10-29 10:01:44 +00:00
* [تقديم JSX ](https://reactjs.org/docs/introducing-jsx.html )