أفضل 70 أسئلة وأجوبة لمقابلة React JS

الرد على أسئلة وأجوبة المقابلة

فيما يلي أسئلة وأجوبة مقابلة ReactJs للطلاب الجدد والمرشحين ذوي الخبرة للحصول على وظيفة أحلامهم.

1) ما هو Reactjs؟

React هي مكتبة JavaScript تجعل إنشاء واجهات المستخدم أمرًا سهلاً. تم تطويره بواسطة الفيسبوك.


2) هل يستخدم React HTML؟

لا، فهو يستخدم JSX، وهو مشابه لـ HTML.

تنزيل مجاني بصيغة PDF: أسئلة وأجوبة المقابلة


3) متى تم إصدار React لأول مرة؟

تم إصدار React لأول مرة في مارس 2013.


4) أعطني أهم عيوب React

  • يتطلب تكامل React مع إطار عمل MVC مثل Rails تكوينًا معقدًا.
  • تتطلب React من المستخدمين أن يكون لديهم معرفة حول تكامل واجهة المستخدم في إطار عمل MVC.

5) اذكر الفرق بين Real DOM و Virtual DOM

DOM الحقيقي DOM الظاهري
يتم تحديثه ببطء. يتم تحديثه بشكل أسرع.
يسمح بالتحديث المباشر من HTML. لا يمكن استخدامه لتحديث HTML مباشرة.
إنه يهدر الكثير من الذاكرة. استهلاك الذاكرة أقل
الرد على أسئلة المقابلة JS
الرد على أسئلة المقابلة JS

6) ما هو مفهوم التدفق في رد الفعل؟

يستخدم Facebook على نطاق واسع مفهوم هندسة التدفق لتطوير تطبيقات الويب من جانب العميل. إنه ليس إطارًا أو مكتبة. إنه ببساطة نوع جديد من الهندسة المعمارية يكمل React ومفهوم تدفق البيانات أحادي الاتجاه.


7) حدد مصطلح Redux في React

Redux هي مكتبة تستخدم لتطوير الواجهة الأمامية. إنها حاوية حالة لتطبيقات JavaScript والتي يجب استخدامها لإدارة حالة التطبيقات. يمكنك اختبار وتشغيل تطبيق تم تطويره باستخدام Redux في بيئات مختلفة.


8) ما هي ميزة "المتجر" في Redux؟

يحتوي Redux على ميزة تسمى "Store" والتي تتيح لك حفظ حالة التطبيق بالكامل في مكان واحد. لذلك، يتم تخزين حالة المكونات بالكامل في المتجر حتى تتمكن من الحصول على تحديثات منتظمة مباشرة من المتجر. تساعدك شجرة الحالة الواحدة على تتبع التغييرات بمرور الوقت وتصحيح أخطاء التطبيق أو فحصه.


9) ما هو الإجراء في Redux؟

إنها دالة تقوم بإرجاع كائن الإجراء. يتم دائمًا تخزين نوع الإجراء وبيانات الإجراء في كائن الإجراء. يمكن للإجراءات إرسال البيانات بين المتجر والتطبيق البرمجي. يتم إنتاج جميع المعلومات التي يتم استردادها بواسطة المتجر من خلال الإجراءات.


10) قم بتسمية الميزات المهمة لـ React

فيما يلي ميزات مهمة لـ React.

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

11) شرح مصطلح المكونات عديمة الجنسية

المكونات عديمة الحالة هي وظائف خالصة تجعل DOM يعتمد فقط على الخصائص المقدمة لها.


12) شرح React Router

React Router عبارة عن مكتبة توجيه تسمح لك بإضافة تدفقات شاشة جديدة إلى تطبيقك، كما أنها تحافظ على مزامنة عنوان URL مع ما يظهر على الصفحة.


13) ما هي حزمة الرسوم المتحركة الشائعة في نظام React البيئي؟

حزمة الرسوم المتحركة الشائعة في نظام React البيئي هي

  • رد فعل الحركة
  • رد فعل المجموعة الانتقالية

14) ما هو الدعابة؟

Jest هو إطار عمل لاختبار وحدة JavaScript تم إنشاؤه بواسطة Facebook استنادًا إلى Jasmine. وهو يوفر إنشاء نماذج وهمية وبيئة jsdom. يتم استخدامه أيضًا كعنصر اختبار.


15) ما هو المرسل؟

يعد المرسل مركزًا مركزيًا للتطبيق حيث ستتلقى الإجراءات وتبث الحمولة إلى عمليات الاسترجاعات المسجلة.


16) ما المقصود بوظيفة رد الاتصال؟ ما هو الغرض منه؟

