الفرق بين المراجعتين ل"React/introducing jsx"
جميل-بيلوني (نقاش | مساهمات) (←تمنع JSX هجمات الحقن: تصحيح الفقرة) |
|||
سطر 1: | سطر 1: | ||
− | <noinclude>{{DISPLAYTITLE:مقدمة إلى JSX}}</noinclude> | + | <noinclude>{{DISPLAYTITLE:مقدمة إلى JSX في React}}</noinclude> |
فلننظر إلى تعريف هذا المتغير:<syntaxhighlight lang="javascript"> | فلننظر إلى تعريف هذا المتغير:<syntaxhighlight lang="javascript"> | ||
const element = <h1>!أهلًا بالعالم</h1>; | const element = <h1>!أهلًا بالعالم</h1>; | ||
سطر 91: | سطر 91: | ||
const element = <h1>{title}</h1>; | const element = <h1>{title}</h1>; | ||
− | </syntaxhighlight>حيث أنّ React DOM [http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html تُهرِّب (escape)] أي قيم مُضمَّنة افتراضيًّا في JSX قبل عرضها، وبهذا تضمن أنّه لن يكون بإمكانك حقن أي شيء غير مكتوب بشكل صريح في تطبيقك. تُحوَّل أي قيمة إلى سلسلة نصيّة قبل عرضها، والذي يُساعِد على منع هجمات XSS (اختصارًا للعبارة cross-site-scripting). | + | </syntaxhighlight>حيث أنّ React DOM [http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html تُهرِّب (escape)] أي قيم مُضمَّنة افتراضيًّا في JSX قبل عرضها، وبهذا تضمن أنّه لن يكون بإمكانك حقن أي شيء غير مكتوب بشكل صريح في تطبيقك. تُحوَّل أي قيمة إلى سلسلة نصيّة قبل عرضها، والذي يُساعِد على منع هجمات XSS (اختصارًا للعبارة [[wikipedia:Cross-site_scripting|cross-site-scripting]]). |
+ | == تمثل JSX كائنات أيضًا == | ||
يُترجِم Babel صياغة JSX إلى استدعاءات للتابع <code>React.createElement()</code>. لذلك يكون المثالان التاليان متطابقين:<syntaxhighlight lang="javascript"> | يُترجِم Babel صياغة JSX إلى استدعاءات للتابع <code>React.createElement()</code>. لذلك يكون المثالان التاليان متطابقين:<syntaxhighlight lang="javascript"> | ||
const element = ( | const element = ( | ||
سطر 117: | سطر 118: | ||
}; | }; | ||
− | </syntaxhighlight>تُدعى هذه الكائنات عناصر | + | </syntaxhighlight>تُدعى هذه الكائنات [[React/components and props|عناصر React]]، بإمكانك اعتبارها كتوصيفات لما ترغب برؤيته على الشّاشة. تقرأ React هذه الكائنات وتستخدمها لبناء DOM وإبقائه مُحدَّثًا. |
'''ملاحظة:''' نوصي باستخدام [http://babeljs.io/docs/editors تعريف لغة Babel] إلى المُحرِّر الذي تستخدمه بحيث يتعرَّف على صياغة شيفرة JSX و ES6 ويُظهرها بالألوان المناسبة. بإمكانك استخدام مُخطَّط الألوان [https://labs.voronianski.com/oceanic-next-color-scheme/ Oceanic Next] المتوافق معها أيضًا. | '''ملاحظة:''' نوصي باستخدام [http://babeljs.io/docs/editors تعريف لغة Babel] إلى المُحرِّر الذي تستخدمه بحيث يتعرَّف على صياغة شيفرة JSX و ES6 ويُظهرها بالألوان المناسبة. بإمكانك استخدام مُخطَّط الألوان [https://labs.voronianski.com/oceanic-next-color-scheme/ Oceanic Next] المتوافق معها أيضًا. | ||
== انظر أيضًا == | == انظر أيضًا == | ||
* [[React/hello world|مثال أهلًا بالعالم في React]] | * [[React/hello world|مثال أهلًا بالعالم في React]] | ||
− | |||
* [[React/rendering elements|تصيير العناصر]] | * [[React/rendering elements|تصيير العناصر]] | ||
* [[React/components and props|المكونات والخاصيات]] | * [[React/components and props|المكونات والخاصيات]] | ||
سطر 137: | سطر 137: | ||
* [https://reactjs.org/docs/introducing-jsx.html صفحة مقدمة إلى JSX في توثيق React الرسمي]. | * [https://reactjs.org/docs/introducing-jsx.html صفحة مقدمة إلى JSX في توثيق React الرسمي]. | ||
[[تصنيف:React]] | [[تصنيف:React]] | ||
+ | [[تصنيف:React Main Concepts]] |
المراجعة الحالية بتاريخ 07:26، 23 فبراير 2019
فلننظر إلى تعريف هذا المتغير:
const element = <h1>!أهلًا بالعالم</h1>;
إنّ الصّياغة الغريبة السّابقة التي تحتوي على وسم هي ليست سلسلة نصيّة ولا حتى HTML.
تُدعى الصّياغة السّابقة JSX وهي عبارة عن امتداد لصياغة JavaScript، نوصي باستخدامها مع React لوصف المظهر الذي ينبغي أن تكون عليه واجهة المستخدم. قد تُذكِّرك JSX بلغات القوالب، ولكنها تمتلك قوة JavaScript الكاملة.
تُنتِج JSX عناصر React. سنستعرض إظهار هذه العناصر في DOM في قسم تصيير العناصر (Rendering Elements). سنتحدّث في الفقرات التالية عن أساسيّات JSX الضرورية للبدء.
لماذا JSX؟
تتقبّل React حقيقة أنّ منطق التصيير مرتبط بشكل متوارث مع المنطق الآخر لواجهة المستخدم، والذي نقصد به كيفية التعامل مع الأحداث، وكيفية تغيّر الحالة مع مرور الزمن، وكيفية تحضير البيانات لعرضها.
بدلًا من الفصل بين التقنيات عن طريق وضع اللغة الترميزيّة (markup) والمنطق في ملفّات منفصلة، تفصل React بين المهام عبر وحدات مرتبطة بإحكام تدعى المكونات (components) والتي تحتوي على كليهما معًا. سنعود للحديث عن المكونات في القسم الخاص بها. ولكن إن لم تكن مرتاحًا لوضع اللغة الترميزيّة ضمن JavaScript فاطلع على هذه المناقشة التي قد تقنعك بعكس ذلك.
لا تشترط React استخدام JSX، ولكن يجدها الغالبيّة كمساعدة بصريّة عند التعامل مع واجهة المستخدم بداخل شيفرة JavaScript، فهي تسمح لمكتبة React بأن تُظهِر المزيد من الأخطاء المفيدة والرسائل التحذيريّة.
تضمين التعابير في JSX
نُعرِّف في المثال التالي متغيّرًا يُدعى name
ونستخدمه بداخل JSX عن طريق تغليفه بين قوسين:
const name = 'محمّد';
const element = <h1>أهلًا {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
بإمكانك وضع أي تعبير صحيح في JavaScript بداخل القوسين في JSX، على سبيل المثال 2+2
، أو user.firstName
، أو formatName(user)
.
نُضمِّن في المثال التالي نتيجة استدعاء دالة JavaScript، وهي formatName(user)
، بداخل عنصر <h1>
:
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'محمد',
lastName: 'عبد الله'
};
const element = (
<h1>
أهلًا {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
جرِّب المثال على موقع CodePen.
فصلنا JSX عبر عدّة أسطر لتسهيل القراءة، نُوصي أيضًا عند فعل هذا بتغليفها بين قوسين لتجنّب هفوات الإدخال التلقائي للفاصلة المنقوطة.
JSX هي عبارة عن تعبير أيضًا
بعد انتهاء مرحلة تصريف الشيفرة (compilation)، تُصبِح تعابير JSX استدعاءات لدوال JavaScript اعتياديّة وتُقيَّم إلى كائنات JavaScript.
يعني هذا أنّك تستطيع استخدام JSX بداخل جمل if
الشرطيّة وحلقات for
، بتعيينها إلى متغيّرات، وقبولها كوسائط، وإعادتها من الدوال:
function getGreeting(user) {
if (user) {
return <h1>أهلًا، {formatName(user)}!</h1>;
}
return <h1>أهلًا بك أيّها الزائر</h1>;
}
تحديد خاصيّات HTML عن طريق JSX
بإمكانك استخدام علامتي الاقتباس لتحديد قيم ثابتة نصيّة لخاصيّات HTML:
const element = <div tabIndex="0"></div>;
بإمكانك أيضًا استخدام الأقواس لتضمين تعبير JavaScript بداخل خاصيّة HTML:
const element = <img src={user.avatarUrl}></img>;
لا تضع علامتي اقتباس حول القوسين عند تضمين تعابير JavaScript بداخل الخاصيّات، حيث ينبغي أن تستخدم علامتي الاقتباس فقط من أجل القيم النصيّة والأقواس من أجل التعابير وليس كلاهما معًا.
تحذير: لمّا كانت JSX أقرب إلى JavaScript من HTML، فتستخدم React DOM
طريقة تسمية خاصيّات الكائنات camelCase بدلًا من أسماء خاصيّات HTML. على سبيل المثال تُصبِح الخاصيّة class
على الشكل className
في JSX، و tabindex
على الشكل tabIndex
.
تحديد العناصر الأبناء باستخدام JSX
إن كان العنصر من عناصر HTML الفارغة فبإمكانك إغلاقه مباشرةً باستخدام /> كما في XML:
const element = <img src={user.avatarUrl} />;
يُمكِن لعناصر JSX أن تحتوي على عناصر أبناء:
const element = (
<div>
<h1>أهلًا بك</h1>
<h2>من الجيّد رؤيتك هنا</h2>
</div>
);
تمنع JSX هجمات الحقن
من الآمن تضمين مُدخلات المستخدم في JSX:
const title = response.potentiallyMaliciousInput;
// هذا آمن:
const element = <h1>{title}</h1>;
حيث أنّ React DOM تُهرِّب (escape) أي قيم مُضمَّنة افتراضيًّا في JSX قبل عرضها، وبهذا تضمن أنّه لن يكون بإمكانك حقن أي شيء غير مكتوب بشكل صريح في تطبيقك. تُحوَّل أي قيمة إلى سلسلة نصيّة قبل عرضها، والذي يُساعِد على منع هجمات XSS (اختصارًا للعبارة cross-site-scripting).
تمثل JSX كائنات أيضًا
يُترجِم Babel صياغة JSX إلى استدعاءات للتابع React.createElement()
. لذلك يكون المثالان التاليان متطابقين:
const element = (
<h1 className="greeting">
أهلًا بالعالم!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'أهلًا بالعالم'
);
يُنفِّذ التّابع React.createElement()
بعض الاختبارات ليُساعدك على كتابة شيفرة خالية من الأخطاء، ولكنّه بشكل أساسي يُنشِئ كائنًا مُشابِهًا لما يلي:
// ملاحظة: هذه البنية مُبسَّطة
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'أهلًا بالعالم'
}
};
تُدعى هذه الكائنات عناصر React، بإمكانك اعتبارها كتوصيفات لما ترغب برؤيته على الشّاشة. تقرأ React هذه الكائنات وتستخدمها لبناء DOM وإبقائه مُحدَّثًا.
ملاحظة: نوصي باستخدام تعريف لغة Babel إلى المُحرِّر الذي تستخدمه بحيث يتعرَّف على صياغة شيفرة JSX و ES6 ويُظهرها بالألوان المناسبة. بإمكانك استخدام مُخطَّط الألوان Oceanic Next المتوافق معها أيضًا.
انظر أيضًا
- مثال أهلًا بالعالم في React
- تصيير العناصر
- المكونات والخاصيات
- حالة ودورة حياة المكونات
- معالجة الأحداث في React
- التصيير الشرطي
- القوائم والمفاتيح
- الحقول
- رفع الحالات المشتركة للمستوى الأعلى
- الفرق بين التركيب والوراثة في React
- أسلوب التفكير في React