React

من موسوعة حسوب
اذهب إلى: تصفح، ابحث

React (والتي تُعرَف أيضًا باسم React.js أو ReactJS) هي مكتبة JavaScript تُستخدَم لبناء واجهات المستخدم. تُدار React من شركة Facebook بالإضافة إلى مجتمع كبير من المطورين، فهي مشروعٌ مفتوح المصدر.

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

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

تسير React على مبدأ «تعلّم مرّة واكتب في أي مكان»، إذ لا تفترض تعاملك مع تقنية مُحدّدة، بل تستطيع تطوير ميزات جديدة فيها بدون إعادة كتابة شيفرة جديدة. يُمكِن تصيير React على الخادم باستخدام Node.js، ويُمكن من خلالها إنشاء تطبيقات الهواتف النقالة عبر React Native.

محتويات

الدليل التطبيقي

دليل تطبيقي شامل لبناء لعبة إكس-أو باستخدام React. لا يفترض هذا الدليل أي معرفة مسبقة بمكتبة React. هذا الدليل مُصمَّم للأشخاص الذين يُفضّلون التعلّم بالممارسة. إن كنت تُفضّل تعلّم المفاهيم من البداية فارجع إلى توثيق React من البداية خطوة بخطوة. قد تجد هذا الدليل متكاملًا مع توثيق React.

تثبيت React

تجربة React

تجربة React مباشرةً على الإنترنت أو إعداد بيئة تطوير محليّة خاصّة بك.

إضافة React إلى تطبيق جديد

إعداد تطبيق صفحة واحدة (single-page application) مع كل شيء تحتاجه من أجل سير عمل التطوير بسلاسة، بما في ذلك اكتشاف الأخطاء (linting)، والاختبار، وتحسينات الإنتاج، والمزيد من ذلك.

إضافة React إلى تطبيق موجود

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

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

روابط شبكة توزيع المحتوى الخاصّة بمكتبة React للتطوير والإنتاج.

المفاهيم الأساسية

مثال أهلًا بالعالم في React

طريقة تنفيذ مثال أهلًا بالعالم في React، مع الحديث عن درجة المعرفة المفترضة في JavaScript للمتابعة في التوثيق.

مقدمة إلى JSX

أهميّة استخدام صياغة JSX وهي عبارة عن امتداد لصياغة JavaScript ، تُستخدَم مع React لوصف المظهر الذي ينبغي أن تكون عليه واجهة المستخدم.

تصيير العناصر

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

المكونات والخاصيات

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

حالة ودورة حياة المكونات

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

معالجة الأحداث في React

الفرق بين معالجة الأحداث في React ومعالجتها في DOM، وطريقة تمرير وسائط إلى معالجات الأحداث.

التصيير الشرطي

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

القوائم والمفاتيح

طريقة تصيير مكوّنات متعددة، وأهميّة المفاتيح في معرفة العناصر التي تغيرت، أو أُضيفت، أو أُزيلت.

الحقول

طريقة استخدام الحقول (forms) في React والفرق بين طريقة تعريفها في HTML وطريقة تعريفها في React، مع الحديث عن مفهوم المكوّنات المضبوطة.

رفع الحالات المشتركة للمستوى الأعلى

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

الفرق بين التركيب والوراثة في React

أهمية استخدام التركيب في React وشرح هذا المفهوم وأفضليّة استخدامه على استخدام الوراثة.

أسلوب التفكير في React

أسلوب التفكير النموذجي أثناء بناء تطبيقات React وذلك بشرح بناء جدول بيانات منتجات قابل للبحث باستخدام React.

الدليل المتقدم

شرح JSX بالتفصيل

تشرح هذه الصفحة بالتفصيل صياغة JSX وطريقة التعامل مع الخاصيّات props عند استخدام هذه الصياغة واستخدام العناصر الأبناء في JSX.

التحقق من الأنواع الثابتة

استخدام أدوات التحقق من الأنواع الثابتة مثل Flow و TypeScript للتعرّف على بعض أنواع المشاكل قبل تنفيذ الشيفرة، وتحسين سير عمل المُطوِّر عن طريق إضافة ميّزات مثل الإكمال التلقائي.

التحقق من الأنواع باستخدام PropTypes

استخدام propTypes والتي هي أداة مُضمَّنة في React للتحقّق من الأنواع واكتشاف الأخطاء.

استخدام المراجع مع DOM

أهميّة استخدام المراجع للوصول إلى عقد DOM وعناصر React خارج تدفّق البيانات النموذجي في React.

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

شرح المكوّنات غير المضبوطة التي تسمح لـ DOM بالتعامل مع بيانات الحقول والفرق بينها وبين المكوّنات المضبوطة.

تحسين الأداء

طرق تسريع تطبيقات React لتحسين الأداء.

React بدون ES6

طريقة استخدام React بدون أصناف ES6، وذلك عن طريق التابع createReactClass()‎.

React بدون JSX

طريقة استخدام React بدون صياغة JSX، وذلك عن طريق استدعاء التابع React.createElement.

المطابقة (Reconciliation)

شرح خوارزمية المقارنة في React لتحديد التغييرات الحاصلة وإعادة التصيير لتحديث واجهة المستخدم بحسب تلك التغييرات.

