المصطلحات

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

التطبيق وحيد الصفحة (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 غير قابلة للتعديل:

const element = <h1>أهلًا بالعالم</h1>;

لا تُستخدَم العناصر بشكلٍ مباشر عادةً، بل تُعاد من المكوّنات.

المكوّنات

مكوّنات React هي قطع صغيرة وقابلة لإعادة الاستخدام من الشيفرة والتي تُعيد عناصر React المطلوب تصييرها في الصفحة. أبسط شكل لمكوّن React هو دالة JavaScript مجرّدة والتي تُعيد عنصر React:

function Welcome(props) {
  return <h1>أهلًا {props.name}</h1>;
}

قد تكون المكوّنات أصناف ES6 أيضًا:

class Welcome extends React.Component {
  render() {
    return <h1>أهلًا {this.props.name}</h1>;
  }
}

يُمكِن تقسيم المكوّنات إلى قطع مستقلة وظيفيًّا يُمكِن استخدامها ضمن مكوّنات أخرى. تستطيع المكوّنات إعادة مكوّنات أخرى، ومصفوفات، وسلاسل نصيّة، وأعداد. القاعدة هنا إن كان جزء من واجهة المستخدم لديك مُستخدمًا عدّة مرات (مثل الأزرار ولوحة التحكم والصورة الرمزية)، أو كان مُعقّدًا بحد ذاته (تطبيق، تعليق) فهو مرشّح جيّد ليكون مكوّن قابل لإعادة الاستخدام. يجب أن تبدأ أسماء المكوّنات دائمًا بحرف كبير (‎<Wrapper/>‎ وليس ‎<wrapper/>‎). انظر إلى هذا التوثيق للمزيد من المعلومات حول تصيير المكوّنات.

الخاصيّات

الخاصيّات props هي مُدخَلات في مكوّنات React، أي هي عبارة عن بيانات تُمرَّر للمستوى الأدنى من المكوّن الأب إلى المكوّن الابن.

تذكّر أنّ الخاصيّات قابلة للقراءة فقط ولا يجب تعديلها بأي طريقة:

// خطأ!
props.number = 42;

إن احتجت لتعديل بعض القيم استجابةً لمدخلات المستخدم أو الردود القادمة من الشبكة، فاستخدم الحالة state بدلًا من ذلك.

props.children

يكون props.children متوفرًا في كل مكوّن، وهو يحتوي على المحتوى الموجود بين وسم الفتح ووسم الإغلاق للمكوّن، على سبيل المثال:

<Welcome>أهلًا بالعالم!</Welcome>

تكون السلسلة النصيّة "أهلًا بالعالم!" متوفرة ضمن props.children في المكوّن Welcome:

function Welcome(props) {
  return <p>{props.children}</p>;
}

ولأجل المكوّنات المُعرَّفة كأصناف استخدم this.props.children:

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

الحالة

يحتاج المكوّن للحالة state عندما تتغيّر بعض البيانات المرتبطة معه عبر الزمن. على سبيل المثال يحتاج مكوّن مربع الاختيار Checkbox إلى وجود isChecked ضمن حالته، ويحتاج مكوّن شريط الأخبار NewsFeed إلى تتبّع جميع المنشورات المُحضَرة fetchedPosts في حالته.

الفرق الأكبر بين الحالة والخاصيّات هو تمرير الخاصيّات من المكوّن الأب، أمّا الحالة فتكون مُدارة من قبل المكوّن نفسه. لا يستطيع المكوّن تغيير خاصيّاته ولكن يستطيع تغيير حالته. لفعل ذلك يجب عليه استدعاء التابع this.setState()‎. يُمكِن فقط للمكوّنات المُعرَّفة كأصناف أن تمتلك حالة.

لكل قطعة محددة من البيانات المتغيرة يجب وجود مكوّن واحد يمتلكها في حالته. لا تحاول مزامنة الحالات لمكوّنين مختلفين، وبدلًا من ذلك ارفع الحالة إلى أقرب مكوّن أب مشترك لهما ومرّرها للمستويات الأدنى كخاصيّات لكليهما.

توابع دورة الحياة

توابع دورة الحياة هي عبارة عن وظيفة مخصصة تُنفَّذ خلال أطوار مختلفة من حياة المكوّن. هنالك توابع متوفرة عند إنشاء وإدخال المكوّن إلى DOM (الوصل)، وعند تحديث المكوّن، وعند فصل المكوّن أو إزالته من DOM.

المكوّنات المضبوطة والمكوّنات غير المضبوطة

تمتلك React طريقتين مختلفتين عند التعامل مع حقول الإدخال.

يُدعى عنصر حقل الإدخال الذي تكون قيمته مضبوطة من قبل React بالمكوّن المضبوط. عندما يُدخِل المستخدم البيانات إلى المكوّن المضبوط يُطلَق مُعالِج لحدث التغيير وتُقرِّر الشيفرة لديك ما إذا كانت الإدخالات صالحة (عن طريق إعادة التصيير مع القيمة المُحدَّثة). إن لم تُعِد التصيير فسيبقى عنصر حقل الإدخال بدون تغيير.

يعمل المكوّن غير المضبوط بنفس طريقة عمل عناصر الحقول خارج React، فعندما يُدخِل المستخدم البيانات إلى حقل الإدخال (مثل مربّع حقل الإدخال أو قائمة منسدلة) فستُعكَس المعلومات الجديدة بدون حاجة React لفعل أي شيء. ولكن يعني هذا عدم قدرتك على إجبار الحقول أن تمتلك قيم مُحدَّدة.

يجب عليك في معظم الحالات استخدام المكوّن المضبوطة.

المفاتيح

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

يجب أن تكون المفاتيح فريدة فقط ضمن العناصر الأشقاء بنفس المصفوفة، فلا يجب عليها أن تكون فريدة في كامل التطبيق أو حتى في مكوّن واحد.

لا تُمرِّر شيئًا مثل التابع Math.random()‎ للمفاتيح. من الهام أن تمتلك المفاتيح هويات مستقرة خلال إعادة التصيير لكي تتمكّن React من تحديد وقت إضافة أو إزالة أو إعادة ترتيب العناصر. يجب أن تتوافق المفاتيح مع مُعرِّفات مستقرة وفريدة قادمة من بياناتك، مثل post.id.

المراجع

تدعم React خاصيّة فريدة تستطيع ربطها إلى أي مكوّن. يُمكِن أن تكون الخاصيّة ref عبارة عن مكوّن ناشئ عن الدالة React.createRef()‎، أو دالة رد نداء، أو سلسلة نصيّة (في واجهة برمجة التطبيق القديمة). عندما تكون خاصيّة المرجع ref عبارة عن دالة نداء فستستقبل الدالة عنصر DOM الموافق أو نسخة من الصنف (بناءً على نوع العنصر) كوسيط له. يسمح هذا بامتلاك وصول مباشر إلى عنصر DOM أو نسخة المكوّن.

استخدم المراجع بحذر. إن وجدت نفسك تستخدمها كثيرًا لتنفيذ الأشياء في تطبيقك فانظر في إمكانيّة تآلفك مع تدفق البيانات من الأعلى للأسفل.

الأحداث

تمتلك معالجة الأحداث في عناصر React بعض الفروق في الصياغة:

• تُسمَّى مُعالجات أحداث React بالشكل camelCase بدلًا من الأحرف الصغيرة.
• تُمرِّر في JSX الدالة كمعالج للأحداث بدلًا من تمرير سلسلة نصيّة.

المطابقة

عندما تتغيّر حالة أو خاصيّات المكوّن، تُقرِّر React ما إذا كان تحديث DOM ضروريًّا عن طريق مقارنة العنصر المُعاد حديثًا مع المُصيَّر سابقًا. وعندما لا يكونان متساويان تُحدِّث React نموذج DOM. تُدعى هذه العمليّة بالمُطابَقَة (reconciliation).