مرحبًا بك في اليوم الرابع من تحدي "30 يومًا من ReactJS"! اليوم، سنستكشف المكونات والدعائم — اللبنات الأساسية لأي تطبيق React. سيسمح لك فهم هذه المفاهيم بتقسيم واجهة المستخدم الخاصة بك إلى أجزاء مستقلة وقابلة لإعادة الاستخدام.

ما هي المكونات؟

المكونات في React تشبه المكونات الموجودة في الوصفة. تمامًا كما تقوم بدمج مكونات مختلفة لإنشاء طبق، يمكنك دمج المكونات لإنشاء تطبيق React. المكون هو وظيفة أو فئة JavaScript تقبل بشكل اختياري المدخلات (المعروفة باسم الدعائم) وترجع عنصر React الذي يصف ما يجب أن يظهر على الشاشة.

هناك نوعان رئيسيان من المكونات في React:

المكونات الوظيفية: هذه هي وظائف JavaScript التي تُرجع JSX. إنها أبسط وأسهل في القراءة.

مكونات الفئة: هذه هي فئات ES6 التي تمتد من React.Component. لديهم المزيد من الميزات مثل أساليب الحالة ودورة الحياة ولكنها أقل شيوعًا في تطوير React الحديث.

مثال: مكون الزر

لنقم بإنشاء مكون زر بسيط:

function Button() {
  return (
    Click me!
  );
}

مكون الزر هذا هو مكون وظيفي يقوم بإرجاع عنصر زر بالنص "انقر فوقي!".

سبب أهمية المكونات

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

مثال من الحياة الواقعية: مكعبات ليغو
فكر في مكونات مثل كتل Lego. كل كتلة (مكون) هي جزء من تطبيقك، ويمكنك دمجها لإنشاء شيء أكبر. تمامًا مثل كتل Lego، يمكن إعادة استخدام المكونات في أجزاء مختلفة من تطبيقك.

ما هي الدعائم؟
الدعائم (اختصار لـ "الخصائص") هي الطريقة التي تمرر بها البيانات من مكون إلى آخر. وهي تشبه وسيطات الوظائف ويمكن استخدامها لتخصيص مكون.

على سبيل المثال، لنفترض أننا نريد إنشاء مكون زر يمكنه عرض نص مختلف بناءً على الدعائم التي يتلقاها:

function Button(props) {
  return (
    {props.label}
  );
}

الآن، عند استخدام مكون الزر، يمكنك تمرير خاصية التسمية لتخصيص نصها:

function App() {
  return (
    

      
      
    
  );
}

هنا، يتم استخدام مكون الزر مرتين، ولكن مع تسميات مختلفة: "إرسال" و"إلغاء".

أهمية الدعائم

الدعائم تجعل مكوناتك أكثر مرونة وقابلة لإعادة الاستخدام. بدلاً من ترميز القيم داخل مكوناتك، يمكنك تمرير البيانات الديناميكية من خلال الدعائم، مما يسمح لك باستخدام نفس المكون في سياقات مختلفة.

إعداد المكونات والدعائم باستخدام Vite

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

إليك كيفية تنظيم مشروعك:

1. إنشاء مكون جديد: قم بإنشاء ملف جديد، Button.jsx، في مجلد src الخاص بك وحدد مكون Button الخاص بك هناك.
2. استخدم المكون في تطبيقك: في ملف App.jsx، قم باستيراد مكون الزر واستخدمه مع دعائم مختلفة.

تجميع كل شيء معًا

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

غدًا، سنتعمق في أساليب الحالة ودورة الحياة، والتي ستسمح لمكوناتك بإدارة البيانات الديناميكية والاستجابة للتغيرات بمرور الوقت.