الفرق بين المراجعتين ل"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 على الإنترنت.