استخدام السياق (Context) في React

يُزوِّدنا السياق (Context) بطريقة لتمرير البيانات عبر شجرة المُكوّنات بدون الحاجة لتمرير الخاصيّات props يدويًّا من الأعلى للأسفل في كل مستوى.

استخدام الأجزاء (Fragments) في React

طريقة استخدام الأجزاء لكي يُعيد المكوّن عناصر متعددة في React.

المداخل (Portals) في React

استخدام المداخل لتصيير المكونات الأبناء إلى عقدة DOM موجودة خارج تسلسل DOM للمكونات الآباء.

حدود الأخطاء

تعريف حدود الأخطاء وطريقة استخدامها لالتقاط الأخطاء والتعامل معها في المكوّنات الأبناء لحد الخطأ.

مكونات الويب

شرح مفهوم مكوّنات الويب والفرق بينها وبين مكوّنات React.

المكونات ذات الترتيب الأعلى

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

تمرير المراجع

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

خاصيات التصيير

يُشير مصطلح خاصيّة التصيير (render prop) إلى تقنية بسيطة لمشاركة الشيفرة بين مكوّنات React باستخدام خاصية والتي قيمتها هي عبارة عن دالة.يأخذ المكوّن الذي يمتلك خاصيّة تصيير دالة تُعيد عنصر React ويستدعيها بدلًا من تنفيذ منطق التصيير الخاص به. سنناقش في هذه الصفحة فائدة خاصيّات التصيير وكيفية كتابة خاصيّات التصيير الخاصّة بك.

تكامل React مع المكتبات الأخرى

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

سهولة الوصول

الفائدة من سهولة الوصول، والتي هي تصميم وإنشاء مواقع يُمكِن استخدامها من قبل أي شخص. والأدوات المُستخدَمة لتحقيق سهولة الوصول في تطبيقات React.

تقسيم الشيفرة

شرح طرق تقسيم الشيفرة باستخدام صياغة import()‎ الديناميكية، والمكتبات، وتقسيم الشيفرة المُعتمِد على الطريق. وأهميّة تقسيم الشيفرة في تحسين زمن تحميل الصفحة.

الوضع الصارم (Strict Mode)

أهمية استخدام الوضع الصارم في التعرف على المكوّنات التي لا تمتلك توابع دورة حياة آمنة، وكشف استخدام واجهة برمجة التطبيقات (API) القديمة للسياق ومراجع السلاسل النصيّة، وكشف التأثيرات الجانبية غير المتوقعة.

مرجع إلى واجهة برمجة التطبيق (API) في React

واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React

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

الصنف React.Component

مرجع مُفصَّل لواجهة برمجة التطبيقات (API) لتعريف صنف مكوّن React.

الكائن ReactDOM

شرح مفصّل لتابع التصيير render وطريقة استخدامه، وتوابع الكائن ReactDOM الأخرى مثل hydrate()‎ و findDOMNode.

الكائن ReactDOMServer

مرجّع مُفصّل لتوابع الكائن ReactDOMServer والتي تُستخدَم بشكل نموذجي مع خادم NodeJS مثل renderToString()‎ وتوابع أخرى.

عناصر DOM

الفوارق بين خاصيّات HTML وخاصيّات React. وخاصيّات HTML المدعومة في React.

الأحداث المصطنعة (Synthetic Events)

شرح مفهوم مُغلِّف الأحداث المصطنعة SyntheticEvent والذي يُشكِّل جزءًا من نظام أحداث React. وأسماء الأحداث المدعومة في React وخاصيّاتها.

أدوات الاختبار

شرح أدوات الاختبار المختلفة في React لتسهيل اختبار المكوّنات.

التصيير السطحي (Shallow Rendering)

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

مصير الاختبار (Test Renderer)

مرجع إلى مُصيِّر الاختبار الذي يُمكِن استخدامه لتصيير مكوّنات React إلى كائنات JavaScript نقيّة بدون الاعتماد على DOM أو بيئة الهاتف المحمول الأصليّة.

متطلبات بيئة JavaScript

متطلبات البيئة لكي تعمل React بشكل صحيح واستخدام polyfills لدعم المتصفحات الأقدم.

الأسئلة الشائعة في React

المصطلحات

شرح مفصّل لأهم المصطلحات المستخدمة في React.

استخدام AJAX مع React

أسئلة حول إمكانية إجراء استدعاء AJAX في React والمكان الصحيح لاستدعائها ومثال حول ذلك.

أسئلة حول Babel، و JSX، وخطوات بناء التطبيقات

تمرير الدوال إلى المكونات

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

حالة المكونات

أسئلة حول مفهوم حالة المكوّنات والفرق بينها وبين الخاصيّات. والسبب الكامن وراء عدم تحديث React لقيمة this.state بشكل متزامن.

التنسيق واستخدام CSS مع React

أسئلة حول طريقة إضافة CSS إلى المكوّنات وإمكانية استخدام التنسيقات السطرية وإجراء تحريك في React.

بنية ملفات المشروع

أسئلة حول أشيع الطرق المفضلة لترتيب بنية ملفات المشروع.

DOM الافتراضي والكائنات الداخلية

أسئلة حول مفهوم DOM الافتراضي والفرق بينه وبين DOM الخيالي.