تعلم React/

...

/

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

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

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

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

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

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

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

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

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

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

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

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

Press + to interact
function Greeting() {
  return <h1>Hello, World!</h1>;
}
export default Greeting;

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

    • السطر 2: تقوم الدالة بإرجاع عنصر

      مع النص Hello, World! .

      ...