2.0 KiB

Raw Blame History

title	localeTitle
JSX	JSX

JSX

JSX مختصرة لـ JavaScript XML.

JSX هو تعبير يستخدم عبارات HTML صالحة داخل JavaScript. يمكنك تعيين هذا التعبير لمتغير واستخدامه في مكان آخر. يمكنك الجمع بين تعبيرات JavaScript سارية أخرى و JSX في عبارات HTML هذه من خلال وضعها ضمن أقواس ( {} ). تقوم بابل كذلك بتجميع JSX إلى كائن من النوع React.createElement() .

تعبيرات أحادية السطر ومتعددة الأسطر

تعبير سطر مفرد سهل الاستخدام.

const one = <h1>Hello World!</h1>;

عندما تحتاج إلى استخدام أسطر متعددة في تعبير JSX واحد ، اكتب الرمز داخل قوس واحد.

`const two = (

Once
Twice

); `

باستخدام علامات 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 = (

Once
Twice

);

// This is not valid. const tags = (

Hello World!

This is my special list:

Once
Twice