// === Reminder ===
All tags must return under a parent tag or using a react fragment(>)

// === Reminder ===
React component name must start with a capital letter otherwise it won't treated as a component

يقوم مكون ProductCard بإرجاع علامة div مع h1، h2، p، أو بعض العلامات الضرورية الأخرى المكتوبة مثل HTML، ولكنها Javascript تحت الغطاء. يسمى بناء الجملة JSX(javascript XML). لا تقلق سأشرح ذلك لاحقا.

// === Reminder ===
JSX is a syntax extension for javascript that lets you write HTML-like markup inside a javascript file which handles the logic of rendering and markup live together in the same place as components.

الآن أصبح المكون الخاص بك جاهزًا للاستخدام. على سبيل المثال، لديك صفحة منتج ويجب عليك عرض بعض المنتجات.

//Products.js or jsx file
function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

function ProductPage(){
  return(
      
product page
        
  )
}

سيعرض متصفحك 3 مرات بطاقة ProductCard مما يعني أن 3 بطاقات منتج كانت مرئية للمتصفح.

النقطة المهمة هي كيف سيكون رد فعل المتصفح بعد الحصول على رمز ProductPage هذا

• هو حرف صغير، لذلك تعرف React أنه سيُشير إليه كعلامة HTML
• يبدأ بحرف P كبير، لذا تعلم React أنه سيتم التعامل معه على أنه مكون.

حتى الان جيدة جدا؟. لقد نجحنا في تقديم بطاقة المنتجات إلى صفحة المنتج.
حان الوقت لتنظيم الكود:
قد يكون لديك مكون واحد أو أكثر مثل ProductCard، أو ProductReviewCard، أو SameProductCard، وما إلى ذلك. لذا، قد يكون من الصعب الإعلان عن جميع المكونات وإدارتها في ملف واحد. لذلك، دعونا نجعل الأمر أكثر تنظيمًا للإدارة باستخدام بنية الملف فقط.
لنقم بإنشاء مجلد قابل لإعادة الاستخدام نظرًا لاحتمال استخدام ProductCard من صفحات متعددة. داخل المجلد القابل لإعادة الاستخدام، قم بإنشاء ملف ProductCard.js/jsx.

//reusable/ProductCard.js or jsx file
function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

الآن هناك نقطة إذا قمت بفصل مكون ProductCard عن كيفية استخدامه من ملف ProductPage. أعلم أنك ربما تكون قد فهمت بالفعل نعم، يمكننا تصدير وظيفة ProductCard من ProductCardfile حسب الاسم أو الافتراضي الذي تفضله بالفعل.

//reusable/ProductCard.js or jsx file
export default function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

الآن أصبح قابلاً للاستخدام من ملف ProductPage. فقط قم باستيراد ProductCard من ملف ProductPagefile ثم استخدمه بقدر ما تريد.

//ProductPage.js or jsx file
import ProducrCard from './reusable/ProductCard.js'
function ProductPage(){
  return(
      
product page
        
  )
}

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

• أصبح مكون ProductCard الخاص بنا قابلاً لإعادة الاستخدام بالكامل الآن. يمكننا استخدامه من أي مكان.
• في ProductPage قد يكون هناك أقسام متعددة مثل ProductCard، وProductReviewCard، وSimilarProductCard، وRecommatedProductCard وما إلى ذلك. مما يجعلها تدير وتحافظ على التعليمات البرمجية مع التركيز على قسم منفصل كمكون تلو الآخر وقسم تلو الآخر.
• بعد كسر واجهة المستخدم كقطعة صغيرة من الأقسام، يصبح من السهل الاختبار والتصحيح والتطوير. يمكننا العثور على الأخطاء/المشكلات بسهولة من المكون المعين في حالة ظهور أخطاء. آمل أن يكون الأمر أكثر وضوحًا الآن؟

بعد كل هذا، لقد فهمت أنه يمكنك تداخل المكون الخاص بك أيضًا.

حسنًا، دعونا نلقي نظرة مرة أخرى-؟
إنشاء مجلد تخطيط
قم بإنشاء مجلد Header ضمن مجلد Layout ثم قم بإنشاء ملف Index.js داخل مجلد Header

export default function Header(){
  return(
      
Header
      
  )
}

create `Footer` folder under the `Layout` folder then create `index.js` file inside `Footer` folder
export default function Footer(){
  return(
      
Footer
      
  )
}

الآن قم بإنشاء ملف Index.js ضمن مجلد التخطيط

import Header from './Header';
import Footer from './Footer';
export default function Layout(){
  return(
      
page content
        
  )
}

أتمنى أن تكون قد اكتشفت بالفعل جمال بنية مكونات التفاعل. لقد بدأ هذا للتو وحاول تنمية الاهتمام داخل عقلك.
برمجة سعيدة؟؟