يجب استدعاء دالة رد الاتصال عند انتهاء setState، وإعادة عرض المكون. نظرًا لأن setState غير متزامن، ولهذا السبب فإنه يأخذ وظيفة رد اتصال ثانية.


17) شرح مصطلح مكون الترتيب العالي

يعد المكون ذو الترتيب الأعلى المعروف أيضًا باسم HOC تقنية متقدمة لإعادة استخدام منطق المكون. إنه ليس جزءًا من React API، لكنها نمط ينبثق من طبيعة React التركيبية.


18) شرح الجزء التقديمي

الجزء العرضي هو جزء يسمح لك بعرض HTML. سعة المقطع عرضية في الترميز.


19) ما هي الدعائم في React JS؟

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


20) ما هو استخدام الكلمة الرئيسية الفائقة في React؟

تساعدك الكلمة الأساسية super على الوصول إلى الوظائف الموجودة على أصل الكائن واستدعاءها.


21) شرح عبارة العائد في جافا سكريبت

يتم استخدام عبارة العائد للتأخير و استئنف عمل المولد، والذي يعرف باسم عبارة العائد.


22) اذكر نوعين من مكونات React

هناك نوعان من مكونات التفاعل هما:

  • مكون الوظيفة
  • مكون الطبقة

23) شرح الحدث الاصطناعي في React js

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


24) ما هي حالة رد الفعل؟

إنه كائن يقرر كيفية عرض مكون معين وكيف يتصرف. تقوم الحالة بتخزين المعلومات التي يمكن تغييرها على مدار عمر مكون React.


25) كيف يمكنك تحديث الحالة في React JS؟

يمكن تحديث الحالة على المكون بشكل مباشر أو غير مباشر.


26) شرح استخدام دالة السهم في React

تساعدك وظيفة السهم على التنبؤ بسلوك الأخطاء عند تمريرها كرد اتصال. ولذلك، فهو يمنع الأخطاء الناجمة عن هذا كله.


27) ما هي خطوات دورة حياة React؟

خطوات دورة حياة React js المهمة هي:

  • التهيئة
  • تحديثات الحالة/الملكية
  • التدمير هو دورة حياة React

28) اذكر الفرق الرئيسي بين الايجابيات والدولة

والفرق الرئيسي بين الاثنين هو أن الدولة قابلة للتغيير والإيجابيات غير قابلة للتغيير.


29) شرح المكونات النقية في React js

المكونات النقية هي أسرع المكونات التي يمكنها استبدال أي مكون بـ render()‎ فقط. يساعدك على تحسين بساطة التعليمات البرمجية وأداء التطبيق.


30) ما نوع المعلومات التي تتحكم في مقطع ما في React؟

هناك نوعان أساسيان من المعلومات التي تتحكم في المقطع: الحالة والدعائم

  • الحالة: معلومات الحالة التي ستتغير، نحن بحاجة إلى الاستفادة من الحالة.
  • الدعائم: يتم تعيين الدعائم من قبل الوالدين والتي يتم تسويتها طوال عمر الجزء.

31) ما هو "إنشاء تطبيق رد فعل"؟

"create-react-app" هي أداة سطر أوامر تتيح لك إنشاء تطبيق تفاعل أساسي واحد.


32) شرح استخدام "المفتاح" في قائمة التفاعل

تسمح لك المفاتيح بتزويد كل عنصر من عناصر القائمة بهوية ثابتة. يجب أن تكون المفاتيح فريدة من نوعها.


33) ما هي دعامة الأطفال؟

يتم استخدام الدعائم الأطفال لتمرير مكون إلى مكونات أخرى كخصائص. يمكنك الوصول إليه باستخدام

{props.children}

34) اشرح حدود الخطأ؟

تساعدك حدود الخطأ على اكتشاف خطأ Javascript في أي مكان في المكونات الفرعية. يتم استخدامها بشكل شائع لتسجيل الخطأ وإظهار واجهة مستخدم احتياطية.


35) ما فائدة العلامات الفارغة <> ؟

تُستخدم العلامات الفارغة في React للإعلان عن الأجزاء.


36) شرح الوضع الصارم

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


37) ما هي البوابات المتفاعلة؟

تتيح لك البوابة إمكانية عرض العناصر الفرعية في عقدة DOM.  CreatePortalmethod يستخدم لذلك.


38) ما هو السياق؟

يساعدك سياق التفاعل على تمرير البيانات باستخدام شجرة مكونات التفاعل. يساعدك على مشاركة البيانات عالميًا بين مكونات التفاعل المختلفة.


39) ما هو استخدام Webpack؟

Webpack هو في الأساس منشئ الوحدات النمطية. يتم تشغيله بشكل أساسي أثناء عملية التطوير.


40) ما هو بابل في React js؟

