التحقق من نوع البيانات (PropTypes) في مكتبة React

 

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

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

المقالات السابقة:

عند بداية بنائك لتطبيقك أيا كان نوعه تطبيق ويب أو تطبيق موبايل، عادة ما نرسل بيانات معينة عبر (props) أو نطلب من المستخدم ادخال بعض المعلومات، تواجهنا بعض المشاكل و تكثر لدينا (Bugs) في تطبيقنا بسبب أننا لا نتحقق من نوع المعلومات المدخلة، فمثلاً: لو طلبنا من مستخدمنا ادخال رقم الهاتف و أخطأ أو تعمّد ادخال أحرف لاتينية/عربية! خطا فادح في برمجيتك ان كنت لا تتحق من صحة المعلومات :

• هل هي نصيّة؟ 
• أم رقميّة؟ 
• هل هو كائن؟
• هل المعلومة مطلوبة؟

 فما بالك بانشاء مشاريع كبيرة جداً كل مهمّاتها معلومات المستخدمين و وثائقهم و تحتفظ في قاعدة بيانات ضخمة! . 

لا يخفى على أحد أن جميع لغات البرمجة تحوي دوال التحقق و هذا ما يجب أن يكون فعلاً، كذلك مكتبة React تحوي مكتبة جزئية خاصة فقط بالتحققات و ستدعيها كلما دعت الحاجة لذلك. تسمى هذه المكتبة و الوظيفة في نفس الوقت بـ PropTypes .

دعونا عبر مثال تطبيقي نطبّق خاصية التحقق من نوع البيانات بعدها نشرح كل جزئية على حدى:

لنستفيد من مكتبة التحقق علينا استدعاؤها في تطبيقنا كالتالي:

import PropTypes from 'prop-types'; // for reactjs web apps 
-
import { PropTypes } from 'react'; //for react native

نبني مثال بسيط تطبيق ويب يعرض جميلة بتنسيق H1 فيها كملة أهلاً، ثم يُرفق معها اسم معين عبر (props). نحن الآن هدفنا أن نتحقق من البيانات التي يود أن يدخلها المستخدم.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

لاحظ أننا أضفنا التحقق بأسفل الكلاس و خارج قوسيه المعكوفتين، (ينبغي أن تعرف أننا نكتب بصيغة ES6  لا  ES5 القديم).

Greeting.propTypes = {
  name: PropTypes.string
};

اذا، يجب علينا ارفاق اسم الكلاس (Class) تتبعه كلمة (.propTypes) بعدها نفتح قوسين معكوفتين:

• ندخل اسم المتغير الذي يحمل البيانات - في مثالنا هذا : name.
• نرفق بعده نوع الصيغة التي تودها، في مثالنا هذا .. البيانات نصيّة لا غير PropTypes.string و string تعني نصيّة.
• يمكننا أن نخبر أن برنامجنا أن هذه المعلومة مطلوبة (Required) و يجب حتما ادخالها و لاتبقى فارغة عبر الوظيفة isRequired لتصبح كالتالي:

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

و هناك أنوع كثيرة من صيغ التحقق كـ: 

• PropTypes.array // مصفوفة
• PropTypes.bool // منطقية
• PropTypes.func // وظيفة
• PropTypes.number // رقم
• PropTypes.object // كائن
• PropTypes.string // نص

 

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

كلمات دليلية: تعلم رياكت نيتف