المصطلحات

التطبيق وحيد الصفحة

التطبيق وحيد الصفحة (Single-page Application) هو التطبيق الذي يُحمِّل صفحة HTML واحدة وكل ملحقاتها الضرورية (مثل CSS و JavaScript) المطلوبة لكي يعمل التطبيق. لا تتطلّب أيّة تفاعلات مع الصفحة أو الصفحات اللاحقة أي عودة للخادم مرّة أخرى، ممّا يعني عدم إعادة تحميل الصفحة.

بالرغم من قدرتك على بناء تطبيق وحيد الصفحة في React فهو ليس أمرًا ضروريًّا. يُمكِن أيضًا استخدام React لتحسين أجزاء صغيرة من الموقع مع الحصول على تفاعليّة أكبر. يُمكِن للشيفرة المكتوبة باستخدام React أن تتواجد بشكل مشترك مع التنسيق المُصيَّر على الخادم باستخدام PHP أو أي مكتبات من طرف الخادم الأخرى. وفي الحقيقة هذه هي بالضبط طريقة استخدام React في Facebook.

ES6، و ES2015، و ES2016، إلخ..

تُشير هذه الاختصارات إلى أحدث إصدارات من معايير مواصفة اللغة ECMAScript، والتي تكون لغة JavaScript تنفيذًا لها. يتضمّن الإصدار ES6 (يُدعى أيضًا ES2015) إضافات عديدة إلى الإصدارات السابقة مثل الدوال السهمية، والأصناف،والقوالب الحرفية، والتصريحان let و const. بإمكانك تعلّم المزيد حول إصدارات محدّدة من هنا.

المصرفات

يأخذ مُصرِّف JavaScript شيفرة في JavaScript ويحوّلها ويُعيد شيفرة JavaScript بصياغة أخرى. أشيع حالة استخدام هي أن نأخذ صياغة ES6 و نحولها إلى صياغة أقدم لكي تتمكن المتصفحات القديمة من تفسيرها. المُصرِّف الأكثر استخدامًا مع React هو Babel.

المُحزِّمات (Bundlers)

تأخذ المُحزِّمات شيفرة CSS و JavaScript المكتوبة كوحدات منفصلة (عادةً المئات منها)، وتجمعها معًا في بضعة ملفّات مُحسَّنة الأداء لأجل المتصفحات. من المُحزِّمات الأشيع استخدامًا في تطبيقات React نجد Webpack و Browserify.

مدير الحزم

مدير الحزم هو الأداة التي تسمح لك بإدارة الاعتماديّات في مشروعك. أشيع مُديرا حزم مستخدمان في React هما npm و Yarn، وكلاهما عبارة عن واجهة لنفس مُسجّل حزم npm.

شبكة توزيع المحتوى CDN

ترمز CDN إلى شبكة توزيع المحتوى (Content Delivery Network). تُوزِّع هذه الشبكات محتوى ثابت ومُخبَّأ من شبكة من الخوادم عبر العالم.

JSX

JSX هي عبارة عن صياغة ممتدة إلى JavaScript، وهي مشابهة للغة القوالب ولكنّها تملك القوة الكاملة للغة JavaScript. تُصرَّف JSX إلى نداءات للتابع React.createElement()‎ والذي يُعيد كائنات JavaScript مُجرَّدة تُدعى عناصر React. للحصول على مقدمة حول JSX انظر هنا، وللمزيد من المعلومات المفصلة حول JSX انظر هنا.

تستخدم React DOM اتفاقية تسمية الخاصيّات بطريقة camelCase بدلًا من أسماء خاصيّات HTML. على سبيل المثال تُصبِح الخاصيّة tabindex على الشكل tabIndex في JSX. تُكتَب أيضًا الخاصيّة class على الشكل className لأنّ الكلمة class هي كلمة محجوزة في JavaScript:

const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">اسمي هو {name}!</h1>,
  document.getElementById('root')
);

العناصر

عناصر React هي وحدات بناء تطبيقات React. قد يخلط المرء بين العناصر ومفهوم أكثر شيوعًا وهو المكوّنات. يصف العنصر ما ترغب برؤيته على الشاشة، وتكون عناصر React غير قابلة للتعديل: