تصحيح الأخطاء في React
الدليل الكامل لبدء التصحيح على React
التصحيح هو فن إزالة الأخطاء والأخطاء. سنعرض لك اليوم في هذا الدليل طرقًا مختلفة لتصحيح أخطاء React. فيما يتعلق بـ React ، يمكن أن يكون لدينا أنواع مختلفة من الأخطاء على النحو التالي:
- أخطاء واجهة المستخدم – هناك مشكلة في واجهة المستخدم ، على سبيل المثال لا تبدو جيدة.
- الأخطاء المنطقية – لا يتصرف البرنامج كما نتوقع
- مواطن الخلل في الشبكة – على الرغم من صحة المنطق ، إلا أن خدمة الطرف الثالث لا تتصرف كما نتوقع.
- الانحدار – ميزة عملت في الماضي ولم تعد تعمل اليوم.
هناك فئات أكثر من هذا ، ولكن ما سبق يكفي لبدء التصحيح على React. لنتحدث عن إنشاء تطبيق صغير في React وكيفية تصحيحه.
كيفية تثبيت Node.js و npm؟
قبل البدء ، تأكد من تثبيت إصدار جديد من Node.js و npm. أوصي باستخدام أحدث إصدار من LTS (دعم طويل المدى). نظرًا لأن npm مرفق مع Node.js ، لم تعد بحاجة إلى تثبيته بشكل منفصل. للتأكد من تثبيت Node.js بشكل صحيح ، قم بتشغيل الأمر -v في الجهاز الطرفي (سطر الأوامر). يجب أن نرى شيئا من هذا القبيل:
| 1 2 | $ node -v v10.15.1 |
الآن نحن جاهزون لإنشاء مشروعك.
كيفية بدء مشروع React
للبدء ، لنقم بإنشاء مشروع باستخدام Create React App. هذا مشروع شائع ، خاصة لتعلم React. هذا لأنه يشتمل على العديد من أفضل الممارسات البيئية. لإنشاء مشروع React ، قم بتشغيل الأمر npm create-react-app counterm99o9m9-d. ستستغرق هذه العملية بعض الوقت ، حيث تقوم بإنشاء دليل counter-demo وتثبيت جميع التبعيات المطلوبة.
انتقل إلى الدليل المقابل باستخدام الأمر cd counter-demo وقم بتنفيذ الأمر npm start. سيؤدي هذا إلى فتح علامة تبويب جديدة في متصفحك ويجب أن يعمل البرنامج فيها. الخطوة التالية هي إضافة شيء لتصحيحه هناك.
تصحيح الأخطاء في React
كيفية إنشاء تطبيق مضاد باستخدام React
لتبسيط الأمور ، لن أعلمك كيفية استخدام React في هذه المقالة. البرنامج التعليمي الكامل لهذا الإطار الشعبي متاح على الإنترنت. أدناه قمت بإنشاء برنامج مضاد في React. للتبسيط ، يمكنك نسخ الكود التالي في ملف src/App.js.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import React from 'react'; import './App.css'; function App() { return ( <div className="App"> <Counter /> </div> ); } function Counter() { const [count, setCount] = React.useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } export default App; |
بعد نسخ الكود أعلاه في الملف ذي الصلة ، يجب أن ترى زرًا بعنوان “اضغط فوقي”. يجب أن يؤدي الضغط عليه إلى زيادة القيمة الظاهرة أعلى الزر. الصورة التالية توضح البرنامج بعد التنفيذ:
كيفية تصحيح أخطاء React باستخدام عبارات وحدة التحكم
إحدى الطرق التقليدية لتصحيح أخطاء البرنامج هي استخدام log. في جميع أنحاء العالم ، استفاده از console.log ، console.warn ، console.error عباءة مشابهه این هدف دست پ. على سبيل المثال ، للتحقق من حالة البرنامج ، يمكنك تشغيل (console.log (count) ثم سترى النتيجة في متصفح inspector.
يستخدم المبرمجون هذه الطريقة لأنها سريعة في التنفيذ وتعتمد على مهاراتك المنطقية. ومع ذلك ، فإن استخدام inspector يعد المتصفح أسلوبًا أكثر قوة ، حيث يمنحك صورة أفضل لما يحدث.
الآن قد يُطلب منك كيفية فتح المتصفح inspector. لا يتم عرض inspector افتراضيًا. يجب عليك تمكينه باستخدام اختصار أو قائمة متصفح (تسمى عادةً مطور أو شيء مشابه).
كيفية تصحيح أخطاء React باستخدام متصفح inspector
يتضمن المتصفح العديد من الأدوات القوية ، بما في ذلك debugger.
يمكن تنشيطه عبر الكود باستخدام التعبير ;debugger
يبدو التصحيح باستخدام متصفح inspector كما يلي:
للبدء ، قم بما يلي:
- قم بتغيير الكود أعلاه ، بحيث يكون لديك تعبير ; debugger في الوظيفة Counter. على سبيل المثال ، أدخله بعد السطر حيث يتم وضع const.
- إذا لم يكن مفتوحًا بالفعل ، inspector افتح المستعرض الخاص بك.
- قم بتحديث الصفحة.
- لاحظ أنه بدلاً من تشغيل البرنامج ، يقوم المتصفح بإيقاف البرنامج. ترى شيئًا مثل Paused in debugger أو مصطلحات مشابهة. أيضًا يجب أن يشير inspector الآن إلى الكود الخاص بك.
الآن وقد أصبح البرنامج في حالة التجميد (Paused) ، يمكنك فحصه بطرق مختلفة. تأمل الأمثلة التالية:
- عندما تحوم فوق التعبيرات التي تم تنفيذها ، يجب أن تظهر لك القيم الحالية.
- يمكنك متابعة الأوامر خطوة بخطوة وتنفيذها ، أو يمكنك تنفيذ الأمر بأكمله بسرعة.
هناك وظائف أخرى ، بما في ذلك استخدام value watcherss. لكن ما سبق كافٍ لإعطائك فكرة عن مدى فعالية تصحيح الأخطاء في المتصفح.
تصحيح الأخطاء في React
كيفية تصحيح الأخطاء باستخدام React DevTools؟
لتحسين تصحيح الأخطاء React ، من الأفضل تثبيت أداة React Developer Tools. هذا البرنامج هو امتداد للمتصفحات استنادًا إلى Chrome و Mozilla Firefox الذي يقوم بتنفيذ وظائف تصحيح الأخطاء الخاصة لـ React. بعد تثبيت هذا المكون الإضافي ، افتح رأس React في متصفحك. يجب الانتباه إلى الرأس Elements و Profiler.
كيفية تصحيح أخطاء بنية شجرة عناصر React؟
يسمح لك رأس Elements للمكون الإضافي بمشاهدة بنية عناصر البرنامج والحالة المرتبطة به. بالنسبة لتطبيقنا ، إذا قمت بالضغط فوق العنصر Counter ، يمكنك رؤية القيمة الحالية. يمكن أيضًا تضييق العناصر المرئية باستخدام البحث.
كيف تُصحح أخطاء دوال الـ React؟
لتصحيح مشكلات الأداء ، يستخدم المكون الإضافي profiler المصمم لـ React. لاستخدام profiler ، قم بما يلي:
- اضغط على الدائرة الحمراء لبدء تسجيل session
- العمل على البرنامج (أي الضغط على الزر عدة مرات)
- اضغط على الحلقة الحمراء مرة أخرى لإنهاء session. نتيجة لهذا العمل ، يجب أن ترى التوقيت المحدد للأجزاء.
ليس هناك الكثير لعرضه لهذا التطبيق ، ولكنه ميزة قيمة عند تصحيح أخطاء الأشياء المعقدة.
كيف يتم تصحيح المشاكل المتعلقة بالشبكة في React؟
عادةً ما يتصل أحد التطبيقات بجهاز تحكم عن بعد backend. يجلب الاتصال بمصدر خارجي بحد ذاته العديد من العيوب ، لأن البيانات التي تتلقاها من backend قد لا تكون كما تتوقع. أو ربما أخطأت في استفسارك. لتصحيح هذه الأنواع من المشكلات ، استخدم علامة التبويب Networking من علامة التبويب inspector. سترى جميع طلبات الشبكة المرسلة هناك ، ويمكنك فحص محتوياتها.
يمكن أن يكون القيام بذلك جنبًا إلى جنب مع تقنية أخرى مثل الوضع ; debugger طريقة جيدة لتصحيح هذه الأشياء.
تصحيح الأخطاء في React
كيفية تصحيح أخطاء React و Redux
إذا كنت تستخدم Redux مع برنامجك ، فإن Redux DevTools Extension يتيح لك معرفة حالة البرنامج في وقت معين. باستخدام هذا البرنامج المساعد ، يمكنك أيضًا التنقل بين حالات مختلفة.
كيفية تصحيح أخطاء React الانحدارات
بافتراض أنك تستخدم Git لإدارة إصدارات البرنامج ، هناك أمر خاص يمكنك استخدامه لالتقاط الانحدار في برنامجك. إذا كنت تعلم أن وظيفة معينة كانت تعمل في الماضي ولكنها معطلة الآن ، فيمكن أن يساعدك Git في العثور على مكان تعطل الوظيفة. يسمى هذا الأمر git bisect.
الاعتبارات النهائية
عند تصحيح أخطاء React ، يجب أولاً تحديد المشكلة التي تواجهها.
ثم يمكنك تحديد الأسلوب الذي يجب استخدامه بناءً على ذلك.
عادةً ما يكون تصحيح الأخطاء عملية تفاعلية حيث تطرح أسئلة البرنامج وبالتالي تجد المشكلة.
ناقشنا في هذه المقالة طرق تصحيح الأخطاء في React ، وآمل أن تتمكن من استخدامها في تطبيقاتك.
أخيرا نتمنى أن يكون درس دليل كامل لبدء التصحيح في React قد أفادكم
يسعدنا إثراء الموضوع من خلال تعليقاتكم و استفساراتكم المفيدة
مع تحيات موقع hdegy