Babel، هو مترجم JavaScript يقوم بتحويل أحدث JavaScript مثل ES6 وES7 إلى ES5 JavaScript القديم الذي تفهمه معظم المتصفحات.


41) كيف يمكن للمتصفح قراءة ملف JSX؟

إذا كنت تريد أن يقرأ المتصفح JSX، فيجب استبدال ملف JSX باستخدام محول JSX مثل Babel ثم إرساله مرة أخرى إلى المتصفح.


42) ما هي المشكلات الرئيسية لاستخدام بنية MVC في React؟

فيما يلي التحديات الرئيسية التي ستواجهها أثناء التعامل مع بنية MVC:

  • التعامل مع DOM مكلف للغاية
  • وكانت التطبيقات في معظم الأحيان بطيئة وغير فعالة
  • بسبب الوظائف الدائرية، تم إنشاء نموذج معقد حول النماذج والأفكار

43) ماذا يمكن فعله عندما يكون هناك أكثر من سطر واحد من التعبير؟

في ذلك الوقت، يعد تعبير JSX متعدد الأسطر هو الخيار الوحيد المتبقي لك.


44) ما هو التخفيض؟

التخفيض هو أسلوب تطبيقي للتعامل مع الدولة.


45) شرح مصطلح الأحداث التركيبية

إنه في الواقع غلاف عبر المتصفحات حول الحدث الأصلي للمتصفح. تحتوي هذه الأحداث على واجهة stopPropagation() وpreventDefault().


46) متى يجب عليك استخدام عناصر الدرجة الأولى لعنصر الوظيفة؟

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


47) كيف يمكنك مشاركة عنصر في الإعراب؟

باستخدام الدولة، يمكننا مشاركة البيانات.


48) شرح مصطلح المصالحة

عندما تتغير حالة المكون أو خصائصه، ستقارن الاستراحة العنصر المعروض مع DOM المعروض مسبقًا وستقوم بتحديث DOM الفعلي إذا لزم الأمر. وتعرف هذه العملية بالمصالحة.


49) كيف يمكنك إعادة عرض أحد المكونات دون استخدام الدالة setState()؟

يمكنك استخدام الدالة forceUpdate() لإعادة عرض أي مكون.


50) هل يمكنك تحديث الدعائم في رد الفعل؟

لا يمكنك تحديث الدعائم في رد فعل js لأن الدعائم للقراءة فقط. علاوة على ذلك، لا يمكنك تعديل الدعائم المستلمة من الوالدين إلى الطفل.


51) شرح مصطلح "إعادة الهيكلة".

إعادة الهيكلة هي عملية استخراج مجموعة أشياء. بمجرد اكتمال العملية، يمكنك فصل كل كائن في متغير منفصل.


52) هل يمكنك تحديث قيم الدعائم؟

لا يمكن تحديث قيمة الخاصيات لأنها غير قابلة للتغيير.


53) شرح معنى التركيب والفك

  • تسمى عملية ربط العنصر بـ DCOM بالتركيب.
  • تسمى عملية فصل العنصر من DCOM بعملية إزالة التركيب.

54) ما هو استخدام مكتبة "أنواع الدعامة"؟

تتيح لك مكتبة 'Prop-types' إجراء فحص نوع وقت التشغيل بحثًا عن الدعائم والكائنات المشابهة في تطبيق حديث.


55) شرح خطافات التفاعل

تتيح لك خطافات React استخدام الحالة وميزات React الأخرى دون كتابة فصل دراسي.


56) ما هي الشظايا؟

يمكنك استخدام الكلمة الأساسية fragment لتجميع قائمة من المكونات الفرعية دون استخدام أي عقد إضافية في DOM. على سبيل المثال :

render() {

return (
);
}

57) ما هو الفرق الرئيسي بين createElement وcloneElment؟

  • يتم استخدام createElement بواسطة رد الفعل لإنشاء عناصر رد الفعل.
  • يتم استخدام cloneElement لاستنساخ عنصر وتمرير دعائم جديدة له.

58) ما هي المكونات التي تسيطر عليها؟

المكونات التي يتم التحكم فيها هي المكونات التي تتحكم في عناصر الإدخال.


59) لماذا تحتاج إلى استخدام الدعائم.الأطفال؟

يسمح لك هذا الأمرprops.children بتمرير مكون كبيانات إلى مكونات أخرى.


60) قم بإدراج بعض الأساليب في حزمة رد الفعل

الطرق المهمة لحزم رد الفعل هي:

  • يجعل()
  • هيدرات()
  • كريتبورتال ()
  • إلغاء تحميل ComponentAtNode()
  • العثور على DOMNode()

61) كيف يمكننا إجراء العرض من جانب الخادم في React؟

