الفرق بين المراجعتين لصفحة: «React/Topics»
Kinan-mawed (نقاش | مساهمات) |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (17 مراجعة متوسطة بواسطة 4 مستخدمين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
== [[React/tutorial|الدليل التطبيقي]] == | |||
دليل تطبيقي شامل لبناء لعبة إكس-أو باستخدام React. لا يفترض هذا الدليل أي معرفة مسبقة بمكتبة React. هذا الدليل مُصمَّم للأشخاص الذين يُفضّلون التعلّم بالممارسة. إن كنت تُفضّل تعلّم المفاهيم من البداية فارجع إلى <nowiki/>[[React/hello world|توثيق React من البداية خطوة بخطوة]]. قد تجد هذا الدليل متكاملًا مع توثيق React. | |||
== تثبيت React == | == تثبيت React == | ||
=== [[React/ | === [[React/getting started|البدء مع React]] === | ||
إلقاء نظرة شاملة على توثيق React والمصادر المرتبطة به. | |||
=== [[React/add react to a | === [[React/add react to a website|إضافة React إلى موقع ويب]] === | ||
تجريب React عبر إضافتها إلى أجزاء صغيرة من موقع ويب (جديد أو موجود مسبقًا) بالإضافة إلى تجريب React مع JSX. | |||
=== [[React/ | === [[React/create a new react app|إنشاء تطبيق React جديد]] === | ||
شرح بعض سلاسل الأدوات المشهورة في <nowiki/>React التي تساعد في أداء الكثير من المهام الروتينية. | |||
=== [[React/cdn links|روابط شبكة توزيع المحتوى CDN]] === | === [[React/cdn links|روابط شبكة توزيع المحتوى CDN]] === | ||
| سطر 15: | سطر 17: | ||
== المفاهيم الأساسية == | == المفاهيم الأساسية == | ||
=== [[React/hello world|مثال | === [[React/hello world|مثال «أهلًا بالعالم» في React]] === | ||
طريقة تنفيذ مثال | طريقة تنفيذ مثال «أهلًا بالعالم» في React، مع الحديث عن درجة المعرفة المفترضة في [[JavaScript]] للمتابعة في التوثيق. | ||
=== [[React/introducing jsx|مقدمة | === [[React/introducing jsx|مقدمة ل JSX]] === | ||
أهميّة استخدام صياغة JSX وهي عبارة عن امتداد لصياغة JavaScript ، تُستخدَم مع React لوصف المظهر الذي ينبغي أن تكون عليه واجهة المستخدم. | أهميّة استخدام صياغة JSX وهي عبارة عن امتداد لصياغة [[JavaScript]] ، تُستخدَم مع React لوصف المظهر الذي ينبغي أن تكون عليه واجهة المستخدم. | ||
=== [[React/rendering elements|تصيير العناصر]] === | === [[React/rendering elements|تصيير العناصر]] === | ||
| سطر 34: | سطر 36: | ||
=== [[React/conditional rendering|التصيير الشرطي]] === | === [[React/conditional rendering|التصيير الشرطي]] === | ||
بإمكانك في React إنشاء مُكوِّنات مميّزة تُغلِّف السلوك الذي تريده، ثم بعد ذلك تُصيِّر فقط أجزاء منها اعتمادًا على حالة تطبيقك. يعمل التصيير الشرطي في React بنفس الطريقة التي تعمل فيها التعابير الشرطيّة في | بإمكانك في React إنشاء مُكوِّنات مميّزة تُغلِّف السلوك الذي تريده، ثم بعد ذلك تُصيِّر فقط أجزاء منها اعتمادًا على حالة تطبيقك. يعمل التصيير الشرطي (Conditional Rendering) في React بنفس الطريقة التي تعمل فيها التعابير الشرطيّة في [[JavaScript]]، حيث تستطيع استخدام مُعامِلات [[JavaScript]] مثل if أو المُعامِل الشرطي لإنشاء عناصر تُمثِّل الحالة الحاليّة، ثمّ تدع React تُحدِّث واجهة المستخدم لمُطابقتها. | ||
=== [[React/lists and keys|القوائم والمفاتيح]] === | === [[React/lists and keys|القوائم والمفاتيح]] === | ||
| سطر 40: | سطر 42: | ||
=== [[React/forms|الحقول]] === | === [[React/forms|الحقول]] === | ||
طريقة استخدام الحقول (forms) في React والفرق بين طريقة تعريفها في HTML وطريقة تعريفها في React، مع الحديث عن مفهوم المكوّنات المضبوطة. | طريقة استخدام الحقول (forms) في React والفرق بين طريقة تعريفها في [[HTML]] وطريقة تعريفها في React، مع الحديث عن مفهوم المكوّنات المضبوطة. | ||
=== [[React/lifting state up|رفع الحالات المشتركة للمستوى الأعلى]] === | === [[React/lifting state up|رفع الحالات المشتركة للمستوى الأعلى]] === | ||
| سطر 63: | سطر 65: | ||
=== [[React/refs and the dom|استخدام المراجع مع DOM]] === | === [[React/refs and the dom|استخدام المراجع مع DOM]] === | ||
أهميّة استخدام المراجع للوصول إلى عقد DOM وعناصر React خارج تدفّق البيانات النموذجي في React. | |||
=== [[React/uncontrolled components|المكونات غير المضبوطة]] === | === [[React/uncontrolled components|المكونات غير المضبوطة]] === | ||
شرح المكوّنات غير المضبوطة التي تسمح لـ DOM بالتعامل مع بيانات الحقول والفرق بينها وبين المكوّنات المضبوطة. | |||
=== [[React/optimizing performance|تحسين الأداء]] === | === [[React/optimizing performance|تحسين الأداء]] === | ||
طرق تسريع تطبيقات React لتحسين الأداء. | |||
=== [[React/react without es6|React بدون ES6]] === | === [[React/react without es6|React بدون ES6]] === | ||
طريقة استخدام React بدون أصناف ES6، وذلك عن طريق التابع <code>createReactClass()</code>. | |||
=== [[React/react without jsx|React بدون JSX]] === | === [[React/react without jsx|React بدون JSX]] === | ||
طريقة استخدام React بدون صياغة JSX، وذلك عن طريق استدعاء التابع <code>React.createElement</code>. | |||
=== [[React/reconciliation|المطابقة (Reconciliation)]] === | === [[React/reconciliation|المطابقة (Reconciliation)]] === | ||
شرح خوارزمية المقارنة في React لتحديد التغييرات الحاصلة وإعادة التصيير لتحديث واجهة المستخدم بحسب تلك التغييرات. | |||
=== [[React/context|استخدام السياق (Context) | === [[React/context|استخدام السياق (Context)]] === | ||
يُزوِّدنا السياق (Context) بطريقة لتمرير البيانات عبر شجرة المُكوّنات بدون الحاجة لتمرير الخاصيّات <code>props</code> يدويًّا من الأعلى للأسفل في كل مستوى. | |||
=== [[React/fragments|استخدام الأجزاء (Fragments) | === [[React/fragments|استخدام الأجزاء (Fragments)]] === | ||
طريقة استخدام الأجزاء لكي يُعيد المكوّن عناصر متعددة في React. | |||
=== [[React/portals|المداخل (Portals) | === [[React/portals|المداخل (Portals)]] === | ||
استخدام المداخل لتصيير المكونات الأبناء إلى عقدة DOM موجودة خارج تسلسل DOM للمكونات الآباء. | |||
=== [[React/profiler|واجهة برمجة مراقب الأداء (Profiler API)]] === | |||
تحديد عدد المرات التي يُصيَّر فيها تطبيق React وما عبء تلك العملية على أداء التطبيق، وذلك لتحديد أجزاء التطبيق الأبطأ والتي قد تحتاج إلى تحسين. | |||
=== [[React/error boundaries|حدود الأخطاء]] === | === [[React/error boundaries|حدود الأخطاء]] === | ||
تعريف حدود الأخطاء وطريقة استخدامها لالتقاط الأخطاء والتعامل معها في المكوّنات الأبناء لحد الخطأ. | |||
=== [[React/web components|مكونات الويب]] === | === [[React/web components|مكونات الويب]] === | ||
شرح مفهوم مكوّنات الويب والفرق بينها وبين مكوّنات React. | |||
=== [[React/higher order components|المكونات ذات الترتيب الأعلى]] === | === [[React/higher order components|المكونات ذات الترتيب الأعلى]] === | ||
المكوّنات ذات الترتيب الأعلى هي تقنية متقدمة في React لإعادة استخدام منطق المكونات. ففي حين أنّ المكوّن الاعتيادي يُحوّل الخاصيّات إلى واجهة مستخدم، يُحوّل المكوّن ذو الترتيب الأعلى مكوّنًا إلى مكوّن آخر. سنناقش في هذه الصفحة الفائدة من المكوّنات ذات الترتيب الأعلى وكيفية كتابتها. | |||
=== [[React/forwarding refs|تمرير المراجع]] === | === [[React/forwarding refs|تمرير المراجع]] === | ||
تمرير المراجع هو تقنية لتمرير مرجع <code>ref</code> تلقائيًّا من مكوّن إلى عناصره الأبناء. لا يكون هذا ضروريًّا بشكل نموذجي لمعظم مكوّنات التطبيق، ولكن قد يكون مفيدًا لبعض أنواع المكوّنات، خاصّة مكتبات المكوّنات القابلة لإعادة الاستخدام. سنتحدث في هذه الصفحة عن أشيع الحالات التي نحتاج فيها تمرير المراجع. | |||
=== [[React/render props|خاصيات التصيير]] === | === [[React/render props|خاصيات التصيير]] === | ||
يُشير مصطلح خاصيّة التصيير (render prop) إلى تقنية بسيطة لمشاركة الشيفرة بين مكوّنات React باستخدام خاصية والتي قيمتها هي عبارة عن دالة.يأخذ المكوّن الذي يمتلك خاصيّة تصيير دالة تُعيد عنصر React ويستدعيها بدلًا من تنفيذ منطق التصيير الخاص به. سنناقش في هذه الصفحة فائدة خاصيّات التصيير وكيفية كتابة خاصيّات التصيير الخاصّة بك. | |||
=== [[React/integrating with other libraries|تكامل React مع المكتبات الأخرى]] === | === [[React/integrating with other libraries|تكامل React مع المكتبات الأخرى]] === | ||
يمكن استخدام React وتضمينها مع المكتبات الأخرى. سنتحدث في هذه الصفحة عن بعض أشيع الحالات مع التركيز على التكامل مع [https://jquery.com/ jQuery] و [http://backbonejs.org/ Backbone]، ولكن يمكن تطبيق نفس الأفكار لتكامل المكوّنات مع أي شيفرة موجودة حاليًّا. | |||
=== [[React/accessibility|سهولة الوصول]] === | === [[React/accessibility|سهولة الوصول]] === | ||
الفائدة من سهولة الوصول، والتي هي تصميم وإنشاء مواقع يُمكِن استخدامها من قبل أي شخص. والأدوات المُستخدَمة لتحقيق سهولة الوصول في تطبيقات React. | |||
=== [[React/code splitting|تقسيم الشيفرة]] === | === [[React/code splitting|تقسيم الشيفرة]] === | ||
شرح طرق تقسيم الشيفرة باستخدام صياغة <code>import()</code> الديناميكية، والمكتبات، وتقسيم الشيفرة المُعتمِد على الطريق. وأهميّة تقسيم الشيفرة في تحسين زمن تحميل الصفحة. | |||
=== [[React/strict mode|الوضع الصارم (Strict Mode)]] === | === [[React/strict mode|الوضع الصارم (Strict Mode)]] === | ||
أهمية استخدام الوضع الصارم في التعرف على المكوّنات التي لا تمتلك توابع دورة حياة آمنة، وكشف استخدام واجهة برمجة التطبيقات (API) القديمة للسياق ومراجع السلاسل النصيّة، وكشف التأثيرات الجانبية غير المتوقعة. | |||
== مرجع إلى واجهة برمجة التطبيق (API) | == مرجع إلى واجهة برمجة التطبيق (API) == | ||
=== [[React/react api|واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React]] === | === [[React/react api|واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React]] === | ||
مرجع إلى المكوّنات والفرق بين الصنف <code>React.Component</code> والصنف <code>React.PureComponent</code>. وواجهة برمجة التطبيق المستخدمة لإنشاء عناصر React وتحويلها، وإنشاء الأجزاء والمراجع. | |||
=== [[React/react component|الصنف React.Component]] === | === [[React/react component|الصنف <code>React.Component</code>]] === | ||
مرجع مُفصَّل لواجهة برمجة التطبيقات (API) لتعريف صنف مكوّن React. | |||
=== [[React/react dom|الكائن ReactDOM]] === | === [[React/react dom|الكائن <code>ReactDOM</code>]] === | ||
شرح مفصّل لتابع التصيير <code>render</code> وطريقة استخدامه، وتوابع الكائن ReactDOM الأخرى مثل <code>hydrate()</code> و <code>findDOMNode</code>. | |||
=== [[React/react dom server|الكائن ReactDOMServer]] === | === [[React/react dom server|الكائن <code>ReactDOMServer</code>]] === | ||
مرجّع مُفصّل لتوابع الكائن <code>ReactDOMServer</code> والتي تُستخدَم بشكل نموذجي مع خادم NodeJS مثل <code>renderToString()</code> وتوابع أخرى. | |||
=== [[React/dom elements|عناصر DOM]] === | === [[React/dom elements|عناصر DOM]] === | ||
الفوارق بين خاصيّات HTML وخاصيّات React. وخاصيّات HTML المدعومة في React. | |||
=== [[React/events|الأحداث المصطنعة (Synthetic Events)]] === | === [[React/events|الأحداث المصطنعة (Synthetic Events)]] === | ||
شرح مفهوم مُغلِّف الأحداث المصطنعة <code>SyntheticEvent</code> والذي يُشكِّل جزءًا من نظام أحداث React. وأسماء الأحداث المدعومة في React وخاصيّاتها. | |||
=== [[React/test utils|أدوات الاختبار]] === | === [[React/test utils|أدوات الاختبار]] === | ||
شرح أدوات الاختبار المختلفة في React لتسهيل اختبار المكوّنات. | |||
=== [[React/shallow renderer|التصيير السطحي | === [[React/shallow renderer|التصيير السطحي]] === | ||
يُتيح التصيير السطحي (Shallow Rendering) تصيير مكوّن على عمق مستوى واحد وتوضيح الحقائق حول ما يُعيده تابع التصيير، بدون القلق حول سلوك المكوّنات الأبناء التي لم تُصيَّر أو ينشأ عنها نسخة. | |||
=== [[React/test renderer|مصير الاختبار | === [[React/test renderer|مصير الاختبار]] === | ||
مرجع إلى مُصيِّر الاختبار (Test Renderer) الذي يُمكِن استخدامه لتصيير مكوّنات React إلى كائنات JavaScript نقيّة بدون الاعتماد على DOM أو بيئة الهاتف المحمول الأصليّة. | |||
=== [[React/javascript environment requirements|متطلبات بيئة JavaScript]] === | === [[React/javascript environment requirements|متطلبات بيئة JavaScript]] === | ||
متطلبات البيئة لكي تعمل React بشكل صحيح واستخدام شيفرات داعمة (polyfills) لدعم الإصدارات القديمة من المتصفحات. | |||
== الخطافات == | |||
=== [[React/hooks intro|مدخل إلى الخطافات]] === | |||
هذه الصفحة هي مدخل إلى الخطافات، إذ سنشرح فيها سبب إضافة الخطافات إلى React وكيف يمكن للخطافات أن تساعدك في كتابة تطبيقات قوية وضخمة. | |||
=== [[React/hooks overview|لمحة خاطفة عن الخطافات]] === | |||
توفر هذه الصفحة نظرةً عامةً وسريعةً حول الخطافات لمستخدمي React ذوي الخبرة، إذ تلقي نظرة سريعة على خطاف الحالة وخطاف التأثير وتتطرق باختصار إلى قواعد الخطافات. | |||
=== [[React/hooks state|استعمال خطاف الحالة]] === | |||
الخطاف <code>useState</code> هو أحد الخطافات التي توفرها React. في أغلب الأحيان، سنشير إليه بالاسم "خطاف الحالة" (State Hook). يسمح لنا هذا الخطاف بإضافة حالة محلية إلى مكونات دالة في [[React]] بخطوات بسيطة وشيفرة أقل. | |||
=== [[React/hooks effect|استعمال خطاف التأثير]] === | |||
الخطاف <code>useEffect</code> يمكِّننا من إحداث تأثيرات جانبية (side effects) في مكون بعد تصييره. قد تتطلب بعض التأثيرات إجراء عملية تنظيف بينما لا يتطلب بعضها الآخر تنفيذ هذه العملية. أي يوحِّد خطاف التأثير كلا هاتين الحالتين في واجهة برمجية واحدة. | |||
=== [[React/hooks rules|قواعد استعمال الخطافات]] === | |||
الخطافات هي دوال [[JavaScript]]، ولكن تحتاج إلى اتباع قاعدتين عند استعمالها لتعمل بشكل صحيح. يشرح هذا القسم هاتين القاعدتين بالتفصيل. | |||
=== [[React/hooks custom|بناء خطاف خاص بك]] === | |||
بناء خطافات خاصة بك تمكِّنك من استخراج شيفرة من مكون ما إلى دوال قابلة لإعادة الاستعمال. يشرح هذا القسم كيفية إنشاء خطافات مخصصة واستعمالها في React. | |||
=== [[React/hooks reference|مرجع إلى الواجهة البرمجية للخطافات]] === | |||
تشرح هذه الصفحة الواجهات البرمجية للخطافات المضمَّنة في React. | |||
== الأسئلة الشائعة في | === [[React/hooks faq|الأسئلة الشائعة حول الخطافات]] === | ||
تجيب هذه الصفحة عن بعض الأسئلة التي يتكرر طرحها حول <nowiki/>[[React/hooks overview|الخطافات]]. | |||
== الاختبار (testing) == | |||
=== [[React/testing|نظرة عامة على عملية الاختبار]] === | |||
شرح كيفية إجراء الاختبارات على مُكوِّنات React بمختلف الطرائق والأساليب. | |||
=== [[React/testing recipes|وصفات الاختبار]] === | |||
عرض أكثر أنماط الاختبار شيوعًا لمكونات React. | |||
=== [[React/testing environments|بيئات الاختبار]] === | |||
توضيح العوامل التي تؤثر على بيئة الاختبار بالإضافة إلى توفير بعض التوصيات التي يمكنها المساعدة في التعامل مع العديد من الاحتمالات المختلفة. | |||
== الأسئلة الشائعة == | |||
=== [[React/glossary|المصطلحات]] === | === [[React/glossary|المصطلحات]] === | ||
شرح مفصّل لأهم المصطلحات المستخدمة في React. | |||
=== [[React/faq ajax|استخدام AJAX مع React]] === | === [[React/faq ajax|استخدام AJAX مع React]] === | ||
أسئلة حول إمكانية إجراء استدعاء AJAX في React والمكان الصحيح لاستدعائها ومثال حول ذلك. | |||
=== [[React/faq build|أسئلة حول | === [[React/faq build|أسئلة حول Babel و JSX وخطوات بناء التطبيقات]] === | ||
أسئلة حول استخدام JSX و ES6 مع React وكيفية كتابة التعليقات في JSX. | |||
=== [[React/faq functions|تمرير الدوال إلى المكونات]] === | === [[React/faq functions|تمرير الدوال إلى المكونات]] === | ||
أسئلة حول طريقة تمرير معالجات الأحداث إلى المكوّنات وربط الدالة إلى نسخة المكوّن وأهميّة هذا الربط. وطرق منع استدعاء الدالة بسرعة كبيرة أو مرات عديدة. | |||
=== [[React/faq state|حالة المكونات]] === | === [[React/faq state|حالة المكونات]] === | ||
أسئلة حول مفهوم حالة المكوّنات والفرق بينها وبين الخاصيّات. والسبب الكامن وراء عدم تحديث React لقيمة <code>this.state</code> بشكل متزامن. | |||
=== [[React/faq styling|التنسيق واستخدام CSS مع React]] === | === [[React/faq styling|التنسيق واستخدام CSS مع React]] === | ||
أسئلة حول طريقة إضافة CSS إلى المكوّنات وإمكانية استخدام التنسيقات السطرية وإجراء تحريك في React. | |||
=== [[React/faq structure|بنية ملفات المشروع]] === | === [[React/faq structure|بنية ملفات المشروع]] === | ||
أسئلة حول أشيع الطرق المفضلة لترتيب بنية ملفات المشروع. | |||
=== [[React/faq versioning|سياسة الإصدارات المتبعة في React]] === | |||
شرح مفصل للسياسة المتبعة في ترقيم إصدارات React والفروقات بالإضافة إلى الإجابة عن كل شيء يدور حول التغييرات الجذرية في الإصدارات. | |||
=== [[React/faq internals|DOM الافتراضي والكائنات الداخلية]] === | === [[React/faq internals|DOM الافتراضي والكائنات الداخلية]] === | ||
أسئلة حول مفهوم DOM الافتراضي والفرق بينه وبين DOM الخيالي. | |||
المراجعة الحالية بتاريخ 19:47، 11 أبريل 2021
الدليل التطبيقي
دليل تطبيقي شامل لبناء لعبة إكس-أو باستخدام React. لا يفترض هذا الدليل أي معرفة مسبقة بمكتبة React. هذا الدليل مُصمَّم للأشخاص الذين يُفضّلون التعلّم بالممارسة. إن كنت تُفضّل تعلّم المفاهيم من البداية فارجع إلى توثيق React من البداية خطوة بخطوة. قد تجد هذا الدليل متكاملًا مع توثيق React.
تثبيت React
البدء مع React
إلقاء نظرة شاملة على توثيق React والمصادر المرتبطة به.
إضافة React إلى موقع ويب
تجريب React عبر إضافتها إلى أجزاء صغيرة من موقع ويب (جديد أو موجود مسبقًا) بالإضافة إلى تجريب React مع JSX.
إنشاء تطبيق React جديد
شرح بعض سلاسل الأدوات المشهورة في React التي تساعد في أداء الكثير من المهام الروتينية.
روابط شبكة توزيع المحتوى CDN
روابط شبكة توزيع المحتوى الخاصّة بمكتبة React للتطوير والإنتاج.
المفاهيم الأساسية
مثال «أهلًا بالعالم» في React
طريقة تنفيذ مثال «أهلًا بالعالم» في React، مع الحديث عن درجة المعرفة المفترضة في JavaScript للمتابعة في التوثيق.
مقدمة ل JSX
أهميّة استخدام صياغة JSX وهي عبارة عن امتداد لصياغة JavaScript ، تُستخدَم مع React لوصف المظهر الذي ينبغي أن تكون عليه واجهة المستخدم.
تصيير العناصر
شرح تصيير العناصر إلى DOM وطريقة تحديثها، مع أخذ مثال عن تطبيق الساعة الموقوتة لفهم ذلك.
المكونات والخاصيات
تُتيح لنا المُكوِّنات (Components) تقسيم واجهة المستخدم إلى قطع مُستقِلَّة قابلة لإعادة الاستخدام، والتفكير بكل قطعة على انفراد. تقبل المكوّنات مُدخَلات المستخدم والتي تُدعى الخاصيّات props. تشرح هذه الصفحة الفرق بين مكوّنات الأصناف والدوال وطريقة استخراج وتركيب المكوّنات.
حالة ودورة حياة المكونات
تتحدّث هذه الصفحة عن حالة المكوّنات وأهميتها من خلال مثال عملي للساعة الموقوتة. مع شرح طريقة استخدام الحالة بشكل صحيح، ومقدمة إلى توابع دورة حياة المكوّنات.
معالجة الأحداث في React
الفرق بين معالجة الأحداث في React ومعالجتها في DOM، وطريقة تمرير وسائط إلى معالجات الأحداث.
التصيير الشرطي
بإمكانك في React إنشاء مُكوِّنات مميّزة تُغلِّف السلوك الذي تريده، ثم بعد ذلك تُصيِّر فقط أجزاء منها اعتمادًا على حالة تطبيقك. يعمل التصيير الشرطي (Conditional Rendering) في 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)
يُزوِّدنا السياق (Context) بطريقة لتمرير البيانات عبر شجرة المُكوّنات بدون الحاجة لتمرير الخاصيّات props يدويًّا من الأعلى للأسفل في كل مستوى.
استخدام الأجزاء (Fragments)
طريقة استخدام الأجزاء لكي يُعيد المكوّن عناصر متعددة في React.
المداخل (Portals)
استخدام المداخل لتصيير المكونات الأبناء إلى عقدة DOM موجودة خارج تسلسل DOM للمكونات الآباء.
واجهة برمجة مراقب الأداء (Profiler API)
تحديد عدد المرات التي يُصيَّر فيها تطبيق React وما عبء تلك العملية على أداء التطبيق، وذلك لتحديد أجزاء التطبيق الأبطأ والتي قد تحتاج إلى تحسين.
حدود الأخطاء
تعريف حدود الأخطاء وطريقة استخدامها لالتقاط الأخطاء والتعامل معها في المكوّنات الأبناء لحد الخطأ.
مكونات الويب
شرح مفهوم مكوّنات الويب والفرق بينها وبين مكوّنات React.
المكونات ذات الترتيب الأعلى
المكوّنات ذات الترتيب الأعلى هي تقنية متقدمة في React لإعادة استخدام منطق المكونات. ففي حين أنّ المكوّن الاعتيادي يُحوّل الخاصيّات إلى واجهة مستخدم، يُحوّل المكوّن ذو الترتيب الأعلى مكوّنًا إلى مكوّن آخر. سنناقش في هذه الصفحة الفائدة من المكوّنات ذات الترتيب الأعلى وكيفية كتابتها.
تمرير المراجع
تمرير المراجع هو تقنية لتمرير مرجع ref تلقائيًّا من مكوّن إلى عناصره الأبناء. لا يكون هذا ضروريًّا بشكل نموذجي لمعظم مكوّنات التطبيق، ولكن قد يكون مفيدًا لبعض أنواع المكوّنات، خاصّة مكتبات المكوّنات القابلة لإعادة الاستخدام. سنتحدث في هذه الصفحة عن أشيع الحالات التي نحتاج فيها تمرير المراجع.
خاصيات التصيير
يُشير مصطلح خاصيّة التصيير (render prop) إلى تقنية بسيطة لمشاركة الشيفرة بين مكوّنات React باستخدام خاصية والتي قيمتها هي عبارة عن دالة.يأخذ المكوّن الذي يمتلك خاصيّة تصيير دالة تُعيد عنصر React ويستدعيها بدلًا من تنفيذ منطق التصيير الخاص به. سنناقش في هذه الصفحة فائدة خاصيّات التصيير وكيفية كتابة خاصيّات التصيير الخاصّة بك.
تكامل React مع المكتبات الأخرى
يمكن استخدام React وتضمينها مع المكتبات الأخرى. سنتحدث في هذه الصفحة عن بعض أشيع الحالات مع التركيز على التكامل مع jQuery و Backbone، ولكن يمكن تطبيق نفس الأفكار لتكامل المكوّنات مع أي شيفرة موجودة حاليًّا.
سهولة الوصول
الفائدة من سهولة الوصول، والتي هي تصميم وإنشاء مواقع يُمكِن استخدامها من قبل أي شخص. والأدوات المُستخدَمة لتحقيق سهولة الوصول في تطبيقات React.
تقسيم الشيفرة
شرح طرق تقسيم الشيفرة باستخدام صياغة import() الديناميكية، والمكتبات، وتقسيم الشيفرة المُعتمِد على الطريق. وأهميّة تقسيم الشيفرة في تحسين زمن تحميل الصفحة.
الوضع الصارم (Strict Mode)
أهمية استخدام الوضع الصارم في التعرف على المكوّنات التي لا تمتلك توابع دورة حياة آمنة، وكشف استخدام واجهة برمجة التطبيقات (API) القديمة للسياق ومراجع السلاسل النصيّة، وكشف التأثيرات الجانبية غير المتوقعة.
مرجع إلى واجهة برمجة التطبيق (API)
واجهة برمجة التطبيق (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 ذوي الخبرة، إذ تلقي نظرة سريعة على خطاف الحالة وخطاف التأثير وتتطرق باختصار إلى قواعد الخطافات.
استعمال خطاف الحالة
الخطاف useState هو أحد الخطافات التي توفرها React. في أغلب الأحيان، سنشير إليه بالاسم "خطاف الحالة" (State Hook). يسمح لنا هذا الخطاف بإضافة حالة محلية إلى مكونات دالة في React بخطوات بسيطة وشيفرة أقل.
استعمال خطاف التأثير
الخطاف useEffect يمكِّننا من إحداث تأثيرات جانبية (side effects) في مكون بعد تصييره. قد تتطلب بعض التأثيرات إجراء عملية تنظيف بينما لا يتطلب بعضها الآخر تنفيذ هذه العملية. أي يوحِّد خطاف التأثير كلا هاتين الحالتين في واجهة برمجية واحدة.
قواعد استعمال الخطافات
الخطافات هي دوال JavaScript، ولكن تحتاج إلى اتباع قاعدتين عند استعمالها لتعمل بشكل صحيح. يشرح هذا القسم هاتين القاعدتين بالتفصيل.
بناء خطاف خاص بك
بناء خطافات خاصة بك تمكِّنك من استخراج شيفرة من مكون ما إلى دوال قابلة لإعادة الاستعمال. يشرح هذا القسم كيفية إنشاء خطافات مخصصة واستعمالها في React.
مرجع إلى الواجهة البرمجية للخطافات
تشرح هذه الصفحة الواجهات البرمجية للخطافات المضمَّنة في React.
الأسئلة الشائعة حول الخطافات
تجيب هذه الصفحة عن بعض الأسئلة التي يتكرر طرحها حول الخطافات.
الاختبار (testing)
نظرة عامة على عملية الاختبار
شرح كيفية إجراء الاختبارات على مُكوِّنات React بمختلف الطرائق والأساليب.
وصفات الاختبار
عرض أكثر أنماط الاختبار شيوعًا لمكونات React.
بيئات الاختبار
توضيح العوامل التي تؤثر على بيئة الاختبار بالإضافة إلى توفير بعض التوصيات التي يمكنها المساعدة في التعامل مع العديد من الاحتمالات المختلفة.
الأسئلة الشائعة
المصطلحات
شرح مفصّل لأهم المصطلحات المستخدمة في React.
استخدام AJAX مع React
أسئلة حول إمكانية إجراء استدعاء AJAX في React والمكان الصحيح لاستدعائها ومثال حول ذلك.
أسئلة حول Babel و JSX وخطوات بناء التطبيقات
أسئلة حول استخدام JSX و ES6 مع React وكيفية كتابة التعليقات في JSX.
تمرير الدوال إلى المكونات
أسئلة حول طريقة تمرير معالجات الأحداث إلى المكوّنات وربط الدالة إلى نسخة المكوّن وأهميّة هذا الربط. وطرق منع استدعاء الدالة بسرعة كبيرة أو مرات عديدة.
حالة المكونات
أسئلة حول مفهوم حالة المكوّنات والفرق بينها وبين الخاصيّات. والسبب الكامن وراء عدم تحديث React لقيمة this.state بشكل متزامن.
التنسيق واستخدام CSS مع React
أسئلة حول طريقة إضافة CSS إلى المكوّنات وإمكانية استخدام التنسيقات السطرية وإجراء تحريك في React.
بنية ملفات المشروع
أسئلة حول أشيع الطرق المفضلة لترتيب بنية ملفات المشروع.
سياسة الإصدارات المتبعة في React
شرح مفصل للسياسة المتبعة في ترقيم إصدارات React والفروقات بالإضافة إلى الإجابة عن كل شيء يدور حول التغييرات الجذرية في الإصدارات.
DOM الافتراضي والكائنات الداخلية
أسئلة حول مفهوم DOM الافتراضي والفرق بينه وبين DOM الخيالي.