الفرق بين المراجعتين لصفحة: «React/jsx in depth»
< React
Kinan-mawed (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:شرح JSX بالتفصيل}}</noinclude>' |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:شرح JSX بالتفصيل}}</noinclude> | <noinclude>{{DISPLAYTITLE:شرح JSX بالتفصيل}}</noinclude> | ||
توفِّر JSX علينا عناء إنشاء العناصر باستخدام الدالة <code>React.createElement(component, props, ...children)</code>. انظر إلى الشيفرة التالية في JSX:<syntaxhighlight lang="javascript"> | |||
<MyButton color="blue" shadowSize={2}> | |||
انقر هنا | |||
</MyButton> | |||
</syntaxhighlight>تُترجَم الشيفرة السّابقة إلى:<syntaxhighlight lang="javascript"> | |||
React.createElement( | |||
MyButton, | |||
{color: 'blue', shadowSize: 2}, | |||
'انقر هنا' | |||
) | |||
</syntaxhighlight>بإمكانك أيضًا استخدام الشكل ذاتي الإغلاق للعنصر إن كان لا يحتوي على أيّة عناصر أبناء:<syntaxhighlight lang="javascript"> | |||
<div className="sidebar" /> | |||
</syntaxhighlight>تُترجَم الشيفرة السّابقة إلى:<syntaxhighlight lang="javascript"> | |||
React.createElement( | |||
'div', | |||
{className: 'sidebar'}, | |||
null | |||
) | |||
</syntaxhighlight>إن أردتَ اختبار كيفيّة تحويل بعض شيفرات JSX إلى JavaScript فبإمكانك تجريب [https://babeljs.io/repl/#?presets=react&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG4B8AEhlogO5xnr0AhLQD0jVgG4iAXyJA مُترجِم Babel على الإنترنت]. | |||
مراجعة 13:42، 26 يوليو 2018
توفِّر JSX علينا عناء إنشاء العناصر باستخدام الدالة React.createElement(component, props, ...children). انظر إلى الشيفرة التالية في JSX:
<MyButton color="blue" shadowSize={2}>
انقر هنا
</MyButton>
تُترجَم الشيفرة السّابقة إلى:
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'انقر هنا'
)
بإمكانك أيضًا استخدام الشكل ذاتي الإغلاق للعنصر إن كان لا يحتوي على أيّة عناصر أبناء:
<div className="sidebar" />
تُترجَم الشيفرة السّابقة إلى:
React.createElement(
'div',
{className: 'sidebar'},
null
)
إن أردتَ اختبار كيفيّة تحويل بعض شيفرات JSX إلى JavaScript فبإمكانك تجريب مُترجِم Babel على الإنترنت.