يمكننا استخدام خدمة رد الفعل للقيام بالعرض من جانب الخادم.


62) اذكر الفرق بين getInitialState() وconstructor()؟

إذا كنت تريد إنشاء مكون واحد عن طريق تمديد "React. Component'، يساعدك المنشئ على تهيئة الحالة. ولكن، إذا كنت تريد الإنشاء باستخدام "Reat.createClass". ثم يجب عليك استخدام "genInitiaState".


63) ما هو الحكام؟

ref هي سمة لعناصر DOM. الغرض الأساسي من المراجع هو العثور على عناصر DOM بسهولة.


64) ما هو ComponentWillMount()

المكونWillMount() هو إجراء استدعاءات API بمجرد بدء المكون وتكوين القيم في الحالة. لإجراء استدعاء API، استخدم HttpClient مثل Axios، أو يمكننا استخدام fetch() لتشغيل استدعاء AJAX.


65) كيفية إرسال البيانات في المتجر؟

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


66) كيف ستكون قادرًا على التعامل مع المزيد من الإجراءات باستخدام الإعادة؟

من أجل إنشاء نفس المكون في المزيد من تدفق العمل، فإننا نستخدم نفس الوظيفة في وحدات مختلفة.


67) كيف يمكنك سكب المخفضات؟

يمكننا أن نسكب عمليات الإنقاذ بناءً على إجراءات الحدث. يجب تقسيم هذا الإجراء إلى وحدات منفصلة.


68) قم بتسمية أي خمسة نماذج أولية محددة مسبقًا مستخدمة في React

أهم النماذج الأولية المستخدمة في React js هي:

  • عدد
  • سلسلة
  • مجموعة
  • موضوع
  • العنصر

69) ما هو الغرض من استخدام bindActionsCreators؟

يساعدك BindActionCreator على ربط الحدث بناءً على مرسل الإجراء بعنصر HTML.


70) ما هو REFS في رد الفعل

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


71) هل يمكن ربط عنصر JSX بمكونات JSX الأخرى؟

نعم، يمكنك استخدام إرفاق عنصر JSX مع مكونات JSX الأخرى التي تشبه إلى حد كبير تداخل عناصر HTML.


72) ما هو الإصدار المستقر الحالي من React؟

الإصدار الثابت الحالي من React هو الإصدار 17.5


73) اذكر إحدى الميزات المهمة لميزات سير عمل Redux

الميزات الهامة لسير عمل Redux هي:

  • إعادة الضبط: يساعدك على إعادة ضبط حالة المتجر
  • الرجوع: يسمح لك بالعودة إلى آخر حالة ملتزم بها
  • الاجتياح: ستتم إزالة جميع إجراءات التعطيل التي قد تقوم بإطلاقها عن طريق الخطأ
  • الالتزام: يساعدك على جعل الحالة الحالية هي الحالة الأولية.

74) اذكر الفرق بين React JS و React Native

React JS هي مكتبة جافا سكريبت مفتوحة المصدر للواجهة الأمامية تُستخدم لبناء واجهات المستخدم، في حين أن React Native عبارة عن إطار عمل متنقل مفتوح المصدر يسمح للمطورين باستخدام React على منصات مثل Android و آيفون. ستساعدك أسئلة المقابلة هذه أيضًا في حياتك (الفموية)

مشاركة

10 تعليقات

  1. الصورة الرمزية ريشابه يقول:

    مجموعة جيدة من الأسئلة.

  2. الصورة الرمزية فالميك جادهاف يقول:

    64) ما هو ComponentWillMount()

    الجواب خطأ..

    1. أليكس سيلفرمان أليكس سيلفرمان يقول:

      تم التصحيح ..!!

  3. الصورة الرمزية سبحاني يقول:

    خطأ إملائي في السؤال رقم 74 "الأصل الصحيح"،

    1. أليكس سيلفرمان أليكس سيلفرمان يقول:

      مرحبا، شكرا للإشارة. تم تصحيحه.

  4. الصورة الرمزية بول فلايشر جوليتو يقول:

    أسئلة جيدة. لم أر أسئلة ربط وظيفية. و لا حتى احد.

  5. الصورة الرمزية آسيا يقول:

    خطأ إملائي في السؤال رقم 62 "getIntialState()"

    1. الصورة الرمزية كيشور يقول:

      شكرًا لك، تم تحديث المحتوى.

  6. الصورة الرمزية أتول غيسالي يقول:

    أضف المزيد من الأسئلة على React

  7. الصورة الرمزية مجهول يقول:

    لقد ذكرت أن إعادة الهيكلة ليست إعادة هيكلة، بل هي تدمير. يرجى تصحيح ذلك

اترك تعليق

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المشار إليها إلزامية *