Search⌘ K
AI Features
Home
Courses
تعلم React 19: الدليل الكامل لتطبيقات الويب الحديثة

مقدمة إلى مكونات React

تعرف على المكونات الموجودة في React وكيف نموذج اللبنات الأساسية لتطبيق React .

سنغطي ما يلي...

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

المكونات هي الوحدات الأساسية لتطبيق React . يمكنك اعتبارها دوال أو فئات JavaScript تقبل المدخلات وتُرجع عناصر React التي تصف ما يجب أن يظهر على الشاشة.

لماذا المكونات مهمة

  • إمكانية إعادة الاستخدام: تسمح لنا المكونات بإعادة استخدام الكود، مما يجعل تطبيقنا أكثر قابلية للصيانة.

  • النمطية: تقسيم واجهة المستخدم إلى مكونات يجعل إدارتها وتصحيح أخطائها أسهل.

  • سهولة القراءة: تعمل التسلسل الهرمي للمكونات المنظمة جيدًا على تحسين سهولة قراءة الكود الخاص بنا.

إنشاء مكوننا الأول

لنقم بإنشاء مكون وظيفي بسيط يعرض رسالة ترحيب.

Javascript (babel-node)
function Greeting() {
  return <h1>Hello, World!</h1>;
}
export default Greeting;

  • الأسطر 1-3: نقوم بتعريف الدالةGreeting ، وهو مكوننا.

    • السطر 2: تقوم الدالة بإرجاع<h1> عنصر مع النصHello, World! .

  • الخط 5: نقوم بتصديرGreeting المكون حتى يمكن استخدامه في أجزاء أخرى من تطبيقنا.

تقديم المكون

لعرض هذا المكون على الشاشة، سنقوم بتقديمه داخل ملف التطبيق الرئيسي لدينا.

  • السطر 1: نقوم باستيرادGreeting المكون الذي قمنا بإنشائه للتو.

  • الأسطر 3-9: نحددApp المكون، وهو المكون الجذري لتطبيقنا.

    • الأسطر 5-7: داخلApp عناصرreturn في بياننا، ندرج<Greeting /> مكون داخل<div> .

  • الخط 11: نقوم بتصديرApp المكون كتصدير افتراضي.

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

تسلسل المكونات

عندما نبدأ العمل مع المكونات في React، دعونا أولاً نتعرف على كيفية تنظيمها وتفاعلها مع بعضها البعض. يُعرف هذا التنظيم باسم هرم المكونات .

يُمثل التسلسل الهرمي للمكونات بنية تطبيق React ، مُبينًا كيفية تداخل المكونات مع بعضها البعض. يُمكن تشبيهه بشجرة عائلة، حيث يُمكن أن يكون لكل مكون علاقات أبوية وفرعية.

مثال بسيط على التسلسل الهرمي للمكونات

دعونا نعيد النظر فيApp وGreeting المكونات التي أنشأناها سابقًا:

وفي ملف التطبيق الرئيسي لدينا:

فهم العلاقة

  • المكون الرئيسي:App هو المكون الرئيسي.

  • المكون الفرعي:Greeting هو المكون الفرعي الذيApp يقدم.

A simple components hierarchy with App as the parent and Greeting as the child
A simple components hierarchy with App as the parent and Greeting as the child

وهذا يدل على أنApp يحتوي المكون علىGreeting عنصر.

إضافة المزيد من المكونات

لنفترض أننا نضيف مكونًا آخر يسمىFooter :

Javascript (babel-node)
function Footer() {
  return <p>&copy; 2023 My Website</p>;
}
export default Footer;

يمكننا تحديثApp المكون الذي يجب تضمينهFooter :

تم تحديث التسلسل الهرمي

الآن، يبدو التسلسل الهرمي للمكونات على النحو التالي:

A components hierarchy with App as the parent, and Greeting and Footer components as child
A components hierarchy with App as the parent, and Greeting and Footer components as child

النقاط الرئيسية

  • يمكن أن تحتوي المكونات على مكونات أخرى.

  • يعتبر التسلسل الهرمي للمكونات عبارة عن هيكل يشبه الشجرة.

  • تقوم المكونات الأصلية بعرض المكونات الفرعية داخل JSX الخاصة بها.

ممارسة التمارين الرياضية

الآن، دعونا نطبق ما تعلمناه من خلال تمرين عملي.

بيان المشكلة

قم ببناء تطبيق React بسيط عن طريق إكمال المهام التالية:

  • المهمة 1: إنشاء مكون وظيفي يسمىHeader الذي يعيد<h1> عنصر يعرض النصWelcome to My Website .

  • المهمة 2: إنشاء مكون وظيفي يسمىMainContent الذي - التي:

    • يعلن عن متغيرcurrentDate ويعين له قيمة تاريخ اليوم باستخدامnew Date().toLocaleDateString() .

    • يعيد<p> عنصر مع النصToday’s date is [currentDate]. ، أين[currentDate] يتم إدراجه ديناميكيًا باستخدام الأقواس المتعرجة{} .

  • المهمة 3: تعديلApp مكون إلى:

    • تقديمHeader عنصر.

    • تقديمMainContent عنصر.

تأكد من أن كلا المكونين يتم تقديمهما داخل<div> عنصر.

من خلال تعلم كيفية إنشاء المكونات وتقديمها، اتخذنا الخطوة الأولى نحو بناء تطبيقات React ديناميكية وقابلة للتعديل.